Level Up Your Coding Skills: Explore the Ultimate CSS Cheat Sheet

What is CSS?

CSS, short for Cascading Style Sheets, is a style sheet language used to describe the visual presentation of a document written in HTML (Hypertext Markup Language) or XML (eXtensible Markup Language). It provides web developers with a powerful set of tools and properties to control the layout, formatting, colors, fonts, and other visual aspects of a web page.

CSS is distinct from HTML (Hyper Text Markup Language), which specifies the content. Separating the style from the content allows website developers to better manage websites. HTML elements could be styled in-line in the early days of the Internet. Many browsers still support some HTML attributes for style, which mimic CSS.

For example, to make an item bold in CSS, the code used is font-weight: bold;. the code used in HTML is strong. The best practice for coding is to use CSS for styling and not use any in-line HTML styles.

One advantage of using CSS is that the design style can be separated from the in-line, on-page code. This means that developers can edit the text in one location and the changes will be reflected across the website.

This benefit is realized if the developers specifies the names of CSS Classes and IDs in the code on the page. In conjunction the developer writes the CSS code to style elements in an external CSS file. Which will be placed in the head of your document.


 <link rel="stylesheet" href="css/style.css">

With CSS code, all sorts of element design parameters can be specified. The color, size, spacing alignment, and other characteristics of blocks of text, images, and many other elements can be controlled. Modern CSS continues to evolve to give developers more and more control and creativity with design. The latest set of guidelines being developed is CSS3.

CSS Selectors

CSS Selectors are the foundation of using CSS. You use selectors to target specific elements that you want to style. Below is how the syntax works.

Universal

Any element

Element

Any element of that type

h1 h2 h3 h4

Select element with specified ID

Class

Selects all elements with class

.class

Descendant

Selects all li within an unordered list ul

ul li

Adjacent

Selects all p elements that are placed immediately after ul elements

ul + p

Direct children

Selects all a elements where the parent is a p element

p > a

Sibling combinator

Selects every a element that are preceded by a p element

p ~ a

Attributes

Selects all elements with a target attribute

a[target]

Pseudo-class

Selects an elements when a specific state condition is met.

a:hover
a:visited
a:link
a:focus

Pseudo-Elements

Pseudo-element may sound similar to pseudo-class but they are completely different types of selectors. A pseudo-element injects a new dom element into the selected container. Content is added to the element with the content propery.

Pseudo-element

Adds/selects a dom element that is nested as a child of all a elements. :before is added as the first child. :after is added as the last child

a:before
a:after

Positioning

position

static
relative
absolute
fixed
sticky

inset

top
bottom
left
right

inset (shorthand)

inset: top right bottom left;

Example

.class {
  inset: 10px 20px 15px 20px;
}

top

auto
length
%

bottom

auto
length
%

left

auto
length
%

right

auto
length
%

Backgrounds

background

background-color
background-image
background-repeat
background-attachment
background-position

background (shorthand)

background: bg-color bg-image [position/bg-size] [bg-repeat] [bg-origin] [bg-clip] [bg-attachment] [initial|inherit];

Example

.hero-section {
  background: blue url("your-img.jpg") no-repeat fixed center;
}

background-image

url
gradients
none

background-position

top left
top center
center left
center center
center right
bottom left
bottom center
bottom right
x-%
y-%
x-pos
y-pos

background-repeat

repeat
repeat-x
repeat-y
no-repeat

background-size

length
%
auto
cover
contain

background-attachment

scroll
fixed
local

background-origin

border-box
padding-box
content-box

background-clip

border-box
padding-box
content-box

background-color

color
transparent

Borders

border

border-width
border-style
border-color

border (shorthand)

border: width style color;

Example

.box {
  border: 2px solid red;
}

border-width

thin
medium
thick
length

border-style

none
hidden
dotted
dashed
solid
double
groove
dashed
ridge
inset
outset

border-color

color
transparent

border-bottom

border-bottom-width
border-style
border-color

border-left

border-left-width
border-style
border-color

border-left-style

border-style

border-right-color

border-color

border-right-width

thin
medium
thick
length

border-top-width

thin
medium
thick
length

border-bottom-color

border-color

border-bottom-style

border-style

border-left-color

border-color

border-left-width

thin
medium
thick
length

