Turning Learners into Developers
What is CSS properties?
CSS Properties are the individual style rules used in CSS to control how HTML elements look and behave on a webpage, such as color, size, layout, spacing, and animations (e.g., color, margin, font-size). Cascading in CSS means that when multiple style rules apply to the same element, CSS follows a priority order—based on specificity, importance, and source order—to decide which style is applied.
- Layout & Box Model
|
Property |
Example |
Description |
|---|---|---|
|
width |
width: 200px; |
Sets the element width |
|
height |
height: 100px; |
Sets the element height |
|
max-width |
max-width: 100%; |
Maximum width of element |
|
min-width |
min-width: 100px; |
Minimum width |
|
max-height |
max-height: 500px; |
Maximum height |
|
min-height |
min-height: 50px; |
Minimum height |
|
margin |
margin: 10px; |
Space outside element |
|
margin-top |
margin-top: 5px; |
Top margin |
|
margin-right |
margin-right: 10px; |
Right margin |
|
margin-bottom |
margin-bottom: 5px; |
Bottom margin |
|
margin-left |
margin-left: 10px; |
Left margin |
|
padding |
padding: 10px; |
Space inside element |
|
padding-top |
padding-top: 5px; |
Top padding |
|
padding-right |
padding-right: 10px; |
Right padding |
|
padding-bottom |
padding-bottom: 5px; |
Bottom padding |
|
padding-left |
padding-left: 10px; |
Left padding |
|
border |
border: 1px solid black; |
Border shorthand |
|
border-width |
border-width: 2px; |
Border thickness |
|
border-style |
border-style: dashed; |
Border style |
|
border-color |
border-color: red; |
Border color |
|
border-radius |
border-radius: 10px; |
Rounded corners |
|
box-sizing |
box-sizing: border-box; |
Includes padding/border in width/height |
- Positioning & Display
|
Property |
Example |
Description |
|---|---|---|
|
display |
display: flex; |
Controls element display type |
|
position |
position: absolute; |
Specifies positioning method |
|
top |
top: 10px; |
Distance from top |
|
right |
right: 10px; |
Distance from right |
|
bottom |
bottom: 10px; |
Distance from bottom |
|
left |
left: 10px; |
Distance from left |
|
float |
float: left; |
Float element left/right |
|
clear |
clear: both; |
Prevents floating overlap |
|
z-index |
z-index: 10; |
Stack order of element |
|
overflow |
overflow: hidden; |
Handle overflow content |
- Typography
|
Property |
Example |
Description |
|---|---|---|
|
color |
color: blue; |
Text color |
|
font-size |
font-size: 16px; |
Font size |
|
font-family |
font-family: Arial, sans-serif; |
Font type |
|
font-weight |
font-weight: bold; |
Thickness of font |
|
font-style |
font-style: italic; |
Italic style |
|
text-align |
text-align: center; |
Horizontal alignment |
|
text-decoration |
text-decoration: underline; |
Underline, line-through |
|
text-transform |
text-transform: uppercase; |
Uppercase, lowercase, capitalize |
|
line-height |
line-height: 1.5; |
Space between lines |
|
letter-spacing |
letter-spacing: 2px; |
Space between letters |
|
word-spacing |
word-spacing: 5px; |
Space between words |
|
white-space |
white-space: nowrap; |
Control text wrapping |
- Backgrounds
|
Property |
Example |
Description |
|---|---|---|
|
background-color |
background-color: #f0f0f0; |
Background color |
|
background-image |
background-image: url('image.jpg'); |
Set background image |
|
background-repeat |
background-repeat: no-repeat; |
Repeat behavior |
|
background-size |
background-size: cover; |
Size of background image |
|
background-size |
background-size: cover; |
Size of background image |
|
background-position |
background-position: center; |
Image position |
|
background-attachment |
background-attachment: fixed; |
Scroll or fixed |
- Flexbox
|
Property |
Example |
Description |
|---|---|---|
|
display: flex |
div style="display:flex;">...</div> |
Enables flex container |
|
flex-direction |
flex-direction: row; |
Row or column layout |
|
justify-content |
justify-content: center; |
Align items horizontally |
|
align-items |
align-items: center; |
Align items vertically |
|
flex-wrap |
flex-wrap: wrap; |
Wrap items to next line |
|
gap |
gap: 10px; |
Space between flex items |
- Grid
|
Property |
Example |
Description |
|---|---|---|
|
display |
display: grid; |
Enables grid container |
|
grid-template-columns |
grid-template-columns: 1fr 2fr; |
Column sizes |
|
grid-template-rows |
grid-template-rows: 100px 200px; |
Row sizes |
|
grid-gap |
gap: 10px; |
Gap between cells |
|
justify-items |
justify-items: center; |
Horizontal alignment of items |
|
align-items |
align-items: center; |
Vertical alignment of items |
- Transitions & Animations
|
Property |
Example |
Description |
|---|---|---|
|
transition |
transition: all 0.3s ease; |
Smooth property change |
|
transition-property |
transition-property: background-color; |
Property to transition |
|
transition-duration |
transition-duration: 0.5s; |
Duration of transition |
|
animation |
animation: fadeIn 2s ease-in; |
Apply CSS animation |
|
@keyframes |
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} } |
Define animation frames |
- Others / Utilities
|
Property |
Example |
Description |
|---|---|---|
|
cursor |
cursor: pointer; |
Mouse cursor style |
|
opacity |
opacity: 0.5; |
Element transparency |
|
visibility |
visibility: hidden; |
|
|
clip-path |
clip-path: circle(50%); |
Crop shape of element |
|
box-shadow |
box-shadow: 2px 2px 5px gray; |
Add shadow effect |
|
transition |
transition: all 0.3s; |
Smooth transition |
