This is a quick reference cheat sheet for understanding and writing CSS files.
CSS can be written directly in HTML using inline styles or within a <style> element inside the <head> tag (internal stylesheet).
Allows multiple rules to be defined in one place within <style> inside <head>. Better than inline, but not best practice.
<head>
<style>
p {
color: red;
font-size: 20px;
}
</style>
</head>Linking a CSS file to an HTML file using the <link> element keeps styles modular and is considered best practice.
<link href="https://www.codecademy.com/stylesheets/style.css" rel="stylesheet"><link href="./style.css" rel="stylesheet">Targets all elements in the document.
* {
font-family: Verdana;
}Targets all elements of a specific type (e.g., all <p> tags).
p {
font-family: Verdana;
}Targets elements with a specific class using . notation. Overrides tag selectors.
.brand {
font-weight: bold;
}Targets an element with a specific ID using #. IDs must be unique and override class selectors.
#large-title {
font-size: 2rem;
}Targets elements with a specific attribute or attribute value.
[href] {
color: magenta;
}
img[src*='winter'] {
color: lightgreen;
}
img[src*='summer'] {
color: blue;
}Combining selectors increases specificity. This targets only elements matching all conditions.
h1.special {
font-weight: bold;
}This targets only <h1> elements with class special. A <p class="special"> would not be affected.
Apply the same rules to multiple selectors separated by commas.
h1, .menu {
font-family: Georgia;
}Targets elements nested inside others. The space indicates ancestry, not direct parent-child.
.main-list li {
list-style: square;
}This selects all <li> elements inside any element with class main-list.
Targets element states (e.g., hover, visited, focus, active).
a {
color: blue;
cursor: pointer;
}
a:hover {
color: orange;
}Allows styling of specific parts of an element (e.g., ::before, ::after).
.breadcrumb li+li::before {
padding: 10px;
content: ">";
}li+li selects adjacent siblings. ::before inserts content before the element.
Specificity determines which CSS rule takes precedence when multiple selectors target the same element. The order of specificity, from lowest to highest, is: type selector (<h1>), class selector (.class), and ID selector (#id).
h1 {
color: red;
}
.headline {
color: firebrick;
}In this example, the class .headline overrides the type h1 selector due to higher specificity.
An element can have multiple classes. If styles overlap, the most specific or the latest defined rule is applied.
.red {
color: red;
}
.blue {
color: blue;
}If both classes are applied, the one defined last or more specifically wins. In this case, blue is applied.
Every element is a rectangular box composed of content, padding, border, and margin. The default model is content-box.
* {
box-sizing: border-box;
}Using border-box includes padding and borders in width and height calculations.
These properties define the visual edges and corners of an element's box.
.box {
border: 3px solid white;
border-radius: 5px;
}
.circle {
border-radius: 50%;
}Space between content and border. Can accept 1 to 4 values.
padding: 5px 10px 20px; /* top, left/right, bottom */
padding: 5px 10px; /* top/bottom, left/right */Margin defines the space outside an element’s border. It can also be used to center block elements horizontally.
div {
width: 300px;
margin: 0 auto;
}
Restrict box resizing by defining min/max width or height.
min-width: 300px;
max-width: 600px;
min-height: 150px;
max-height: 300px;Controls how excess content is handled when it exceeds box limits.
Overflow works only when the element has a defined height or max-height.
Browsers apply default styles (user agent stylesheets). Reset them for consistency.
* {
margin: 0;
padding: 0;
}Controls whether an element is visible, hidden, or collapsed (for table elements).
To remove the element and its space entirely, use display: none;.
The CSS box model consists of four main parts:
.box {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 30px;
box-sizing: border-box;
}
+---------------------------+ ← margin (30px)
| +-------------------+ | ← border (5px)
| | +-----------+ | | ← padding (20px)
| | | content | | | ← width (200px)
| | +-----------+ | |
| +-------------------+ |
+---------------------------+content-box is the default box-sizing model in CSS. The declared width and height apply only to the content. Padding and border are added outside these dimensions, increasing the total size of the element.
div {
box-sizing: content-box; /* default */
width: 200px;
padding: 20px;
border: 2px solid black;
}
/* Final rendered width: 200 + 40 + 4 = 244px */To include padding and borders inside the element's total size, use box-sizing: border-box; instead.
Controls how an element is placed within the document flow.
.green-box {
position: relative;
top: 50px;
left: 120px;
}Controls the stack order of elements when overlapping. Only applies to positioned elements.
.element {
position: absolute;
z-index: 10;
}Defines how an element is displayed in the layout.
h1 {
display: inline;
}Float removes an element from normal flow and aligns it to the left or right. Clear prevents layout issues caused by floats.
div {
float: left;
}
div.special {
clear: left;
}You can include hosted fonts from services like Google Fonts or Adobe Fonts by adding a <link> tag inside the <head> of your HTML document.
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap"
rel="stylesheet">
</head>To use downloaded fonts, place the font files in your project folder and define a @font-face rule in your CSS.
Recommended file formats (for compatibility):
Place font files in a fonts folder, and define the rule at the top of your CSS file:
@font-face {
font-family: 'MyParagraphFont';
src: url('fonts/Roboto.woff2') format('woff2'),
url('fonts/Roboto.woff') format('woff'),
url('fonts/Roboto.ttf') format('truetype');
}The browser loads the first supported format. Font name can be custom and is used in font-family throughout the site.
More info on usage and priority: CSS-Tricks – Using @font-face
Font stacks allow you to define fallbacks in case the preferred font isn’t available on the client’s device.
h1 {
font-family: Caslon, Georgia, 'Times New Roman', serif;
}Web-safe fonts are typically used as the last fallback option.
Serif fonts have small decorative strokes at the ends of letters. Common examples: Times New Roman, Georgia, Caslon.
Sans-serif fonts are cleaner, without strokes. Common examples: Roboto, Arial, Helvetica.
When choosing fonts, it's good practice to match the primary font with a similar fallback of the same type (serif or sans-serif) for consistent appearance.
Specifies how bold or light text appears. Can be keyword-based or numeric (100–900).
Check which weights are available for the font you’re using.
.left-section {
font-weight: 700;
}
.right-section {
font-weight: bold;
}HSL stands for Hue, Saturation, and Lightness. Syntax: hsl(hue, saturation%, lightness%)
HSL is useful for adjusting color shades easily without affecting other values, unlike RGB.
color: hsl(120, 60%, 70%);
HSLA adds a fourth value: alpha (opacity) to the HSL model. Syntax: hsla(h, s%, l%, a)
Alpha is a value between 0 (transparent) and 1 (opaque).
color: hsla(34, 100%, 50%, 0.1);You can also use the keyword transparent for full transparency.
RGBA is the RGB color model with an added alpha (opacity) channel.
The first three values define red, green, and blue. The fourth defines transparency.
color: rgba(234, 45, 98, 0.33);Use relative units like em, rem, and % to make layouts adapt to screen size.
When used for padding and margin, percentages are calculated from the parent's width.
Use min-width, max-width, min-height, and max-height to limit element size regardless of screen.
Use max-width: 100% and height: auto to scale media responsively inside containers.
.container img {
max-width: 100%;
height: auto;
display: block;
}Use background-size: cover to scale background images responsively while maintaining proportion.
body {
background-image: url('#');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}Add this tag inside <head> to scale content correctly on mobile devices.
<meta name="viewport" content="width=device-width, initial-scale=1">Apply CSS conditionally based on screen size, resolution, or orientation.
@media only screen and (max-width: 480px) {
body {
font-size: 12px;
}
}Set breakpoints based on natural layout breaking points rather than device sizes.
Use min-resolution and max-resolution to apply styles for specific screen DPIs.
@media only screen and (min-resolution: 300dpi) {
/* High-res styles */
}@media only screen and (min-width: 480px), (orientation: landscape) {
/* Responsive styles */
}Viewport units allow elements to scale based on the size of the visible browser window.
.hero {
width: 100vw;
height: 100vh;
font-size: 5vmin;
}To define a flex container, set display: flex or display: inline-flex. All direct children become flex items.
.container {
display: flex;
}Flex container
Aligns items along the main axis (horizontal by default).
/* justify-content: space-between */
[Item1] [Item2] [Item3]
/* justify-content: space-around */
[Item1] [Item2] [Item3]
/* justify-content: space-evenly */
[Item1] [Item2] [Item3]Flex container
Aligns items along the cross axis (vertical by default).
/* align-items: center */
| |
| Item1 |
| Item2 |
| Item3 |
| |Flex container
Controls how much a flex item grows relative to others.
.item1 { flex-grow: 1; }
.item2 { flex-grow: 2; }
/* Available space is distributed:
[Item1] [Item2 Item2] */Flex item
Defines how much a flex item shrinks when space is tight.
.item1 { flex-shrink: 1; }
.item2 { flex-shrink: 2; }
/* Item2 will shrink twice as fast as Item1 when necessary */Flex item
Defines the initial main size of a flex item before grow/shrink.
.item {
flex-basis: 200px;
}Flex item
Shorthand for flex-grow, flex-shrink, and flex-basis.
.item {
flex: 1 1 100px;
}
/* = flex-grow: 1, flex-shrink: 1, flex-basis: 100px */Flex item
Specifies whether items wrap onto multiple lines.
Flex container
Aligns rows when there is extra vertical space.
Flex container
Defines the main axis direction in the flex container.
Flex container
Shorthand for flex-direction and flex-wrap.
.container {
flex-flow: column wrap;
}Flex container
Flex containers can be nested inside other flex items for complex layouts.
Specifies which CSS property (or properties) should animate when changed. Accepts one or more comma-separated property names, or all to apply the same transition to every animatable property.
/* Animate only background-color and font-size */
a {
transition-property: background-color, font-size;
}
/* Animate all animatable properties */
div {
transition-property: all;
}See the full list of animatable properties on MDN.
Sets how long the transition takes to complete. Required for a transition to occur. Units can be in s or ms.
/* Background changes in 1.5 seconds */
button {
transition-property: background-color;
transition-duration: 1.5s;
}Controls how intermediate values are calculated for a transition. Common values:
The full list of values is available at MDN.
/* Smooth ease-out transition */
.box {
transition: transform 1s ease-out;
}
/* Constant speed */
p {
transition: color 1s linear;
}Delays the start of the transition by a specific time (e.g. 300ms, 1s).
Default: 0s.
/* Wait 0.5s, then fade in */
.fade-in {
opacity: 0;
transition: opacity 1s ease-in;
transition-delay: 0.5s;
}Combines all properties in one line:
transition: property duration timing-function delay;
Note: if delay is used, duration must be included first.
/* One transition with full declaration */
a {
transition: color 1s ease-out 0.2s;
}
/* Multiple transitions */
div {
transition: background-color 1s, transform 0.5s ease-in-out;
}You can define multiple transitions for different properties, each with its own duration, timing, and delay. Separate each group with a comma.
/* Each property has its own timing settings */
.button {
transition:
color 0.3s ease-in,
background-color 0.5s ease-out 0.2s,
transform 0.8s linear;
}
.button:hover {
color: white;
background-color: navy;
transform: translateY(-3px);
}Applies the same transition timing to all animatable properties of an element. Useful when you want consistency across several property changes.
/* All properties will transition with the same speed/timing */
.card {
transition: all 0.5s ease-in-out;
}
.card:hover {
background-color: lightblue;
transform: scale(1.05);
border-radius: 10px;
}This effect makes an element smoothly slide down from above and fade into view when hovered. It uses top and opacity transitions together.
.element {
position: fixed; /* or absolute, depending on layout */
top: -100%; /* Start above the viewport */
opacity: 0; /* Invisible initially */
transition: top 0.5s ease-out, opacity 0.3s linear;
}
.element:hover {
top: 0; /* Slide into view */
opacity: 1; /* Fade in */
}To set up a grid, use a grid container and grid items. Set display: grid or display: inline-grid on the parent container.
.container {
display: grid; /* or inline-grid */
}Grid Container
Define columns with grid-template-columns and rows with grid-template-rows.
.grid {
display: grid;
grid-template-columns: 100px 200px;
grid-template-rows: 100px 50% 20px;
}Grid Container
Explicit Grid
Combines row and column definitions in one shorthand property.
.grid {
grid-template: 200px 300px / 20% 10% 70%;
}Grid Container
Explicit Grid
The fr unit divides remaining space among tracks.
.grid {
grid-template-columns: 1fr 60px 1fr;
}Grid Container
Explicit Grid
Repeats column or row patterns.
.grid {
grid-template-columns: repeat(2, 20px 50px);
}Grid Container
Explicit Grid
Sets a min and max size for grid tracks.
.grid {
grid-template-columns: 100px minmax(100px, 500px) 100px;
}Grid Container
Explicit Grid
Sets space between grid items using gap, or separately for rows and columns.
.grid {
gap: 20px 10px; /* row-gap column-gap */
}Grid Container
Use grid-row and grid-column to make items span multiple tracks.
.item {
grid-row: 1 / 3;
grid-column: 2 / span 2;
}Grid Item
Shorthand for grid-row-start / column-start / row-end / column-end.
.item {
grid-area: 2 / 3 / 4 / span 5;
}Grid Item
Defines named areas of a grid layout and assigns items to them via grid-area.
.container {
display: grid;
grid-template-areas: "header header"
"nav nav"
"info services"
"footer footer";
grid-template-columns: 1fr 3fr;
}Grid Container
Explicit Grid
When content overflows the explicit grid, new rows/columns are created automatically. Use grid-auto-rows and grid-auto-columns to control their size.
body {
display: grid;
grid: repeat(2, 100px) / repeat(2, 150px);
grid-auto-rows: 50px;
}Grid Container
Implicit Grid
Controls how auto-placed items are inserted: by row, column, or using dense packing.
body {
display: grid;
gap: 5px;
grid: repeat(2, 100px) / repeat(2, 150px);
grid-auto-rows: 45px;
grid-auto-columns: 65px;
grid-auto-flow: column;
}Grid Container
Implicit Grid
Common image file formats and their usage:
Favicons are small icons shown in the browser tab. You can generate one using favicon-generator.org.
Once created, save it in your project and link it in the <head>:
<link rel="icon" href="./<favicon-name>.ico" type="image/x-icon">Use Pixlr to edit and crop images online quickly and for free.
To convert simple images to scalable SVG format, use online-convert.
SVG files are ideal for high-resolution scaling and optimized performance.