border-right-style

border-style

border-top

border-top-width
border-style
border-color

border-top-style

border-style

border-top-color

border-color

border-top-style

border-style

border-collapse

collapse
separate

border-right

border-top-width
border-style
border-color

border-radius

border-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius

border-top-right-radius

length

border-bottom-right-radius

length

border-bottom-left-radius

length

Box Model

box-sizing

border-box
content-box

height

auto
%
length

min-height

none
%
length

max-height

none
%
length

width

auto
%
length

min-width

none
%
length

max-width

none
%
length

margin

margin-top
margin-right
margin-bottom
margin-left

margin (shorthand)

margin: top right bottom left;

Example

.class {
  margin: 10px 20px 15px 20px;
}

margin-left

auto
height
%

margin-right

auto
height
%

margin-top

auto
length
%

margin-bottom

auto
length
%

padding

padding-top
padding-right
padding-bottom
padding-left

padding (shorthand)

padding: top right bottom left;

Example

.class {
  padding: 10px 20px 15px 20px;
}

padding-top

length
%

padding-right

length
%

padding-bottom

length
%

padding-left

length
%

display

inline
inline-block
block
flex
inline-flex
grid
inline-grid
table
none
initial
inherit

overflow

visible
hidden
scroll
auto
inital
inherit

overflow-x

visible
hidden
scroll
auto
inital
inherit

overflow-y

visible
hidden
scroll
auto
inital
inherit

visibility

visible
hidden
collapse

clear

left
right
both
none

Text

direction

ltr
rtl
inherit

letter-spacing

normal
length

text-outline

color
length
none

text-align

start
end
left
right
center
justify

text-decoration

none
underline
overline
line-thorugh
blink

text-shadow

none
color
length

word-break

normal
keep-all
loose
break-strict
break-all

word-wrap

word-wrap
normal
nowrap

text-emphasis

none
accent
dot
circle
disc

text-indent

length
%

text-transform

none
capitalize
uppercase
lowercase

text-wrap

normal
unresricted
none
suppress

word-spacing

normal
length
%

Font

font

font-style
font-weight
font-size/line-height
font-family

font-size-adjust

none
inherit
number

font-family

serif
sans-serif
Font Name

font-style

normal
italic
oblique
inherit

font-style

normal
small-caps
inherit

font-size

inherit
length
%

font-weight

lighter
normal
bold
bolder
100
200
300
400
500
600
700
800
900
inherit

Lists

list-style

list-style-type
list-style-position
list-style-image

list-style-type

circle
disc
square
upper-roman
decimal

These are just a few. To see all list style types visit w3schools.

list-style-image

none
url

Colors

color

color
inherit

opacity

number
inherit

Tables

border-collapse

collapse
separate

empty-cells

show
hide

border-spacing

length length
inherit

table-layout

auto
fixed

caption-side

top
bottom
initial
inherit

Animations

animation

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

animation-name

none
keyframename

animation-duration

time

animation-delay

time

animation-timing-function

ease
linear
ease-in
ease-out
ease-in-out
cubic-Bezier

animation-iteration-count

inherit
number

animation-direction

normal
alternate

Transitions

transition

transition-property
transition-duration
transition-duration
transition-timing-function
transition-delay

transition-duration

time

transition-delay

time

transition-property

all
property
none

transition-timing-function

ease
linear
ease-in
ease-out
ease-in-out
cubicBezier

Level Up Your Coding Skills: Explore the Ultimate CSS Cheat Sheet

What is CSS?

CSS Selectors

Pseudo-Elements

Positioning

Backgrounds

Borders

Box Model

Text

Font

Lists

Colors

Tables

Animations

Transitions

Receive resources directly to your inbox

Table of Contents

Level Up Your Coding Skills: Explore the Ultimate CSS Cheat Sheet

What is CSS?

CSS Selectors

Pseudo-Elements

Positioning

Backgrounds

Borders

Box Model

Text

Font

Lists

Colors

Tables

Animations

Transitions

Receive resources directly to your inbox

Table of Contents

Related Articles

15 High-Converting SaaS Websites and Their Winning Strategies

What is a Landing Page? The Ultimate Guide to Landing Page Creation

12 Best Landing Page Examples: Uncover the Secrets of High-Converting Designs