CSS Reference
A practical guide to the most commonly used CSS properties, selectors, and layout techniques for building modern websites.
CSS Selectors
.class
Targets every element that uses the specified class.
.trail-card { border-radius: 16px; }#id
Targets the element with the matching ID.
#hero { height: 85vh; }tag
Applies styles to every matching HTML element.
img { object-fit: cover; }.parent .child
Selects matching elements that appear inside another element.
.sidebar a { color: #2a7ae0; }:hover
Applies styles while the pointer is over an element.
.recipe-card:hover { transform: scale(1.03); }:focus
Styles an element after it receives keyboard or input focus.
input:focus { box-shadow: 0 0 0 3px #a8d1ff; }::before / ::after
Inserts generated content before or after an element.
.badge::after { content: "★"; color: gold; }[attribute]
Matches elements based on their HTML attributes.
input[type="checkbox"] { accent-color: #e91e63; }Text & Fonts
color
Sets the color used to display text.
color: #2c5f2d;font-family
Specifies one or more preferred fonts.
font-family: "Georgia", serif;font-size
Controls the size of text.
font-size: 1.35rem;font-weight
Controls how bold or light text appears.
font-weight: 600;line-height
Adjusts vertical spacing between lines of text.
line-height: 1.7;text-align
Aligns text within its container.
text-align: justify;text-decoration
Adds or removes decorations like underlines.
text-decoration: underline wavy #ff6b6b;text-transform
Changes the capitalization of displayed text.
text-transform: capitalize;text-shadow
Adds a shadow effect to text.
text-shadow: 3px 3px 6px rgba(0,0,0,0.4);Colors & Backgrounds
background-color
Fills an element with a single background color.
background-color: #fffaf0;background-image
Applies an image or gradient behind the content.
background-image: linear-gradient(135deg, #667eea, #764ba2);background-size
Controls how a background image is resized.
background-size: contain;opacity
Controls the transparency level of an element.
opacity: 0.92;color / rgb / hsl
Modern ways to define colors.
color: rgb(245 158 11);
color: hsl(142 76% 36%);Box Model & Spacing
margin
Creates space outside an element.
margin: 2.5rem auto;padding
Adds space between the content and the border.
padding: 1.5rem 2.5rem;box-sizing
Controls whether padding and borders are included in an element’s size.
box-sizing: border-box;gap
Sets spacing between items in flex or grid layouts.
gap: 2.25rem;width / height
Defines the size of an element.
width: 100%;
max-width: 980px;Borders & Effects
border
Adds a border around an element.
border: 3px solid #4ade80;border-radius
Rounds the corners of an element.
border-radius: 50%;box-shadow
Adds a shadow around an element.
box-shadow: 0 15px 35px rgba(0,0,0,0.12);cursor
Changes the pointer shown when hovering over an element.
cursor: grab;Layout (Flexbox & Grid)
display: flex
Turns an element into a flexible layout container.
display: flex;justify-content / align-items
Controls alignment of items along the main and cross axes.
justify-content: space-between;
align-items: center;display: grid
Enables a grid-based layout for child elements.
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));display: block / inline / none
Controls how an element is displayed on the page.
display: none; /* hide element */Positioning
position
Determines how an element is positioned within the layout.
position: sticky;
position: fixed;top / right / bottom / left
Moves a positioned element from its default location.
top: 20px;
right: 30px;z-index
Controls which overlapping elements appear in front.
z-index: 999;overflow
Determines what happens when content exceeds its container.
overflow: scroll;
overflow-x: hidden;Transitions & Animation
transition
Animates changes between CSS property values.
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);transform
Moves, rotates, scales, or skews an element.
transform: rotate(8deg) scale(1.08);@keyframes
Creates reusable animation sequences.
@keyframes slideUp {
from { transform: translateY(40px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}Responsive & Variables
@media
Applies styles only when specific screen conditions are met.
@media (max-width: 640px) {
.grid { grid-template-columns: 1fr; }
}--var
Stores reusable values that can be referenced throughout your styles.
:root {
--accent: #f43f5e;
}
background: var(--accent);list-style
Changes the appearance and position of list bullets or numbers.
list-style: square inside;