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 |
