Cascading Style Sheets
Basic Syntax
selector {
property: value;
...
}
Selector
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
margin-bottom
margin-left
margin-right
margin-top
border
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
outline-color
outline-offset
outline-style
outline-width
padding
padding
padding-bottom
padding-left
padding-right
padding-top
background
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
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
Comments
// 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.
Variable
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.
Nesting
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
Syntax
@mixin name { ... } or @mixin name(argss) { ... }, e.g.
@mixin base {
}
.list {
@include base;
}
Inheritance
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
null
null
boolean
true
false
number
1.2
13
10px
string, strings of text, with and without quotes
"foo"
'bar'
baz
color
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
@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
@if expression {
} @else {
}
@for
@for $i from 1 through 3 {
.item-#{$i} {
width: 2em * $i;
}
}
@each
@each $var in <list or map> { ... }
@while
@while $i > 0 { ... }