CSS Cheat Sheet

Basic Syntax

CSS rulesets consist of a selector and a declaration block.

selector {
  property: value;
  another-property: another-value;
}

Selectors

Selector Description Example
Element Selector Selects all HTML elements of the specified type. p { color: blue; }
ID Selector Selects the HTML element with the specified ID. #myId { background-color: yellow; }
Class Selector Selects all HTML elements with the specified class. .myClass { text-align: center; }
Attribute Selector Selects HTML elements with specified attributes or attribute values. a[href] { text-decoration: none; }
input[type="text"] { border: 1px solid black; }
Universal Selector Selects all HTML elements. * { margin: 0; }
Grouping Selector Selects all the specified HTML elements. h1, h2, p { font-family: sans-serif; }

Pseudo-classes

Pseudo-class Description Example
:hover Selects elements when you mouse over them. a:hover { color: red; }
:active Selects the active link. a:active { color: green; }
:focus Selects the element that is currently focused. input:focus { border: 2px solid blue; }
:visited Selects links that the user has visited. a:visited { color: purple; }
:first-child Selects the first child element of another element. li:first-child { font-weight: bold; }
:last-child Selects the last child element of another element. li:last-child { border-bottom: none; }
:nth-child(n) Selects the nth child element of another element. (e.g., 2, odd, even) li:nth-child(odd) { background-color: #f0f0f0; }
:first-of-type Selects the first element of its type among its siblings. p:first-of-type { font-size: 1.2em; }
:last-of-type Selects the last element of its type among its siblings. p:last-of-type { margin-bottom: 0; }
:nth-of-type(n) Selects the nth element of its type among its siblings. p:nth-of-type(even) { color: gray; }

Pseudo-elements

Pseudo-element Description Example
::before Inserts something before the content of an element. p::before { content: "Read this: "; font-weight: bold; }
::after Inserts something after the content of an element. p::after { content: " (The End)"; }
::first-line Selects the first line of a text in an element. p::first-line { font-size: 1.5em; }
::first-letter Selects the first letter of a text in an element. p::first-letter { font-size: 2em; }
::selection Selects the portion of an element that is highlighted when a user selects it. ::selection { background-color: #ffdd00; color: black; }

Combinators

Combinator Description Example
Descendant Selector (space) Selects all elements that are descendants of a specified element. div p { color: green; }
Child Selector (>) Selects all elements that are direct children of a specified element. ul > li { border: 1px solid red; }
Adjacent Sibling Selector (+) Selects the first element that is immediately preceded by another specified element. h2 + p { font-style: italic; }
General Sibling Selector (~) Selects all elements that are siblings of a specified element. p ~ ul { background-color: #e0e0e0; }

Common Properties

Text Properties

Property Description Values
color Sets the color of the text. red, #ff0000, rgb(255, 0, 0), hsl(0, 100%, 50%)
font-family Specifies the font family for text. Arial, Helvetica, sans-serif, 'Times New Roman', Times, serif
font-size Specifies the font size of the text. 16px, 1em, 1rem, larger, smaller
font-weight Specifies the weight of a font. normal, bold, lighter, bolder, 100 - 900
font-style Specifies the font style for text. normal, italic, oblique
line-height Sets the line height. normal, 3, 200%, 1.5em
text-align Specifies the horizontal alignment of text. left, right, center, justify
text-decoration Specifies the decoration added to text. none, underline, overline, line-through
text-transform Controls the capitalization of text. none, uppercase, lowercase, capitalize
letter-spacing Increases or decreases the space between characters in a text. normal, 2px, -1px
word-spacing Increases or decreases the space between words in a text. normal, 5px, -2px
white-space Specifies how white-space inside an element is handled. normal, nowrap, pre, pre-wrap, pre-line
text-shadow Adds shadow to text. 2px 2px 4px #000000

Background Properties

Property Description Values
background-color Sets the background color of an element. lightblue, #f0f0f0, rgba(0, 0, 0, 0.5)
background-image Sets one or more background images for an element. url('image.png'), linear-gradient(red, yellow)
background-repeat Sets if/how a background image will be repeated. repeat, no-repeat, repeat-x, repeat-y
background-position Sets the starting position of a background image. top left, center, bottom right, 50% 50%, 25px 10px
background-size Specifies the size of the background image(s). auto, cover, contain, 50%, 100px 200px
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page. scroll, fixed, local
background Shorthand property for setting all background properties. #fff url('img.png') no-repeat center

Border Properties

Property Description Values
border-width Sets the width of an element's borders. thin, medium, thick, 5px
border-style Sets the style of an element's borders. none, dotted, dashed, solid, double, groove, ridge, inset, outset
border-color Sets the color of an element's borders. black, #000, rgb(0, 0, 0)
border-top, border-right, border-bottom, border-left Sets the width, style, and color for a specific border. 2px solid red
border-radius Rounds the corners of an element. 5px, 50% (for circles)
border Shorthand property for setting all border properties. 1px solid #ccc

Margin Properties

Property Description Values
margin-top, margin-right, margin-bottom, margin-left Sets the margin for each side of an element. 10px, auto
margin Shorthand property for setting all margin properties. 10px (all sides), 10px 5px (top/bottom, left/right), 10px 5px 15px (top, right/left, bottom), 10px 5px 15px 20px (top, right, bottom, left)

Padding Properties

Property Description Values
padding-top, padding-right, padding-bottom, padding-left Sets the padding for each side of an element. 10px
padding Shorthand property for setting all padding properties. 10px (all sides), 10px 5px (top/bottom, left/right), 10px 5px 15px (top, right/left, bottom), 10px 5px 15px 20px (top, right, bottom, left)

Box Model Properties

Property Description Values
width Sets the width of an element's content area. auto, 100px, 50%
height Sets the height of an element's content area. auto, 100px, 50vh
box-sizing Defines how the width and height of an element are calculated. content-box (default), border-box
overflow Specifies what should happen if content overflows an element's box. visible (default), hidden, scroll, auto

Display Properties

Property Description Values
display Specifies the display type of an element. block, inline, inline-block, none, flex, grid

Position Properties

Property Description Values
position Specifies the type of positioning method used for an element. static (default), relative, absolute, fixed, sticky
top, right, bottom, left Specifies the position of a positioned element. 10px, auto, 50%
z-index Specifies the stack order of an element. auto, 0, 1, -1

Flexbox Properties

Property Description Values
display: flex; Turns an element into a flex container.
flex-direction Specifies the direction of the flexible items. row (default), row-reverse, column, column-reverse
justify-content Aligns the flexible container's items when the items do not use all available space on the main-axis. flex-start, flex-end, center, space-between, space-around, space-evenly
align-items Aligns the flexible container's items when the items do not use all available space on the cross-axis. stretch (default), flex-start, flex-end, center, baseline
flex-wrap Specifies whether the flexible items should wrap or not. nowrap (default), wrap, wrap-reverse
flex-grow Specifies how much the item will grow relative to the other flex items. 0 (default), 1, 2
flex-shrink Specifies how much the item will shrink relative to the other flex items. 1 (default), 0
flex-basis Specifies the initial length of a flexible item. auto (default), 0, 100px, 20%
order Specifies the order of a flexible item relative to the rest of the flex items. 0 (default), 1, -1
align-self Specifies the alignment for the selected flexible item inside the flex container. auto (default), stretch, flex-start, flex-end, center, baseline

Grid Properties

Property Description Values
display: grid; Turns an element into a grid container.
grid-template-columns Defines the number and width of the grid columns. auto auto auto, 1fr 2fr 1fr, repeat(3, 100px)
grid-template-rows Defines the number and height of the grid rows. auto auto, 100px 200px, repeat(2, minmax(50px, auto))
grid-template-areas Defines named grid areas. 
grid-template-areas:
    'header header header'
    'sidebar main main'
    'footer footer footer';
grid-column-gap Specifies the gap between columns. 10px
grid-row-gap Specifies the gap between rows. 10px
grid-gap Shorthand property for grid-column-gap and grid-row-gap. 10px, 10px 5px
justify-items Aligns grid items along the inline (row) axis. start, end, center, stretch (default)
align-items Aligns grid items along the block (column) axis. start, end, center, stretch (default)
justify-content Aligns the grid container along the inline (row) axis. start, end, center, stretch, space-around, space-between, space-evenly
align-content Aligns the grid container along the block (column) axis. start, end, center, stretch, space-around, space-between, space-evenly
grid-auto-rows Specifies the size of any auto-generated grid rows. 100px, min-content, max-content
grid-auto-columns Specifies the size of any auto-generated grid columns. 100px, min-content, max-content
grid-auto-flow Specifies how auto-placed items are inserted into the grid. row (default), column, dense, row dense, column dense
grid-column-start, grid-column-end Specifies where to start and end a grid item in terms of column lines. 1, 3, span 2, header-start
grid-row-start, grid-row-end Specifies where to start and end a grid item in terms of row lines. 1, 2, span 3, sidebar-start
grid-area Shorthand property for grid-row-start, grid-column-start, grid-row-end, and grid-column-end, or to assign a name to the grid item. 1 / 2 / 3 / 4, header

Transform Properties

Property Description Values
transform Applies a 2D or 3D transformation to an element. translate(50px, 100px), rotate(30deg), scale(2, 0.5), skew(20deg, 10deg)

Transition Properties

Property Description Values
transition-property Specifies the CSS property(ies) to which to apply the transition. all, width, background-color
transition-duration Specifies the duration of the transition effect. 0s, 2s, 500ms
transition-timing-function Specifies the speed curve of the transition effect. ease (default), linear, ease-in, ease-out, ease-in-out
transition-delay Specifies a delay for the start of the transition effect. 0s, 1s, 200ms
transition Shorthand property for setting all the transition properties. width 2s ease-in-out 0.5s

Animation Properties

Property Description Values
@keyframes Specifies the animation code. 
@keyframes mymove {
    from {top:0px;}
    to {top:200px;}
}
animation-name Specifies the name of the @keyframes animation. mymove
animation-duration Specifies the duration of one cycle of an animation. 3s
animation-timing-function Specifies the speed curve of the animation. linear, ease, etc.
animation-delay Specifies a delay for the start of an animation. 1s
animation-iteration-count Specifies the number of times an animation should run. infinite, 2
animation-direction Specifies whether an animation should play forwards, backwards, or in alternate cycles. normal, reverse, alternate, alternate-reverse
animation-fill-mode Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both). none, forwards, backwards, both
animation-play-state Specifies whether the animation is running or paused. running, paused
animation Shorthand property for setting all the animation properties. mymove 5s infinite alternate

Media Queries

Used to apply different styles for different screen sizes or media types.

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Specificity

The browser determines which CSS rule to apply by the following order (from highest to lowest specificity):

  1. Inline styles (style attribute within HTML elements)
  2. IDs (#id)
  3. Classes (.class), pseudo-classes (:hover), and attributes ([attribute])
  4. Elements (h1, p) and pseudo-elements (::before)

Rules with !important declaration override any other declarations.

Units

Unit Description
px Pixels (relative to the viewing device).
em Relative to the font-size of the element (e.g., 2em means 2 times the size of the current font).
rem Relative to the font-size of the root element (HTML).
% Percentage (relative to another value, typically the parent element).
vw Viewport Width (1vw is 1% of the viewport width).
vh Viewport Height (1vh is 1% of the viewport height).
vmin Viewport Minimum (1vmin is 1% of the viewport's smaller dimension).
vmax Viewport Maximum (1vmax is 1% of the viewport's larger dimension).

This cheat sheet provides a comprehensive overview of common CSS properties and concepts. For more detailed information, refer to official CSS documentation.