Frontend Crash Course: CSS

Cascading Style Sheets

Structure of a CSS rule

selector {
  property1: value;
  property2: value;
  property3: value;
}

The selector identifies which HTML elements the rule will be applied to
The curly braces contain the property-value pairs, separated with semi-colons
The properties define the style of the selected element
The values are dependent on the property, and indicate the value of the properties to be set

CSS Selectors

Type selector
Attribute selectors
Pseudo-classes
Pseudo-elements
Class selectors
ID selectors
Combinators

Type selector

Matches all the elements of that type on the page

main {
  /* some properties */
}

div {
  /* some properties */
}

p {
  /* some properties */
}

Attribute selectors

`<attr>`

Targets elements that contain the <attr> attribute, regardless of its value.

[data-colour] { 
/* some properties */ 
}

`<attr>=<val>`

Targets elements where the <attr>’s value is exactly <val>.

[data-colour="green"] { 
/* some properties */ 
}

`<attr>~=<val>`

Targets elements with the <attr> attribute whose value is a list of white space separated words, one of which must be <val>. <val> itself cannot contain white space, and neither can it be an empty string.

[data-colour~="green"] { 
  /* some properties */ 
}

`<attr>|=<val>`

Targets elements with the <attr> attribute whose value is exactly <val> or starts with <val> immediately followed by a “-”.
Primary use-case being for language subcode matching, like “en”, “en-US” and “en-UK”.

[data-colour|="green"] { 
  /* some properties */ 
}

`<attr>^=<val>`

A substring matching selector. Targets elements with the <attr> attribute whose value starts with <val>.
<val> cannot be an empty string.

[data-colour^="green"] { 
  /* some properties */ 
}

`<attr>$=<val>`

A substring matching selector. Targets elements with the <attr> attribute whose value ends with <val>.
<val> cannot be an empty string.

[data-colour$="green"] { 
  /* some properties */ 
}

`<attr>*=<val>`

A substring matching selector. Targets elements with the <attr> attribute whose value contains an instance of <val>.
<val> cannot be an empty string.

[data-colour*="green"] { 
  /* some properties */ 
}

Pseudo-classes

Structural pseudo-classes

:root
:nth-child(n)
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)
:first-child
:last-child
:first-of-type
:last-of-type
:only-child
:only-of-type
:empty

Link pseudo-classes

:link
:visited

User action pseudo-classes

:active
:hover
:focus

UI element pseudo-classes

:enabled
:disabled
:checked

Negation pseudo-class

:not(selector)

Language pseudo-class

:lang(zh)

Target pseudo-class

:target

Pseudo-elements

::first-line, ::first-letter, ::before, ::after

Do something to the first letter, or first line. Just the first though. Not the others. Leave them lines alone.

Class selector

Matches all the elements with the specified class attribute

<div class="example">
  // some random markup
</div>

.example {
  /* some properties */ 
}

ID selector

Matches matches the element with the specified id attribute

<div id="example">
  // some random markup
</div>

#example {
  /* some properties */ 
}

Combinators

Descendant

Can be any level of descendant, multiple nesting


  This is a <p> element in a <div> element. And this is a <strong> element within a <p> within a <div>.

div span { 
  /* some properties */ 
}

Child

Immediate child element only


  This is <p> element is a direct child of the <div> element.

div > p { 
  /* some properties */ 
}

Next sibling

Same parent, immediately following

This is a <p> element.

  This is a list item
  This is a list item

p + ul { 
  /* some properties */ 
}

Subsequent sibling

Same parent, can be anywhere following

This is a <p> element.
This is another <p> element.

  This is a list item
  This is a list item

p ~ ul { 
  /* some properties */ 
}

Who wins?

Importance
Specificity
Source order

`!important`

Don't use it if you can help it.

CSS Specificity

0-∞

Inline styles

0-∞

IDs

0-∞

Classes, attributes and pseudo-classes

0-∞

Elements and pseudo-elements

ul {
// CSS properties
}

0, 0, 0, 1

.class-1 .class-2 p {
// CSS properties
}

0, 0, 2, 1

#id-1 .class-3 div {
// CSS properties
}

0, 1, 1, 1

Source order

The tie-breaker for equal specificity values

General guidelines for writing CSS

Declare your styles from lowest specificity then move up
Keep your specificity as low as possible
Name your classes sensibly
Never style IDs
Don't write inline styles

Layout

Flexbox support

