CSS Properties
HTML document styling is accomplished in web development using CSS (Cascading Style Sheets), a basic technology. New features and properties for CSS are added as web design advances, giving developers more tools at their disposal.
Introduction to CSS Properties
The essential components for designing visually appealing and useful online experiences are CSS Properties.
HTML components can be given behavior or style via CSS properties. Property_name and property_value are the two components of every CSS property, with the latter being encapsulated in double quotes (” “).
Syntax:
CSS Properties
The following are a few of the key CSS properties:
1. color: Indicates the color of the text.
2. background: Adjust the picture or color of the backdrop.
3. font-family: Indicates the kind of typeface.
4. margin: Regulates the area outside of components.
5. padding: Controls the internal space of elements.
6. display: Specifies the type of display (block, inline, etc.) for elements.
7. position: Manages how items are positioned (static, relative, absolute, etc.).
8. width and height: Assign the elements’ measurements.
9. border: Encircles items with borders.
10. grid and flexbox: Manage layouts that are responsive.
CSS Properties Examples
Example 1:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Properties</title>
<style>
body{
font-family: arial;
background-color: rgb(31, 29, 29);
}
.div1{
height: 480px;
width: 270px;
border-radius: 10px;
margin-left: 18%;
margin-top: 5%;
background-color: white;
box-shadow: 2px 2px 10px 5px black,
-2px -2px 10px 5px black;
}
img{
height: 200px;
width: 271px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.div1 h3{
margin-left: 35%;
}
.div1 h2{
margin-left: 25%;
margin-top: -5%;
}
.div1 p{
padding: 5px;
text-align: center;
color: grey;
}
.div1 .footer{
height: 12%;
width: 270px;
margin-top: 9%;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background-color: rgb(165, 49, 84);
color: aliceblue;
}
.div2{
height: 510px;
width: 290px;
border-radius: 10px;
margin-left: 40%;
margin-top: -33%;
background-color: white;
box-shadow: 2px 2px 10px 5px black,
-2px -2px 10px 5px black;
}
.div2 h3{
margin-left: 37%;
}
.div2 h2{
margin-left: 27%;
margin-top: -5%;
}
.div2 p{
padding: 5px;
text-align: center;
color: grey;
}
.div2 .footer{
height: 12%;
width: 290px;
margin-top: 9%;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background-color: orangered;
color: aliceblue;
}
.div3{
height: 480px;
width: 270px;
border-radius: 10px;
margin-left: 63%;
margin-top: -32%;
background-color: white;
box-shadow: 2px 2px 10px 5px black,
-2px -2px 10px 5px black;
}
.div3 h3{
margin-left: 35%;
}
.div3 h2{
margin-left: 25%;
margin-top: -5%;
}
.div3 p{
padding: 5px;
text-align: center;
color: grey;
}
.div3 .footer{
height: 12%;
width: 270px;
margin-top: 9%;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background-color: green;
color: aliceblue;
}
</style>
</head>
<body>
<div id="main">
<div class="div1">
<img src="https://images.pexels.com/photos/462331/pexels-photo-462331.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
<h3 style="color:rgb(165, 49, 84)">Lorem</h3>
<h2>Post One</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam error, aliquid officiis beatae aspernatur in itaque sed odio rem vero .
</p>
<div class="footer">
<span style="font-size:25px; padding:20px">4</span>
<span style="font-size:30px; padding:25px">5423</span>
<span style="font-size:25px; padding-left:30px">32</span>
</div>
</div>
<div class="div2">
<img src="https://images.pexels.com/photos/1470405/pexels-photo-1470405.jpeg?auto=compress&cs=tinysrgb&w=600" style="width: 291px; height:205px;">
<h3 style="color: orangered;">Lorem</h3>
<h2>Post Two</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam error, aliquid officiis beatae aspernatur in itaque sed odio rem vero .
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam error, aliquid officii.
</p>
<div class="footer">
<span style="font-size:25px; padding:20px">7</span>
<span style="font-size:30px; padding-left:35px">2152</span>
<span style="font-size:25px; padding-left:49px">21</span>
</div>
</div>
<div class="div3">
<img src="https://images.pexels.com/photos/753339/pexels-photo-753339.jpeg?auto=compress&cs=tinysrgb&w=600">
<h3 style="color:green">Lorem</h3>
<h2>Post One</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam error, aliquid officiis beatae aspernatur in itaque sed odio rem vero .
</p>
<div class="footer">
<span style="font-size:25px; padding:20px;">5</span>
<span style="font-size:30px; padding-left:33px;">3421</span>
<span style="font-size:25px; padding-left:45px;">18</span>
</div>
</div>
</div>
</body>
</html>Output:
Example 2:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
CSS Properties
</title>
</head>
<style>
body{
background-color: black;
font-family: arial;
}
h2{
height: 50px;
width: 40%;
font-size: 40px;
text-align: center;
color: navy;
margin-left: 28%;
font-weight: 200;
background-color: lightgrey;
}
h1{
color: plum;
margin-top: 10%;
font-weight: 300;
font-size: 40px;
margin-left: 35%;
}
div{
position: relative;
height: 70%;
width: 25%;
margin-left: 35%;
margin-top: 5%;
border-radius: 10px ;
border: 2px solid plum;
overflow: hidden;
box-shadow: 0px 0px 10px 0px rgb(116,119,114);
}
input{
height: 48px;
width: 68%;
border-radius: 5px;
border: 1px solid plum;
background-color: rgb(2, 2, 32);
margin-left: 14%;
position: relative;
}
input::placeholder{
color: plum;
font-size: 15px;
padding: 5px;
}
button{
height: 45px;
width: 65%;
background-color: rgb(145, 20, 145);
border-radius: 10px;
font-size: 20px;
color: white;
margin-left: 14.5%;
margin-top: 3%;
position: relative;
cursor: pointer;
}
</style>
<body>
<form>
<h2>Login Form</h2>
<div>
<h1><b>LOGIN</b></h1><br><br>
<input type="text&numerical" placeholder="Username">
<br><br><br>
<input type="password" placeholder="Password"><br><br><br>
<button>LOGIN</button>
</div>
</form>
</body>
</html>Output:
Example 3:
<!DOCTYPE html>
<html lang="en">
<head>
<title>animated boxes</title>
<style>
body{
background-color: black;
}
.div1{
height: 100px;
width: 100px;
border: 2px solid yellowgreen;
background-color: yellowgreen;
border-radius: 10px;
margin-left: 43%;
position: relative;
animation: animate1 3s linear;
animation-fill-mode: forwards;
}
@keyframes animate1 {
0%{
top: 0px; left: 0px;
}
50%{
top: 35%; left: 0px;
}
100%{
top: -0.2%; left: 0px;
}
}
.div2{
height: 100px;
width: 100px;
border: 2px solid red;
background-color: red;
border-radius: 10px;
margin-top: 10%;
position: relative;
animation: animate2 3s linear ;
animation-fill-mode: forwards;
}
@keyframes animate2{
0%{
top: 0px; left: 0px;
}
50%{
top: 0px; left: 43%;
}
100%{
top: 0px; left: -0.2%;
}
}
.div3{
height: 100px;
width: 100px;
border: 2px solid orange;
background-color: orange;
border-radius: 10px;
margin-left: 92%;
margin-top: -8%;
position: relative;
animation: animate3 3s linear ;
animation-fill-mode: forwards;
}
@keyframes animate3{
0%{
top: 0px; left: 0px;
}
50%{
top: 0px; left: -47%;
}
100%{
top: 0px; left: 1%;
}
}
.div4{
height: 100px;
width: 100px;
border: 2px solid yellow;
background-color: yellow;
border-radius: 10px;
margin-top: 17%;
margin-left: 44%;
position: relative;
animation: animate4 3s linear;
animation-fill-mode: forwards;
}
@keyframes animate4 {
0%{
top: 0px; left: 0px;
}
50%{
top: -48%; left: 0px;
}
100%{
top:0.2%; left: 0px;
}
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>
</html>Output:
Explanation:
- Every box has a class (.div1,.div2,.div3,.div4) that defines its size, border, background color, and animation.
- Every box has a unique animation that is defined with @keyframes.
Four animation boxes that shift in different directions against a black backdrop make an eye-catching webpage when created using this code. An engaging visual experience is offered by the distinct colors and animations that each box has to offer.
Advantages of CSS Properties
CSS Properties have several benefits:
- Dividing Content and Design: Makes changes and maintenance easier.
- Consistency: Makes ensuring that different web pages have the same styles.
- Adaptive Design: Modifies designs for various screen sizes and gadgets.
- Accessibility: This makes the system more user-friendly for people with varying needs.
- Decreased Development Time: This shortens the time spent on repetitious coding and simplifies the design process.
- SEO Benefits: User experience and search engine rankings are enhanced by cleaner, more organized code.
- Adaptability and Management: Offers exact arrangement, visual appeal, and creative authority.
- Improved Load Times: Uses caching to speed up page loading.
Conclusion
To create web designs that are accessible, responsive, and consistent, CSS properties are essential. They are a vital tool in contemporary web development since they divide content from design, improve user experience, speed up load times, and simplify development.
