Selector Example Explanation
Element p { color: blue; }
Selects all <p> (paragraph) tags. It means:
Selector “Make all paragraphs blue.”
.box { border: 1px solid; Targets all elements with class="box".
Class Selector }
Classes can be reused many times.
Targets one unique element with
#header { background:
ID Selector pink; } id="header". IDs should be used only
once.
Universal * { margin: 0; }
Selects every element on the page. Often
Selector used to reset all margins.
Group h1, h2, h3 { color: navy; You can style multiple elements at once by
Selector } separating them with commas.
Descendant div p { color: red; } Targets <p> tags inside a <div>.
Selector
Targets <p> tags that are direct children of a
Child Selector div > p { color: green; }
<div>.
Styles elements when they’re in a specific
Pseudo-class a:hover { color: red; } state — for example, when you hover your
mouse over a link.
Pseudo- p::first-letter { font- Styles a part of an element — here, the first
element size: 20px; } letter of a paragraph.
Attribute input[type="text"] Styles elements that have a certain attribute
Selector { border: 1px solid; } — here, all text input boxes.
Property Example Explanation
color color: red; Changes the color of the text.
Controls how large or small the text appears. You
font-size font-size: 20px;
can use px, em, or %.
font-family: Arial, Defines which font style to use (e.g., Arial, Times
font-family sans-serif; New Roman).
Makes text thicker (bold). You can also use
font-weight font-weight: bold;
numbers like 400 (normal) or 700 (bold).
Aligns text — left, right, center, or justify (spreads
text-align text-align: center;
it evenly).
text- text-decoration: Adds decoration like underline, overline, or line-
decoration underline; through.
Sets space between lines in a paragraph — helpful
line-height line-height: 1.5;
for readability.
letter- letter-spacing: 2px; Adds space between individual letters.
spacing
Property Example Explanation
margin margin: 10px; Adds space outside the element — separates it
Property Example Explanation
from other elements.
Adds space inside the element — between the text
padding padding: 15px;
and the border.
border: 2px solid Adds a line around the element. You can set
border black; width, style, and color.
border- border-radius: 10px; Rounds the corners of an element’s border.
radius
width width: 300px; Sets how wide an element is.
height height: 200px; Sets how tall an element is.
box-shadow: 2px 2px Adds a shadow behind the element to give a 3D
box-shadow 5px gray;
effect.
Property Example Explanation
background- background-color: Fills the element’s background with a
color lightblue; color.
background- background-image:
url('[Link]'); Adds an image as the background.
image
background- background-repeat: no- Controls whether the image repeats.
repeat repeat; repeat-x, repeat-y, or no-repeat.
background- background-size: cover;
Adjusts image size: cover fills the whole
size area; contain fits it completely.
Controls transparency. 1 = fully visible; 0
opacity opacity: 0.8;
= fully transparent.
Property Example Explanation
Decides how an element behaves — block (full line),
display display: flex;
inline (side-by-side), flex, or grid.
position: Controls how the element is positioned. Options:
position absolute; static, relative, absolute, fixed, sticky.
top, right, top: 10px;
Used with position to move the element from the edge of
bottom, left the container.
Pushes the element to the left or right side of its
float float: right;
container.
clear clear: both; Stops elements from floating next to each other.
Controls which element appears on top when they
z-index z-index: 5;
overlap. Higher number = front.
Property Example Explanation
Enables a flex container. Children inside it
display: flex; —
become “flex items.”
Property Example Explanation
Aligns items horizontally (left, center,
justify-content justify-content: center;
space-between, etc.).
align-items align-items: center; Aligns items vertically.
Sets direction of items — row (horizontal)
flex-direction flex-direction: row;
or column (vertical).
gap gap: 20px; Adds space between flex or grid items.
display: grid; — Enables a grid layout (rows and columns).
grid-template- grid-template-columns: Defines how many columns and their sizes
columns 1fr 1fr 1fr; (fr = fraction of space).
Property Example Explanation
Controls how an image fits inside its box (cover,
object-fit object-fit: cover;
contain, fill).
object- object-position:
center; Controls where the image is placed inside the box.
position
Changes the mouse cursor when hovering (e.g.,
cursor cursor: pointer;
pointer, crosshair, text).
Property Example Explanation
transition transition: all 0.3s ease; Makes style changes smooth over time.
Moves, rotates, or resizes an element.
transform transform: scale(1.2); Examples: rotate(), translate(),
scale().
Runs an animation defined in
animation animation: fadeIn 2s;
@keyframes.
@keyframes fadeIn
Defines what happens during an
@keyframes { from{opacity:0;}
to{opacity:1;} } animation — step by step.
Property Example Explanation
@media (max-width:600px) Applies styles only when the screen is
@media { body{font-size:14px;} } smaller or larger than a certain size.
max-width / max-width: 100%;
Limits how wide or narrow an element
min-width can get. Used in responsive designs.