98.68% of internet users are using a browser that supports Flexbox

Grid support

93.26% of internet users are using a browser that supports Grid

Flexbox

For single dimension components

Grid

For two-dimensional layouts

Container-child relationship

Flex shorthand

`flex: initial`	`flex: 0 1 auto`, cannot grow but can shrink when there isn't enough space
`flex: auto`	`flex: 1 1 auto`, can grow and shrink to fit available space
`flex: none`	`flex: 0 0 auto`, cannot grow or shrink, AKA inflexible
`flex: <positive-number>`	`flex: <positive-number> 1 0`, can grow and shrink, extent of growth depends on flex factor

Flexbox use-cases

Centre stuff in their parent container

Flexbox use-cases

When you need 1 thing by itself on the opposite side

Flexbox use-cases

To stick the header and footer at the top and bottom

Main

CSS grid basics

Define your grid.

Place items in the grid.

Defining a grid

<div class="grid1">
  <div class="grid1__item">
    <p>Item A</p>
  </div>
  <div class="grid1__item">
    <p>Item B</p>
  </div>
  <div class="grid1__item">
    <p>Item C</p>
  </div>
  <div class="grid1__item">
    <p>Item D</p>
  </div>
  <div class="grid1__item">
    <p>Item E</p>
  </div>
  <div class="grid1__item">
    <p>Item F</p>
  </div>
</div>

Item A

Item B

Item C

Item D

Item E

Item F

The `fr` unit

Represents a fraction of the free space in the grid container.

Item A

Item B

Item C

Fluid CSS grid

.container {
  display: grid;
  grid-template-columns: repeat(3, 3fr 2fr);
}

The `minmax()` function

Defines a size range for columns or rows in the grid.

Item A

Item B

Item C

The `repeat()` function

To specify a large number of columns or rows that follow a similar pattern

Item

`auto-fill` vs. `auto-fit`

Allow browser to determine how many tracks to create depending on track size.

repeat(auto-fill, 100px);

repeat(auto-fit, 100px);

auto-fit collapses empty tracks.

`auto-fill` versus `auto-fit`

Responsive grid without media queries

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
}

Explicit Grid and Implicit Grid

.grid-container {
  display: grid;
  grid-template-columns: 150px 150px 150px; /* three columns  */
  grid-template-rows: 150px 150px; /* two rows  */
}

.item {
  grid-column: 5 / 6; /* grid-column-start: 5; grid-column-end: 6;  */
  grid-row:  2 / 3; /* grid-row-start: 2; grid-row-end: 3;  */
}

The browser will create an implicit grid to hold items placed outside the grid.

The `grid-auto-flow` property

Adjusting the direction and density of grid items

Box Alignment

To create a cohesive and common box alignment model to share among all of CSS

Property	Axis	Aligns	Applies to
`justify-content`	main/inline	content within element (effectively adjusts padding)	block containers, flex containers and grid containers
`align-content`	cross/block	content within element (effectively adjusts padding)	block containers, flex containers and grid containers
`justify-self`	inline	element within parent (effectively adjusts margins)	block-level boxes, absolutely-positioned boxes and grid items
`align-self`	cross/block	element within parent (effectively adjusts margins)	absolutely-positioned boxes, flex items and grid items
`justify-items`	inline	items inside box (controls child items)	block containers and grid containers
`align-items`	cross/block	items inside box (controls child items)	flex-containers and grid-containers

Source: CSS Box Alignment Module Level 3

Flexbox

align-content
justify-content
align-items
align-self

The justify-items/justify-self properties do not apply to flex items

Grid

align-content
justify-content
align-items
align-self
justify-items
justify-self

Flexbox

align-content
justify-content
align-items
align-self

The justify-items/justify-self properties do not apply to flex items

Grid

align-content
justify-content
align-items
align-self
justify-items
justify-self

Justify

`justify-content` & `align-content`

1一

2二

3三

4四

5五

6六

7七

8八

9九

10十

11十一

12十二

13十三

14十四

15十五

16十六

17十七

18十八

19十四

20二十

`justify-self` & `align-self`

`justify-items` & `align-items`

`align-items` & `align-self`

1一

2二

3三

4四

5五

6六

7七

8八

9九

10十

11十一

12十二

13十三

14十四

15十五

16十六

17十七

18十八

19十四

20二十

Let's build a thing

Demo

Cool stuff & pretty things

If time permits…

CSS transforms

Allows us to change the shape and position of the affected content
without disrupting the normal document flow

