Advanced CSS

Web development fundamentals

2022

Specificity

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied.

 

Find more infos on MDN

Specificity

  • Three column weights are calculated: ID - CLASS - TYPE
  • Comparison from left to right (id to type)
  • Highest weight is the most relevant
  • If all have the same weight, the last declared style wins
  • Inline styles have the highest specificity

Fonts

Normally, you can only use fonts that are installed on the users machine. That is why we are using this prioritized lists.

 

But there is a way to embed fonts from TypeKit, Google Fonts or your own server into your website.

Find more infos on CSS-Tricks

@font-face

Inside your CSS:

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  src: url(opensans.woff) format('woff');
}

In reality

Inside your CSS:

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

body {
  font-family: 'Open Sans', sans-serif;
}

Or...

body {
  font-family: 'Open Sans', sans-serif;
}
<link rel="preconnect" href="https://fonts.googleapis.com"> 
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">

Be aware...

The more fonts and font-styles you add, the longer your website needs to load

Float layouts

Find more infos on CSS-Tricks

Float layouts

Float comes from classic print layouts and is used in web design as well

Float layouts

  • You can create entire layouts with elements that floats around each other
  • Long time the way to go, to build layouts on the web
  • You need a lot of hacks to make it work

Find more infos on CSS-Tricks

Flexbox

Or how to center things vertically and horizontally

Find more infos on CSS-Tricks

Flexbox

  • Expands items to fill available free space
  • Or shrinks items to prevent overflow
  • ​Flexbox layout is direction-agnostic 

Flexbox

Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.

Container

Items

main-axis

cross-axis

Properties for the container

.container {
  display: flex; /* or inline-flex */
}
.container {
  flex-direction: row; /* row-reverse, column, column-reverse */
}
row
row-reverse
column
column-reverse
.container {
  flex-wrap: nowrap; /* wrap, wrap-reverse */
}
wrap
.container {
  flex-flow: column wrap;
}
.container {
  justify-content: flex-start /* flex-end, center, space-between, space-around, space-evenly, start, end, left, right ... + safe, unsafe */
}
flex-start
flex-end
center
space-between
.container {
  align-content: flex-start; /* flex-end, center, space-between, space-around, space-evenly, stretch, start, end, baseline, first baseline, last baseline + ... safe, unsafe */
}
space-between
flex-start

Only takes effect if flex-wrap is set to wrap or wrap-reverse!

.container {
  gap: 10px;
  gap: 10px 20px; /* row-gap column gap */
  row-gap: 10px;
  column-gap: 20px;
}
gap: 40px

Properties for the items

.item {
  order: 5; /* default is 0 */
}

-1

1

1

3

7

.item {
  flex-grow: 4; /* default 0 */
}

1

2

1

1

1

1

.item {
  flex-shrink: 3; /* default 1 */
}
.item {
  flex-basis: 100px; /* default auto */
}
.item {
  flex: 2 1 auto; /* flex-grow flex-shrink? flex-basis? */
}

This is the shorthand syntax for flex-grow, flex-shrink and flex-basis

.item {
  align-self: auto; /* flex-start, flex-end, center, baseline, stretch */
}
flex-start
flex-end

Grid

Grid layout is intended for larger scale layouts

Find more infos on CSS-Tricks

Grid container and items

<div class="container">
  <div class="item item-1"> </div>
  <div class="item item-2">
    <p class="sub-item">Some text</p>
  </div>
  <div class="item item-3"> </div>
</div>
​1
2
3
4
​1
2
3
​1
2
3
4
​1
2
3

Grid line

​1
2
3
4
​1
2
3

Grid cell

​1
2
3
4
​1
2
3

Grid track

​1
2
3
4
​1
2
3

Grid area

Properties for the grid container

.container {
  display: grid; /* inline-grid */
}
.container {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}
  • You can name lines [name]
  • You can use all units
  • You can use keywords
  • You can use repeat function
  • min-content
  • max-content
  • auto
  • fr-unit (fractional)
.container {
  grid-template-columns: 1fr 4fr 1fr;
  grid-template-rows: 80px 1fr 80px;
  grid-template-areas:
    "header header header"
    ". content ."
    "footer footer footer";
}
  • Name an area with the grid-area property on the grid item
  • none means no definition
  • . means an empty grid cell
.container {
  grid-template-columns: 1fr 4fr 1fr;
  grid-template-rows: 80px 1fr 80px;
  grid-template-areas:
    "header header header"
    ". content ."
    "footer footer footer";
}
header
content
footer
.
.
.container {
  row-gap: 20px;
  column-gap: 16px;
  
  /* ...or... */
  gap: 20px 16px;
}
row-gap
column-gap
.container {
  justify-items: start; /* end, center, stretch */
}
start
stretch
.container {
  align-items: start; /* end, center, stretch */
}
start
center
.container {
  place-items: center; /* align-items / justify-items */
}
.container {
  justify-content: start; /* end, center, stretch, space-around, space-between, space-evenly */
}
space-between
start
.container {
  align-content: start; /* end, center, stretch, space-around, space-between, space-evenly */
}
center
space-between
.container {
  place-content: center; /* align-content / justify-content */
}
.container {
  grid-auto-columns: 100px;
  grid-auto-rows: 100px;
}
  • The value can be a length, percentage or fraction
  • Can have multiple values
