Cascading Style Sheets

Basic Syntax selector { property: value; ... }


Selects all elements * { } By tag, e.g. selects all <p> tag elements p { } By class (multiple) .class { } By id (only one) #id { }

Attribute selector

By attribute, select all elements contain named attribute [attribute] { } Contain named "attribute" and "value" [attribute=value] { } Contain word "value" [attribute~=value] { } Contain substring "value" [attribute*=value] { } Begin with "value" [attribute^=value] { } End with "value" [attribute$=value] { }

Group selector

Separate selector by ",". e.g. Select elemements match either <h1> or <p> h1, p { }

Descendant / Sibling selector

General descendant separate selectors by blank space, and direct descendant follow by > selector child { } selector > directChild { } General sibling separate selectors by ~, and direct sibling follow by + selector ~ sibling { } selector + directSibling { }

Pseudo-class / Pseudo-element selector

Syntax selector:pseudo-class { property: value; } Pseudo-classes, to list a few. Get full list here. :hover { } :focus { } :active { } :required ( ) :valid ( ) :not() { } :nth-child() { } Pseudo-elements, to list a few ::after (:after) ::backdrop ::before (:before) ::cue ::first-letter (:first-letter) ::first-line (:first-line) ::placeholder ::selection ::slotted

CSS Text

For text manipulation (line breaking, justification and alignment, white space handling, and text transformation).

Text text-align text-align-last text-indent text-justify text-size-adjust text-transform Word word-break word-spacing Other... hanging-punctuation hyphens letter-spacing line-break overflow-wrap tab-size white-space

CSS fonts

Define style of a font, its family, size, weight, and etc. font font-family font-feature-settings font-kerning font-language-override font-optical-sizing font-size font-size-adjust font-stretch font-style font-synthesis font-variant font-variant-alternates font-variant-caps font-variant-east-asian font-variant-ligatures font-variant-numeric font-variant-position font-variation-settings font-weight line-height

CSS Box Model

CSS box model includes properties to define rectangular box of margin, border and padding. margin border box-shadow padding background overflow


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


border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width box-shadow


outline outline-color outline-offset outline-style outline-width


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


background background-attachment background-clip background-color background-image background-origin background-position background-position-x background-position-y background-repeat background-size


overflow overflow-x overflow-y

CSS Layout

CSS layout defines how to arrange boxes in relation to the viewport as well as to one another. Covering block and inline layout in normal flow, flexbox, grid and multiple-column layout.

Float Layout

float clear

Flex Layout

dispay display: flex; flex flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap align align-content align-items align-self justify-content order order

Grid Layout

dispay display: grid; grid grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-start grid-row grid-row-end grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows gap gap

Multiple-column Layout

column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns

CSS preprocessor


// This comment won't be included in the CSS. /* But this comment will, except in compressed mode. /*! This comment will be included even in compressed mode.


Syntax: sass variables begins with $

$variableName: valueExpression;

$my-color: black; p { color: $my-color; }

Block / Local variable: those defined with {}

p { $my-color: black; color: $my-color; }

!global, can be used to set a global variable’s value from within a local scope

$my-color: black; p { $my-color: white !global; color: $my-color; }


Use #{} interpolation syntax to use SassScript variables in selectors and property names.


p { div { color: #666666; } }

By default, nesting is compiled to general descendant selector

p div { color: #666666; }

Combine with other standard css sibling and descendant selector, e.g. direct descendant

p { >div { color: #666666; } }

The parent selector: & (scss only), is used in nested selectors to refer to the outer selector

p { & { color: #666666; } }



@mixin name { ... } or @mixin name(argss) { ... }, e.g.

@mixin base { } .list { @include base; }


As what inheritance is, meaning one class takes all styles of another class

.base { color: black; } .warning { @extend .base; border: 1px solid red; }

Placeholder Selector: %, a style rule that’s only intended to be extended

%placeholder { color: black; } .extened-class { @extend %placeholder; }

Data Type




true false


1.2 13 10px

string, strings of text, with and without quotes

"foo" 'bar' baz


blue #04a3f9 rgba(255, 0, 0, 0.5)

list, separated by spaces or commas

1.5em 1em 0 2em Helvetica, Arial, sans-serif

map, maps from one value to another

(key1: value1, key2: value2)

function references, a function reference is returned by get-function($function-name)

The function references can be passed to call($function, $args...) and the function it refers to will be invoked.

get-function($function-name) call($function, $args...)


@function size($base, $scale) { $result: 1; @for $_ from 1 through $scale { $result: $result * $base; } @return $result; } div { width: size(4, 2) * 1px; }

Flow Control


@if expression { } @else { }


@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } }


@each $var in <list or map> { ... }


@while $i > 0 { ... }