Selects all elements on the page.
* {
margin: 0;}
padding: 0;
Targets all elements of a specific type.
p {
color: blue;}
border: 1px solid black;}
Targets elements with a specific class.
.highlight {
background-color: yellow;}
Targets a unique element with a specific ID.
#header {
font-size: 24px;}
Targets elements nested inside another element.
div p {
color: green;}
Targets direct child elements only.
div > p {
font-weight: bold;}
Controls background color, image, size, etc.
body {
background-color: lightblue;}
background-image: url('img.jpg');
background-size: cover;
Controls color, font-size, font-weight, alignment, etc.
p {
color: red;}
font-size: 16px;
font-weight: bold;
text-align: center;
Includes width, height, padding, border, and margin.
div {
width: 200px;}
height: 100px;
padding: 10px;
border: 2px solid black;
margin: 20px;
Defines layout behavior (block, inline, flex, grid, none).
span {
display: inline;}
display: block;}
display: flex;}
Controls element positioning (relative, absolute, fixed, sticky).
#box {
position: absolute;}
top: 50px;
left: 100px;
One-dimensional layout system for alignment and spacing.
.flex-container {
display: flex;}
justify-content: space-between;
align-items: center;
Two-dimensional layout system for rows and columns.
.grid-container {
display: grid;}
grid-template-columns: 1fr 2fr;
gap: 10px;
Applies styles when the mouse hovers over an element.
button:hover {
background-color: green;}
color: white;
Applies styles based on screen size for responsive design.
@media (max-width: 600px) {
body {
background-color: lightgray;
}
}