CheatSheetsHero

Catalog / CSS Cheatsheet

CSS Cheatsheet

A comprehensive CSS cheat sheet covering selectors, properties, units, and more, with practical examples for quick reference.

Selectors & Specificity

Basic Selectors

* (Universal)

Selects all elements.

* { margin: 0; padding: 0; }

element (Type)

Selects all elements of the given type.

div { border: 1px solid black; }

.class (Class)

Selects all elements with the given class.

.highlight { background-color: yellow; }

#id (ID)

Selects the element with the given ID. IDs should be unique within a document.

#main-header { font-size: 2em; }

Combinators

A B (Descendant)

Selects all B elements that are descendants of A.

article p { line-height: 1.6; }

A > B (Child)

Selects all B elements that are direct children of A.

header > nav { display: flex; }

A + B (Adjacent Sibling)

Selects the first B element that immediately follows A.

h1 + p { margin-top: 1em; }

A ~ B (General Sibling)

Selects all B elements that are siblings of A (A and B share the same parent).

ul ~ p { font-style: italic; }

Attribute Selectors

[attribute]

Selects elements with the specified attribute.

a[target] { text-decoration: none; }

[attribute=value]

Selects elements with the specified attribute and value.

input[type="text"] { border: 1px solid gray; }

[attribute*=value]

Selects elements with the specified attribute containing the value.

a[href*="example"] { color: blue; }

[attribute^=value]

Selects elements with the specified attribute starting with the value.

img[src^="images/thumbnails"] { width: 100px; }

[attribute$=value]

Selects elements with the specified attribute ending with the value.

a[href$=".pdf"] { font-weight: bold; }

Properties

Text Properties

color

Sets the color of the text.

p { color: #333; }

font-family

Specifies the font family for the text.

h1 { font-family: Arial, sans-serif; }

font-size

Sets the size of the text.

body { font-size: 16px; }

line-height

Sets the line height of the text.

p { line-height: 1.5; }

text-align

Specifies the horizontal alignment of the text.

h2 { text-align: center; }

Box Model Properties

margin

Sets the margin around an element. Can be one value (all sides), two values (top/bottom, left/right), or four values (top, right, bottom, left).

div { margin: 10px 20px; }

padding

Sets the padding inside an element. Can be one, two, or four values like margin.

button { padding: 5px 10px; }

border

Sets the border around an element. Shorthand for border-width, border-style, and border-color.

img { border: 2px solid black; }

width

Sets the width of an element.

.container { width: 960px; }

height

Sets the height of an element.

.header { height: 100px; }

Background Properties

background-color

Sets the background color of an element.

body { background-color: #f0f0f0; }

background-image

Sets the background image of an element.

.hero { background-image: url("image.jpg"); }

background-repeat

Specifies how the background image is repeated.

.logo { background-repeat: no-repeat; }

background-position

Specifies the position of the background image.

.hero { background-position: center; }

Units & Values

Absolute Length Units

px (Pixels)

Relative to the viewing device.

font-size: 16px;

pt (Points)

1pt is equal to 1/72 of an inch.

font-size: 12pt;

pc (Picas)

1pc is equal to 12 points.

margin-bottom: 1pc;

in (Inches)

Specifies length in inches.

width: 1in;

cm (Centimeters)

Specifies length in centimeters.

height: 2.5cm;

mm (Millimeters)

Specifies length in millimeters.

border-width: 1mm;

Relative Length Units

em

Relative to the font size of the element. E.g., if the element’s font size is 16px, then 1em is 16px.

font-size: 1.2em;

rem

Relative to the font size of the root element (html).

html { font-size: 16px; }
h1 { font-size: 2rem; } /* 32px */

vh

Relative to 1% of the viewport’s height.

height: 100vh;

vw

Relative to 1% of the viewport’s width.

width: 50vw;

%

Percentage of the parent element.

width: 50%;

Color Values

Hexadecimal

Using hex codes (e.g., #RRGGBB).

color: #FF0000; /* Red */

RGB

Using rgb() function (e.g., rgb(red, green, blue)).

color: rgb(255, 0, 0); /* Red */

RGBA

Using rgba() function to specify opacity (e.g., rgba(red, green, blue, alpha)).

color: rgba(255, 0, 0, 0.5); /* Semi-transparent Red */

HSL

Using hsl() function (e.g., hsl(hue, saturation, lightness)).

color: hsl(0, 100%, 50%); /* Red */

HSLA

Using hsla() function to specify opacity (e.g., hsla(hue, saturation, lightness, alpha)).

color: hsla(0, 100%, 50%, 0.5); /* Semi-transparent Red */

Layout

Display Property

display: block

The element behaves like a block-level element; it takes up the full width available and starts a new line.

div { display: block; }

display: inline

The element behaves like an inline element; it only takes up as much width as necessary.

span { display: inline; }

display: inline-block

The element is formatted as an inline element, but you can set a width and height.

button { display: inline-block; width: 100px; }

display: flex

The element is displayed as a block-level flex container.

.container { display: flex; }

display: grid

The element is displayed as a block-level grid container.

.grid-container { display: grid; }

display: none

The element is completely removed from the document.

.hidden { display: none; }

Flexbox Properties

flex-direction

Specifies the direction of the flexible items inside a flex container.

.container { flex-direction: row; }

justify-content

Aligns the flexible items when the items do not use all available space on the main axis.

.container { justify-content: center; }

align-items

Aligns the flexible items when the items do not use all available space on the cross axis.

.container { align-items: center; }

flex

A shorthand property for flex-grow, flex-shrink, and flex-basis.

.item { flex: 1; }

Grid Layout Properties

grid-template-columns

Defines the number and size of columns in a grid layout.

.grid-container { grid-template-columns: auto auto auto; }

grid-template-rows

Defines the number and size of rows in a grid layout.

.grid-container { grid-template-rows: 100px 200px; }

grid-gap

Specifies the size of the gap between rows and columns in a grid layout.

.grid-container { grid-gap: 10px; }

grid-column

Specifies a grid item’s size and location in a grid layout.

.item { grid-column: 1 / 3; }

grid-row

Specifies a grid item’s size and location in a grid layout.

.item { grid-row: 1 / 2; }
Download PDF