Web Development | 6 Min Read

Best CSS Cheat Sheet For Beginners

Joshua Todd

Joshua Todd

November 15, 2020

Best CSS Cheat Sheet For Beginners

Table of Contents

    What is CSS?

    CSS is a foundational element of the Internet. CSS stands for Cascading Style Sheets. It was created in 1994 by Håkon Wium Lie during the early days of the modern World Wide Web. The “style” term in the acronym gives the one-word explanation of what CSS is. The coding language specifies the style and design elements of a website.

    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.

    CSS Selector

    Selector

    Description

    Example

    Universal

    Any element

    • *

    Element

    Any element of that type

    • h1 h2 h3 h4

    ID

    Select element with specified ID

    • #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

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

    Backgrounds

    Property

    Values

    background

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

    background (shorthand)

    Syntax
    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;
    }
    

    Property

    Values

    background-image

    • url
    • gradients
    • none

    Property

    Values

    background-position

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

    Property

    Values

    background-repeat

    • repeat
    • repeat-x
    • repeat-y
    • no-repeat

    Property

    Values

    background-size

    • length
    • %
    • auto
    • cover
    • contain

    Property

    Values

    background-attachment

    • scroll
    • fixed
    • local

    Property

    Values

    background-origin

    • border-box
    • padding-box
    • content-box

    Property

    Values

    background-clip

    • border-box
    • padding-box
    • content-box

    Property

    Values

    background-color

    • color
    • transparent

    Borders

    Property

    Values

    border

    • border-width
    • border-style
    • border-color

    border (shorthand)

    Syntax
    border: width style color;

    Example

    .box {
      border: 2px solid red;
    }
    

    Property

    Values

    border-width

    • thin
    • medium
    • thick
    • length

    Property

    Values

    border-style

    • none
    • hidden
    • dotted
    • dashed
    • solid
    • double
    • groove
    • dashed
    • ridge
    • inset
    • outset

    Property

    Values

    border-color

    • color
    • transparent

    Property

    Values

    border-bottom

    • border-bottom-width
    • border-style
    • border-color

    Property

    Values

    border-left

    • border-left-width
    • border-style
    • border-color

    Property

    Values

    border-left-style

    • border-style

    Property

    Values

    border-right-color

    • border-color

    Property

    Values

    border-right-width

    • thin
    • medium
    • thick
    • length

    Property

    Values

    border-top-width

    • thin
    • medium
    • thick
    • length

    Property

    Values

    border-bottom-color

    • border-color

    Property

    Values

    border-bottom-style

    • border-style

    Property

    Values

    border-left-color

    • border-color

    Property

    Values

    border-left-width

    • thin
    • medium
    • thick
    • length

    Property

    Values

    border-right-style

    • border-style

    Property

    Values

    border-top

    • border-top-width
    • border-style
    • border-color

    Property

    Values

    border-top-style

    • border-style

    Property

    Values

    border-top-color

    • border-color

    Property

    Values

    border-top-style

    • border-style

    Property

    Values

    border-collapse

    • collapse
    • separate

    Property

    Values

    border-right

    • border-top-width
    • border-style
    • border-color

    Property

    Values

    border-radius

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

    Property

    Values

    border-top-right-radius

    • length

    Property

    Values

    border-bottom-right-radius

    • length

    Property

    Values

    border-bottom-left-radius

    • length

    Box Model

    CSS Box Model
    CSS Box Model

    Property

    Values

    box-sizing

    • border-box
    • content-box

    Property

    Values

    height

    • auto
    • %
    • length

    Property

    Values

    min-height

    • none
    • %
    • length

    Property

    Values

    max-height

    • none
    • %
    • length

    Property

    Values

    width

    • auto
    • %
    • length

    Property

    Values

    min-width

    • none
    • %
    • length

    Property

    Values

    max-width

    • none
    • %
    • length

    Property

    Values

    margin

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

    margin (shorthand)

    Syntax
    margin: top right bottom left;

    Example

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

    Property

    Values

    margin-left

    • auto
    • height
    • %

    Property

    Values

    margin-right

    • auto
    • height
    • %

    Property

    Values

    margin-top

    • auto
    • length
    • %

    Property

    Values

    margin-bottom

    • auto
    • length
    • %

    Property

    Values

    padding

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

    padding (shorthand)

    Syntax
    padding: top right bottom left;

    Example

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

    Property

    Values

    padding-top

    • length
    • %

    Property

    Values

    padding-right

    • length
    • %

    Property

    Values

    padding-bottom

    • length
    • %

    Property

    Values

    padding-left

    • length
    • %

    Property

    Values

    display

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

    Property

    Values

    overflow

    • visible
    • hidden
    • scroll
    • auto
    • inital
    • inherit

    Property

    Values

    overflow-x

    • visible
    • hidden
    • scroll
    • auto
    • inital
    • inherit

    Property

    Values

    overflow-y

    • visible
    • hidden
    • scroll
    • auto
    • inital
    • inherit

    Property

    Values

    visibility

    • visible
    • hidden
    • collapse

    Property

    Values

    clear

    • left
    • right
    • both
    • none

    Text

    Property

    Values

    direction

    • ltr
    • rtl
    • inherit

    Property

    Values

    letter-spacing

    • normal
    • length

    Property

    Values

    text-outline

    • color
    • length
    • none

    Property

    Values

    text-align

    • start
    • end
    • left
    • right
    • center
    • justify

    Property

    Values

    text-decoration

    • none
    • underline
    • overline
    • line-thorugh
    • blink

    Property

    Values

    text-shadow

    • none
    • color
    • length

    Property

    Values

    word-break

    • normal
    • keep-all
    • loose
    • break-strict
    • break-all

    Property

    Values

    word-wrap

    • word-wrap
    • normal
    • nowrap

    Property

    Values

    text-emphasis

    • none
    • accent
    • dot
    • circle
    • disc

    Property

    Values

    text-indent

    • length
    • %

    Property

    Values

    text-transform

    • none
    • capitalize
    • uppercase
    • lowercase

    Property

    Values

    text-wrap

    • normal
    • unresricted
    • none
    • suppress

    Property

    Values

    word-spacing

    • normal
    • length
    • %

    Font

    Property

    Values

    font

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

    Property

    Values

    font-size-adjust

    • none
    • inherit
    • number

    Property

    Values

    font-family

    • serif
    • sans-serif
    • Font Name

    Property

    Values

    font-style

    • normal
    • italic
    • oblique
    • inherit

    Property

    Values

    font-style

    • normal
    • small-caps
    • inherit

    Property

    Values

    font-size

    • inherit
    • length
    • %

    Property

    Values

    font-weight

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

    Lists

    Property

    Values

    list-style

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

    Property

    Values

    list-style-type

    • circle
    • disc
    • square
    • upper-roman
    • decimal

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

    Property

    Values

    list-style-image

    • none
    • url

    Colors

    Property

    Values

    color

    • color
    • inherit

    opacity

    • number
    • inherit

    Tables

    Property

    Values

    border-collapse

    • collapse
    • separate

    Property

    Values

    empty-cells

    • show
    • hide

    Property

    Values

    border-spacing

    • length length
    • inherit

    Property

    Values

    table-layout

    • auto
    • fixed

    Property

    Values

    caption-side

    • top
    • bottom
    • initial
    • inherit

    Animations

    Property

    Values

    animation

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

    Property

    Values

    animation-name

    • none
    • keyframename

    Property

    Values

    animation-duration

    • time

    Property

    Values

    animation-delay

    • time

    Property

    Values

    animation-timing-function

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

    Property

    Values

    animation-iteration-count

    • inherit
    • number

    Property

    Values

    animation-direction

    • normal
    • alternate

    Transitions

    Property

    Values

    transition

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

    Property

    Values

    transition-duration

    • time

    Property

    Values

    transition-delay

    • time

    Property

    Values

    transition-property

    • all
    • property
    • none

    Property

    Values

    transition-timing-function

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