CSS 3 Cheat Sheet
This is a quick reference cheat sheet for CSS goodness, listing selector syntax, properties, units and other u
Css 3 tricks
Scrollbar smooth
html { scroll-behavior: smooth; }
Click me, the page will scroll smoothly to Getting started
CSS Dynamic Content
Using counters
body { counter-reset: section; } h3::before { counter-increment: section; content: "Section." counter(section); }
ol { counter-reset: section; list-marker-type: none; } li::before { counter-increment: section; content: counters(section, ".") " "; }
Counter
/\* Set "my-counter" to 0 \*/ counter-set: my-counter;
/\* Increment "my-counter" by 1 \*/ counter-increment: my-counter;
/\* Decrement "my-counter" by 1 \*/ counter-increment: my-counter -1;
/\* Reset "my-counter" to 0 \*/ counter-reset: my-counter;
See also: Counter set
Variable
Define CSS Variable
:root { --first-color: #16f; --second-color: #ff7; }
Variable Usage
#firstParagraph { background-color: var(--first-color); color: var(--second-color); }
See also: CSS Variable
CSS Grid Layout
Align Items
#container { display: grid; align-items: start; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr; grid-gap: 10px; }
Justify Self
#grid-container { display: grid; justify-items: start; } .grid-items { justify-self: end; }
The grid items are positioned to the right (end) of the row.
CSS grid-template-areas
.item { grid-area: nav; } .grid-container { display: grid; grid-template-areas: 'nav nav . .' 'nav nav . .'; }
Justify Items
#container { display: grid; justify-items: center; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr; grid-gap: 10px; }
CSS grid-area
.item1 { grid-area: 2 / 1 / span 2 / span 3; }
CSS grid-row-gap
grid-row-gap: length;
Any legal length value, like px or %. 0 is the default value
grid-row-start & grid-row-end
CSS syntax:
- grid-row-start: auto|row-line;
- grid-row-end: auto|row-line|span n;
#Example
grid-row-start: 2; grid-row-end: span 2;
minmax() Function
.grid { display: grid; grid-template-columns: 100px minmax(100px, 500px) 100px; }
CSS Inline Level Grid
#grid-container { display: inline-grid; }
CSS Block Level Grid
#grid-container { display: block; }
Grid Gap
/\*The distance between rows is 20px\*/ /\*The distance between columns is 10px\*/ #grid-container { display: grid; grid-gap: 20px 10px; }
fr Relative Unit
.grid { display: grid; width: 100px; grid-template-columns: 1fr 60px 1fr; }
Grid Template Columns
#grid-container { display: grid; width: 100px; grid-template-columns: 20px 20% 60%; }
CSS Flexbox Tricks
Left and right
.menu > .left { align-self: flex-start; } .menu > .right { align-self: flex-end; }
Vertical
.container { align-items: center; }
Vertically-center all items.
Table-like
.container { display: flex; } /\* the 'px' values here are just suggested percentages \*/ .container > .checkbox { flex: 1 0 20px; } .container > .subject { flex: 1 0 400px; } .container > .date { flex: 1 0 120px; }
This creates columns that have different widths, but size accordingly according to the circumstances.
Mobile layout
.container { display: flex; flex-direction: column; } .container > .top { flex: 0 0 100px; } .container > .content { flex: 1 0 auto; }
A fixed-height top bar and a dynamic-height content area.
Reordering
.container > .top { order: 1; } .container > .bottom { order: 2; }
Vertical center (2)
.container { display: flex; /\* vertical \*/ align-items: center; /\* horizontal \*/ justify-content: center; }
Vertical center
.container { display: flex; } .container > div { width: 100px; height: 100px; margin: auto; }
CSS Flexbox
Child
.container > div {
/\* This: \*/ flex: 1 0 auto; /\* Is equivalent to this: \*/ flex-grow: 1; flex-shrink: 0; flex-basis: auto;
order: 1;
align-self: flex-start; /\* left \*/ margin-left: auto; /\* right \*/
}
Container
.container {
display: flex; display: inline-flex;
flex-direction: row; /\* ltr - default \*/ flex-direction: row-reverse; /\* rtl \*/ flex-direction: column; /\* top-bottom \*/ flex-direction: column-reverse; /\* bottom-top \*/
flex-wrap: nowrap; /\* one-line \*/ flex-wrap: wrap; /\* multi-line \*/
align-items: flex-start; /\* vertical-align to top \*/ align-items: flex-end; /\* vertical-align to bottom \*/ align-items: center; /\* vertical-align to center \*/ align-items: stretch; /\* same height on all (default) \*/
justify-content: flex-start; /\* [xxx ] \*/ justify-content: center; /\* [ xxx ] \*/ justify-content: flex-end; /\* [ xxx] \*/ justify-content: space-between; /\* [x x x] \*/ justify-content: space-around; /\* [ x x x ] \*/ justify-content: space-evenly; /\* [ x x x ] \*/
}
Simple example
.container { display: flex; }
.container > div { flex: 1 1 auto; }
CSS Animation
Javascript Event
.one('webkitAnimationEnd oanimationend msAnimationEnd animationend')
CSS The Box Model
Auto keyword
div { margin: auto; }
See also: Margin
Visibility
.invisible-elements { visibility: hidden; }
See also: Visibility
Box-sizing
.container { box-sizing: border-box; }
See also: Box-sizing
Maximums/Minimums
.column { max-width: 200px; width: 500px; }
See also: max-width / min-width / max-height / min-height
CSS Colors
Other
color: inherit; color: initial; color: unset; color: transparent; color: currentcolor; /\* keyword \*/
HSL Colors
color: hsl(30, 100%, 50%, 0.6); color: hsla(30, 100%, 50%, 0.6); color: hsl(30 100% 50% / 0.6); color: hsla(30 100% 50% / 0.6); color: hsl(30.0 100% 50% / 60%); color: hsla(30.2 100% 50% / 60%);
rgb() Colors
color: rgb(34, 12, 64, 0.6); color: rgba(34, 12, 64, 0.6); color: rgb(34 12 64 / 0.6); color: rgba(34 12 64 / 0.3); color: rgb(34.0 12 64 / 60%); color: rgba(34.6 12 64 / 30%);
Hexadecimal color
color: #090; color: #009900; color: #090a; color: #009900aa;
Named color
color: red; color: orange; color: tan; color: rebeccapurple;
CSS Fonts
@font-face
@font-face { font-family: 'Glegoo'; src: url('../Glegoo.woff'); }
Case
/\* Hello \*/ text-transform: capitalize; /\* HELLO \*/ text-transform: uppercase; /\* hello \*/ text-transform: lowercase;
Example
font-family: Arial, sans-serif; font-size: 12pt; letter-spacing: 0.02em;
Shorthand
style | weight | size (required) | line-height | family | ||
---|---|---|---|---|---|---|
font: | italic | 400 | 14px | / | 1.5 | sans-serif |
style | weight | size (required) | line-height | family (required) |
Properties
Property | Description |
---|---|
font-family: | |
font-size: | |
letter-spacing: | |
line-height: | |
font-weight: | |
font-style: | italic / normal |
text-decoration: | underline / none |
text-align: | left / rightcenter / justify |
text-transform: | capitalize / uppercase / lowercase |
See also: Font |
CSS Selectors
Structural pseudo classes
p:first-child | First child |
p:last-child | Last child |
p:first-of-type | First of some type |
p:last-of-type | Last of some type |
p:nth-child(2) | Second child of its parent |
p:nth-child(3n42) | Nth-child (an + b) formula |
p:nth-last-child(2) | Second child from behind |
p:nth-of-type(2) | Second p of its parent |
p:nth-last-of-type(2) | …from behind |
p:only-of-type | Unique of its parent |
p:only-child | Only child of its parent |
Input pseudo classes
input:checked | Checked inputs |
input:disabled | Disabled inputs |
input:enabled | Enabled inputs |
input:focus | Input has focus |
input:in-range | Value in range |
input:out-of-range | Input value out of range |
input:valid | Input with valid value |
input:invalid | Input with invalid value |
input:optional | No required attribute |
input:required | Input with required attribute |
input:read-only | With readonly attribute |
input:read-write | No readonly attribute |
input:indeterminate | With indeterminate state |
Pseudo classes
p::after | Add content after p |
p::before | Add content before p |
p::first-letter | First letter in p |
p::first-line | First line in p |
::selection | Selected by user |
::placeholder | Placeholder attribute |
:root | Documents root element |
:target | Highlight active anchor |
div:empty | Element with no children |
p:lang(en) | P with en language attribute |
:not(span) | Element that's not a span |
User action pseudo classes
a:link | Link in normal state |
a:active | Link in clicked state |
a:hover | Link with mouse over it |
a:visited | Visited link |
Attribute selectors
a[target] | With a target attribute |
a[target="_blank"] | Open in new tab |
a[href^="/index"] | Starts with /index |
[class|="chair"] | Starts with chair |
[class*="chair"] | containing chair |
[title~="chair"] | Contains the word chair |
a[href$=".doc"] | Ends with .doc |
[type="button"] | Specified type |
See also: Attribute selectors |
Examples
#Groups Selector
h1, h2 { color: red; }
#Chaining Selector
h3.section-heading { color: blue; }
#Attribute Selector
div[attribute="SomeValue"] { background-color: red; }
#First Child Selector
p:first-child { font-weight: bold; }
#No Children Selector
.box:empty { background: lime; height: 80px; width: 80px; }
Getting Started
Variable & Counter
counter-set: subsection; counter-increment: subsection; counter-reset: subsection 0; :root { --bg-color: brown; } element { background-color: var(--bg-color); }
See: Dynamic content
Grid layout
#container { display: grid; grid: repeat(2, 60px) / auto-flow 80px; } #container > div { background-color: #8ca0ff; width: 50px; height: 50px; }
See: Grid Layout
Flex layout
div { display: flex; justify-content: center; } div { display: flex; justify-content: flex-start; }
See: Flexbox | Flex Tricks
Comment
/\* This is a single line comment \*/ /\* This is a multi-line comment \*/
Background
background-color: blue; background-image: url("nyan-cat.gif"); background-image: url("../image.png");
See: Backgrounds
Text color
color: #2a2aff; color: green; color: rgb(34, 12, 64, 0.6); color: hsla(30 100% 50% / 0.6);
See: Colors
!important
.post-title { color: blue !important; }
Overrides all previous styling rules.
Add class
<div class="classname"></div> <div class="class1 ... classn"></div>
Support multiple classes on one element.
Introduction
CSS is rich in capabilities and is more than simply laying out pages.
#External stylesheet
<link href="./path/to/stylesheet/style.css" rel="stylesheet" type="text/css">
#Internal stylesheet
<style> body { background-color: linen; } </style>
#Inline styles
<h2 style="text-align: center;">Centered text</h2> <p style="color: blue; font-size: 18px;">Blue, 18-point text</p>