CSS

CSS is rich in capabilities and is more than simply laying out pages.

Getting started

Introduction

CSS is rich in capabilities and is more than simply laying out pages.

External CSS

Inline CSS

<h2 style="text-align: center;">Centered text</h2>

<p style="color: blue; font-size: 18px;">Blue, 18-point text</p>

Internal CSS

<style>
body {
    background-color: linen;
}
</style>

Add class

<div class="classname"></div>
<div class="class1 ... classn"></div>

Support multiple classes on one element.

!important

.post-title {
    color: blue !important;
}

Overrides all previous styling rules.

Selector

h1 { } 
#job-title { }
div.hero { }
div > p { }

See: Selectors

Text color

.text-color {
  color: #2a2aff;
  color: green;
  color: rgb(34, 12, 64, 0.6);
  color: hsla(30 100% 50% / 0.6);
}

See: Colors

Background

.bg {
  background-color: blue;
  background-image: url("nyan-cat.gif");
  background-image: url("../image.png");
}

See: Backgrounds

Font

.page-title {
    font-weight: bold;
    font-size: 30px;
    font-family: "Courier New";
}

See: Fonts

Position

.box {
    position: relative;
    top: 20px;
    left: 20px;
}

See also: Position

Animation

animation: 300ms linear 0s infinite;

animation: bounce 300ms linear infinite;

See: Animation

Comment

/* This is a single line comment */

/* This is a 
   multi-line comment */

Flex layout

div {
    display: flex;
    justify-content: center;
}
div {
    display: flex;
    justify-content: flex-start;
}

See: Flexbox

Flex Tricks

Grid layout

#container {
  display: grid;
  grid: repeat(2, 60px) / auto-flow 80px;
}

#container > div {
  background-color: #8ca0ff;
  width: 50px;
  height: 50px;
}

See: Grid Layout

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

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

Basic

*	All elements
div	All div tags
.classname	All elements with class
#idname	Element with ID
div,p	All divs and paragraphs
#idname *	All elements inside #idname

See also: Type / Class / ID / Universal selectors

Combinators

Selector	Description
div.classname	Div with certain classname
div#idname	Div with certain ID
div p	Paragraphs inside divs
div > p	All p tags one level deep in div
div + p	P tags immediately after div
div ~ p	P tags preceded by div

See also: Adjacent / Sibling / Child selectors

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

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

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
input::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

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 requred attribute
input:read-only	With readonly attribute
input:read-write	No readonly attribute.

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

Fonts

Properties

Property	Description
font-family:	\
font-size:	\
letter-spacing:	\
line-height:	\
font-weight:	/ bold / normal		font-style:	italic / normal		text-decoration:	underline / none
text-align:	left / right
center / justify		text-transform:	capitalize / uppercase / lowercase

See also: Font

Shorthand

	style	weight	size (required)		line-height	family
font:	italic	400	14px	/	1.5	sans-serif
	style	weight	size (required)		line-height	family (required)

Example

font-family: Arial, sans-serif;
font-size: 12pt;
letter-spacing: 0.02em;

Case

/* Hello */
text-transform: capitalize;

/* HELLO */
text-transform: uppercase;

/* hello */
text-transform: lowercase;

@font-face

@font-face {
    font-family: 'Glegoo';
    src: url('../Glegoo.woff');
}

Colors

Named color

color: red;
color: orange;
color: tan;
color: rebeccapurple;

Hexadecimal color

color: #090;
color: #009900;
color: #090a;
color: #009900aa;

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%);

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%);

Other

color: inherit;
color: initial;
color: unset;
color: transparent;

color: currentcolor; /* keyword */

Backgrounds

Properties

Property	Description
background:	(Shorthand)
background-color:	See: Colors
background-image:	image url
background-position:	left/center/right top/center/bottom
background-size:	cover X Y
background-clip:	border-box padding-box content-box
background-repeat:	no-repeat repeat-x repeat-y
background-attachment:	scroll/fixed/local

Shorthand

	color	image	positionX	positionY		size	repeat	attachment
background:	#ff0	url(a.jpg)	left	top	/	100px auto	no-repeat	fixed;
background:	#abc	url(b.png)	center	center	/	cover	repeat-x	local;
	color	image	posX	posY		size	repeat	attach..

Examples

.bg {
  background: url(img_man.jpg) no-repeat center;
  background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
  background: rgb(2,0,36); background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(13,232,230,1) 35%, rgba(0,212,255,1) 100%);
}

The Box Model

Maximums/Minimums

