CSS Properties Guide with Examples
1. Text Properties
Property Description Example
color Changes text color color: red;
font-size Sets text size font-size: 20px;
font-family Sets font style font-family: Arial, sans-serif;
font-weight Sets text thickness font-weight: bold;
text-align Aligns text text-align: center;
text-decoration Adds underline, overline, etc. text-decoration: underline;
line-height Space between lines line-height: 1.5;
letter-spacing Space between letters letter-spacing: 2px;
Example Code:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
font-size: 18px;
font-family: Arial, sans-serif;
font-weight: bold;
text-align: center;
text-decoration: underline;
}
</style>
</head>
<body>
<p>Hello Students!</p>
</body>
</html>
2. Background Properties
Property Description Example
background-color Sets background color background-color: yellow;
background-image Adds image as background background-image: url('[Link]');
background-size Controls image size background-size: cover;
background-repeat Repeat image or not background-repeat: no-repeat;
background-position Position of image background-position: center;
Example Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
background-image: url('[Link]');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<h1>Welcome</h1>
</body>
</html>
3. Box Model Properties
Property Description Example
width Element width width: 200px;
height Element height height: 100px;
padding Space inside border padding: 10px;
margin Space outside border margin: 20px;
border Adds border border: 2px solid black;
box-shadow Adds shadow box-shadow: 5px 5px 10px gray;
Example Code:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: lightgreen;
padding: 20px;
margin: 30px;
border: 2px solid black;
box-shadow: 5px 5px 10px gray;
}
</style>
</head>
<body>
<div>Box Model Example</div>
</body>
</html>
4. Positioning Properties
Property Description Example
position Sets position type position: absolute;
top / right / bottom / left Position offset top: 20px; left: 30px;
z-index Stack order z-index: 10;
Example Code:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
position: relative;
background: yellow;
width: 150px;
height: 100px;
}
.inner {
position: absolute;
top: 20px;
left: 30px;
background: red;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div class="box">
Parent
<div class="inner"></div>
</div>
</body>
</html>
5. Display & Layout Properties
Property Description Example
display Changes display type display: flex;
flex-direction Flexbox direction flex-direction: row;
justify-content Align items horizontally justify-content: center;
align-items Align items vertically align-items: center;
gap Space between flex/grid items gap: 10px;
grid-template-columns Grid column size grid-template-columns: 1fr 1fr;
Example Code:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.item {
background: lightcoral;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">One</div>
<div class="item">Two</div>
</div>
</body>
</html>
6. Other Useful Properties
Property Description Example
opacity Transparency level opacity: 0.5;
overflow Controls overflow overflow: hidden;
cursor Mouse cursor type cursor: pointer;
transition Animation effect transition: all 0.3s ease;
transform Rotate, scale, move elements transform: rotate(45deg);
Example Code:
<!DOCTYPE html>
<html>
<head>
<style>
button {
background: blue;
color: white;
padding: 10px;
border: none;
transition: background 0.3s ease;
}
button:hover {
background: green;
transform: scale(1.1);
}
</style>
</head>
<body>
<button>Hover Me</button>
</body>
</html>