2D transform functions

`rotate( <angle> )`	Performs a 2D rotation by the angle specified around the element's origin
`translate( <translation-value> [, <translation-value> ]? )`	Performs a 2D translation in the specified X and Y directions
`skew( <angle> [, <angle> ]? )`	Performs a 2D skew by the angles specified
`scale( <number> [, <number> ]? )`	Performs a 2D scale operation by the scaling vector specified

Diagonal text with rotate()

.trf2d-cont {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows:  repeat(3, 2em) repeat(3, minmax(10vmin, 3em)) 2em 2em 50vh;
  grid-gap: 0.125em;
  position: relative;
}

@media screen and (min-width: 480px) {
  .trf2d-cont {
    transform: rotate(-30deg) translateX(5vh);
  }
}

@media screen and (min-width: 640px) {
  .trf2d-cont {
    transform: rotate(-30deg) translateY(-15vh);
  }
}

Perspective text

Rethinking Web Design

CSS transitions

Lets you create gradual transitions between the values of specific CSS properties

CSS animations

Lets you animate the values of CSS properties over time, using keyframes

Note: not all CSS properties are animatable

Transition properties

transition is a shorthand property, covers the following (values are initial default values):

transition-delay: 0s
transition-duration: 0s
transition-property: all
transition-timing-function: ease

Animation properties

animation is a shorthand property, covers the following (values are initial default values):

animation-name: none
animation-duration: 0s
animation-timing-function: ease
animation-delay: 0s
animation-iteration-count: 1
animation-direction: normal
animation-fill-mode: none
animation-play-state: running

Specified as one or more single animations, separated by commas.

Fool's mate

See the Pen CSS Fool's Mate by Chen Hui Jing (@huijing) on CodePen.

Magical kittencorn

See the Pen Magical kittencorn by Chen Hui Jing (@huijing) on CodePen.

Specifications

Read them first, tutorials later.

CSS specifications: https://www.w3.org/Style/CSS/specs.en.html

MDN web docs

Go-to resource for all things web development.

MDN web docs: https://developer.mozilla.org/en-US/

Thank you!

https://www.chenhuijing.com

@hj_chen

@huijing

Font is Magnetic Pro by Olivier Gourvat

Frontend Crash Course: CSS

Cascading Style Sheets

Structure of a CSS rule

CSS Selectors

Type selector

Attribute selectors

<attr>

<attr>=<val>

<attr>~=<val>

<attr>|=<val>

<attr>^=<val>

<attr>$=<val>

<attr>*=<val>

Pseudo-classes

Structural pseudo-classes

Link pseudo-classes

User action pseudo-classes

UI element pseudo-classes

Negation pseudo-class

Language pseudo-class

Target pseudo-class

Pseudo-elements

Class selector

ID selector

Combinators

Descendant

Child

Next sibling

Subsequent sibling

Who wins?

!important

CSS Specificity

Source order

General guidelines for writing CSS

Layout

Flexbox support

Grid support

Flexbox

Grid

Container-child relationship

Flex shorthand

Flexbox use-cases

Flexbox use-cases

Flexbox use-cases

CSS grid basics

Defining a grid

The fr unit

Fluid CSS grid

The minmax() function

The repeat() function

auto-fill vs. auto-fit

auto-fill versus auto-fit

Responsive grid without media queries

Explicit Grid and Implicit Grid

The grid-auto-flow property

Box Alignment

Flexbox

Grid

Flexbox

Grid

justify-content & align-content

justify-content & align-content

justify-self & align-self

justify-items & align-items

align-items & align-self

Let's build a thing

Cool stuff & pretty things

CSS transforms

2D transform functions

Diagonal text with rotate()

Perspective text

Rethinking Web Design

CSS transitions

CSS animations

Transition properties

Animation properties

Fool's mate

Magical kittencorn

Specifications

MDN web docs

`<attr>`

`<attr>=<val>`

`<attr>~=<val>`

`<attr>|=<val>`

`<attr>^=<val>`

`<attr>$=<val>`

`<attr>*=<val>`

`!important`

The `fr` unit

The `minmax()` function

The `repeat()` function

`auto-fill` vs. `auto-fit`

`auto-fill` versus `auto-fit`

The `grid-auto-flow` property

`justify-content` & `align-content`

`justify-content` & `align-content`

`justify-self` & `align-self`

`justify-items` & `align-items`

`align-items` & `align-self`