.column {
    max-width: 200px;
    width: 500px;
}

See also: max-width / min-width / max-height / min-height

Margin / Padding

.block-one {
    margin: 20px;
    padding: 10px;
}

See also: Margin / Padding

Box-sizing

.container {
    box-sizing: border-box;
}

See also: Box-sizing

Visibility

.invisible-elements {
    visibility: hidden;
}

See also: Visibility

Auto keyword

div {
    margin: auto;
}

See also: Margin

Overflow

.small-block {
    overflow: scroll;
}

See also: Overflow

Animation

Shorthand

	name	duration	timing-function	delay	count	direction	fill-mode	play-state
animation:	bounce	300ms	linear	100ms	infinite	alternate-reverse	both	reverse
	name	duration	timing-function	delay	count	direction	fill-mode	play-state

Properties

Property	Value
animation:	(shorthand)
animation-name:	\
animation-duration:	\ms
animation-timing-function:	ease / linear / ease-in / ease-out / ease-in-out
animation-delay:	\ms
animation-iteration-count:	infinite / \
animation-direction:	normal / reverse / alternate / alternate-reverse
animation-fill-mode:	none / forwards / backwards / both / initial / inherit
animation-play-state:	normal / reverse / alternate / alternate-reverse

See also: Animation

Example

/* @keyframes duration | timing-function | delay |
   iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;

/* @keyframes duration | name */
animation: 3s slidein;

animation: 4s linear 0s infinite alternate move_eye;
animation: bounce 300ms linear 0s infinite normal;
animation: bounce 300ms linear infinite;
animation: bounce 300ms linear infinite alternate-reverse;
animation: bounce 300ms linear 2s infinite alternate-reverse forwards normal;

Javascript Event

.one('webkitAnimationEnd oanimationend msAnimationEnd animationend')

Flexbox

Simple example

.container {
  display: flex;
}

.container > div {
  flex: 1 1 auto;
}

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  ] */
}

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 */
}

Flexbox Tricks

Vertical center

.container {
  display: flex;
}

.container > div {
  width: 100px;
  height: 100px;
  margin: auto;
}

Vertical center (2)

.container {
  display: flex;

  /* vertical */
  align-items: center; 

  /* horizontal */
  justify-content: center;
}

Reordering

.container > .top {
 order: 1;
}

.container > .bottom {
 order: 2;
}

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.

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.

Vertical

.container {
  align-items: center;
}

Vertically-center all items.

Left and right

.menu > .left  { align-self: flex-start; }
.menu > .right { align-self: flex-end; }

Grid Layout

Grid Template Columns

#grid-container {
    display: grid;
    width: 100px;
    grid-template-columns: 20px 20% 60%;
}

fr Relative Unit

.grid {
    display: grid;
    width: 100px;
    grid-template-columns: 1fr 60px 1fr;
}

Grid Gap

/*The distance between rows is 20px*/
/*The distance between columns is 10px*/
#grid-container {
    display: grid;
    grid-gap: 20px 10px;
}

CSS Block Level Grid

#grid-container {
    display: block;
}

CSS grid-row

CSS syntax: grid-row: grid-row-start / grid-row-end;

Example

.item {
  grid-row: 1 / span 2;
}

CSS Inline Level Grid

#grid-container {
    display: inline-grid;
}

minmax() Function

.grid { display: grid; grid-template-columns: 100px minmax(100px, 500px) 100px; }

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;

CSS grid-row-gap

grid-row-gap: length;

Any legal length value, like px or %. 0 is the default value

CSS grid-area

.item1 {
    grid-area: 2 / 1 / span 2 / span 3;
}

Justify Items

#container {
    display: grid;
    justify-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
}

CSS grid-template-areas

.item {
    grid-area: nav;
}
.grid-container {
    display: grid;
    grid-template-areas:
    'nav nav . .'
    'nav nav . .';
}

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.

Align Items

#container {
    display: grid;
    align-items: start;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
}

Dynamic Content

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

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

Using counters

body { counter-reset: section; }

h3::before {
  counter-increment: section; 
  content: "Section." counter(section);
}

ol {
  counter-reset: section;   
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section, ".") " "; 
}

Css 3 tricks

Scrollbar smooth

html {
    scroll-behavior: smooth;
}

Click me, the page will scroll smoothly to Getting started

See also

• CSS selectors cheatsheet (frontend30.com)
• MDN: Using CSS flexbox
• Ultimate flexbox cheatsheet
• GRID: A simple visual cheatsheet
• CSS Tricks: A Complete Guide to Grid
• Browser support