.container {
  grid-auto-flow: row; /* column, row dense, column dense */
}
  • Defines the behavior of items not explicitly placed in the grid
  • Defines if first the columns will be filled up or the rows
.container {
  grid: 100px 300px / 3fr 1fr;
}

.container {
  grid-template-rows: 100px 300px;
  grid-template-columns: 3fr 1fr;
}
  • Both css blocks are equal
  • You can use the grid shorthand syntax to define everything with one property

Properties for the grid items

.item {
  grid-column-start: 1; /* name, span <number>, span <name>, auto */
  grid-column-end: 2; /* name, span <number>, span <name>, auto */
  grid-row-start: 1; /* name, span <number>, span <name>, auto */
  grid-row-end: 3; /* name, span <number>, span <name>, auto */
}
​1
2
3
4
​1
2
3
.item {
  grid-column: 2 / 4;
  grid-row: 2 / 3;
}
​1
2
3
4
​1
2
3
.item {
  grid-area: header; /* <row-start> / <column-start> / <row-end> / <column-end> */
}
header
content
footer
.
.
.item {
  justify-self: start; /* end, center, stretch */
}
end
start
center
stretch
.item {
  align-self: start; /* end, center, stretch */
}
end
start
center
stretch
.item {
  place-self: center; /* <align-self> / <justify-self> */
}

Find more infos on CSS-Tricks

CSS Grid Generator

https://cssgrid-generator.netlify.app​

 

This can be a starting point, but please try it yourself first.

CSS Functions

...and custom CSS properties

Find more infos on CSS-Tricks

What are functions?

  • Reusable code blocks

Functions you already know

.element {
  background-image: url(image/background.jpg);
}

What is the function here?

.element {
  background-image: url(image/background.jpg);
}
property
function name
parameter

Doing calculations

.element {
  width: calc(100vw - 80px);
}

Custom CSS Properties

html {
  --color: orange;
}

h1 {
  color: var(--color);
}
  • Declare a variable earlier in the document, inside a selector and use it as a reference
  • Used often with calc()
  • Good for own design systems 

More infos on CSS-Tricks

Color Functions

.element {
  color: rgb(255, 0, 0);
  color: rgba(255, 0, 0, 0.5);
  color: rgb(255 0 0 / 0.5);
}

.container {
  background: hsl(100, 100%, 50%);
  background: hsla(100, 100%, 50%, 0.5);
  background: hsl(100 100% 50% / 0.5);
}

Gradient Functions

There is also radial-gradient() and repeating-radial-gradient()

html {
  background: linear-gradient(#ff00ff, #00ff00);
}

.container {
  background: repeating-linear-gradient(45deg, #ff00ff, #00ff00 15%, #ff0000 20%);
}

More infos on MDN

Filter Functions

  • brightness()
  • blur()
  • contrast()
  • grayscale()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • drop-shadow()
  • hue-rotate()

Filter Functions

.element {
  filter: blur(50%);
}
.element {
  filter: brightness(150%);
}
.element {
  filter: drop-shadow(0 2em 4px #000000);
  /* (offset-x offset-y blur-radius color) */
}

Sizing and Scaling Functions

  • scaleX()
  • scaleY()
  • scaleZ()
  • scale3d()
  • scale()
.element {
  transform: scale(0.5);
}

Sizing and Scaling Functions

  • translateX()
  • translateY()
  • translateZ()
  • translate3d()
  • translate()
.element {
  transform: translate(10px 50px);
}

Sizing and Scaling Functions

  • perspective()
  • rotateX()
  • rotateY()
  • rotateZ()
  • rotate3d()
  • rotate()
.cube {
  transform: perspective(50em) rotateY(50deg);
}

Sizing and Scaling Functions

.cube {
  transform: perspective(50em) rotateY(50deg);
}

Sizing and Scaling Functions

  • skewX()
  • skewY()
  • skew()
.element {
  transform: skew(25deg, 15deg);
}

Wanna try it yourself?

https://css-transform.moro.es

Comparison Functions

  • clamp()
  • max()
  • min()
.element {
  width: clamp(320px, 80%, 900px);
}
.minimum-of-these {
  width: max(500px, 50%);
}
.maximum-of-these {
  width: min(320px, 90%);
}

Grid Functions

  • fit-content()
  • minmax()
  • repeat()

Shape Functions

They are all used on the clip-path property for masking images.

 

  • circle()
  • ellipse()
  • polygon()
  • inset()

 

You can find more infos at MDN

How to start creating your website?

Wireframes

  • Blueprint of your website
  • Shows the structure of the website
  • Visualize without the details

Content of a wireframe

  • Content
  • Structure
  • Information Hierarchy
  • Functionality
  • Behaviour

Demo time

Advanced CSS

By Garrit Schaap

Private

Advanced CSS