CSS

CSS

CSS

Style language of the web: defines layout and style of HTML pages

Applying style to an HTML element

<h1 style="color: grey; font-size: 30px">Hello</h1>

Including stylesheets

usually inside the head:

<link rel="stylesheet" href="style.css" />

CSS example

/* comment */
h1 {
  font-family: sans-serif;
  color: grey;
}

#home-button {
  color: white;
}

CSS syntax

• selectors
• properties

CSS selectors

• universal selector: *
• tag selector: h1
• class selector: .important
• ID selector: #home-button

CSS selectors: priority

If two CSS properties are at odds with each other, the property that is applied is:

• the property that has a more specific selector
• or, with equal specificity, the CSS statement that occurs last in the code

Colors

Colors

h1 {
  color: red; /* text color */
  background-color: blue; /* background color */
}

Specifying colors

• default colors
  e.g. grey, blue, lightblue, ...
• RGB definition (red-green-blue)
  e.g. rgb(255, 128, 128)
• HEX definition
  e.g. #ff8080
• HSL definition
  (hue, saturation, lightness)
  e.g. hsl(180, 60%, 70%)

Font

Font

p {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-style: italic;
  font-weight: bold;
  text-decoration: underline;
  text-align: center;
}

font-family

we can specify multiple font families; the browser uses the first one that is available

p {
  font-family: Arial, sans-serif;
}

Three generic font families that are available in every browser:

serif, sans-serif, monospace

font-size

possible units:

• px: "pixel"
• %: percentage relative to the surrounding text
• em: relative to the surrounding text
• rem: relative to the font size of the html element

common default font size in browsers: 16px

line-height

common default line height in browsers: 1.2

is often set to bigger values, e.g. 1.5

font-style

only used for italic font

h1 {
  font-style: italic;
}

font-weight

possible values:

• 100
• 200
• 300 (or: light)
• 400 (or: regular)
• 500
• 600 (or: semibold)
• 700 (or: bold)
• 800
• 900

text-decoration

h1 {
  text-decoration: underline, overline, line-through;
}

text-align

• center
• justify
• left
• right
• start
• end

Units of length

Units of length

px, em, rem, %, vh, vw

device pixel ratio

formerly:
1px = one pixel on the screen

today:
e.g. on iPhone 4: 1px = two pixels on the screen (device pixel ratio = 2)

can be queried via the JavaScript variable devicePixelRatio

rem

rem = font size of the html element

default size in browsers: 1rem = 16px

vh, vw

1vh = 1% of the viewport height

1vw = 1% of the viewport width

CSS resets

CSS resets

reset: stylesheets which unify basic styles across browsers:

• normalize.css: website, CDN
• sanitize.css: based on normalize - website, CDN
• reboot: based on normalize, acts as a basis for bootstrap - website, CDN

CSS libraries

CSS libraries

common CSS libraries:

• Bootstrap: website, CDN for CSS, CDN for JS
• Tailwind: website

simple, basic CSS library:

• Picnic CSS: website, CDN

Variables

Variables

defining CSS variables:

:root {
  --primary-color: #1565c0;
}

using variables:

h1 {
  color: var(--primary-color);
}

button {
  background-color: var(--primary-color);
  color: white;
}

Inline elements and block elements

Inline elements and block elements

inline elements:

• arranged next to each other
• as wide as their content
• e.g. a, em, strong, (img)

block elements:

• arranged underneath each other
• as wide as possible
• e.g. h1, ul, li, p

span and div

span = generic inline element

div = generic block element

Box model

Box model

"layers" of block elements from innermost to outermost:

• content
• padding
• border
• margin

Box model

example: two boxes

Box model

sizing the content:

• height / width
• min-height / min-width
• max-height / max-width

if we specify a percentage amount (e.g. width: 50%) the size is relative to the parent element

Box model

By default the attributes height, width, ... apply to the content (without padding or border)

In modern CSS we often set:

* {
  box-sizing: border-box;
}

This means these attributes will refer to the total size (including padding and border, not including margin)

Setting padding and margin

• setting all four padding values to the same:
  padding: 10px;
• setting all four padding values individually:
  padding: 10px 20px 30px 40px (top - right - bottom - left)
• setting vertical and horizontal padding:
  padding: 10px 20px; (top and bottom - left and right)
• setting horizontal margin automatically (horizontal centering): margin: 10px auto;
• setting padding individually:
  padding: 10px; padding-left: 20px;

Box model

border (example): border: 1px solid blue

rounded corners: border-radius: 5px

Margin and padding on inline elements

Note: vertical margin and padding will not influence the positioning of inline elements (and may cause overlaps)

Example: horizontal centering

div {
  width: 800px;
  margin: auto;
}

div {
  max-width: 800px;
  margin: auto;
}

Example: full height body

By default the document body will be ass tall as its content

If the body should take up the entire screen height:

html {
  height: 100%;
}
body {
  height: 100%;
}

Tables and cell borders

By default every cell in a table has its own border

"collapsing" the borders of adjacent cells:

table {
  border-collapse: collapse;
}

Overflow

Overflow

default behavior if a child element is taller or wider than its parent:

the child will flow out of the parent element

Overflow

to display scroll bars if needed:

#parent {
  overflow: auto;
}

Overflow - example

example: display a background for the entire page by making the body take the full height, but display scrollbars if its content is more than that

body {
  height: 100vh;
  overflow: auto;
  background-color: lightgrey;
}

Overflow and the body element

special case: the body element always behaves like overflow: auto;

Verbreitete CSS Reset-Deklarationen

Box-sizing

* {
  box-sizing: border-box;
}

Body margin

Der Body margin (Standard: 8px) wird oft auf 0 gesetzt - z.B. damit eine Navigationsleiste ganz oben angezeigt werden kann

body {
  margin: 0;
}

Fonts

simple sans-serif font declaration:

body {
  font-family: sans-serif;
}

default sans-serif font declaration in Bootstrap / Reboot - includes native fonts for various platforms:

body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans',
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji' !default;
}

CSS styling examples

Body height

make the body cover the whole screen (e.g. for setting the background):

html {
  height: 100%;
}
body {
  height: 100%;
  padding: 0;
}

Button

example styled button:

button {
  background-color: #0074d9;
  color: #ffffff;
  padding: 0.5em 1em;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

Containers

fluid container similar to that of bootstrap:

.container-fluid {
  padding-left: 12px;
  padding-right: 12px;
}

Containers

container similar to that of bootstrap:

.container {
  padding-left: 12px;
  padding-right: 12px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container {
    width: 720px;
  }
}
/* ... (more media queries) ... */

Containers

default viewport widths and container sizes in bootstrap:

• 576px → 540px
• 768px → 720px
• 992px → 960px
• 1200px → 1140px
• 1400px → 1320px

Grid

simple example from Picnic CSS:

.flex {
  display: flex;
  flex-wrap: wrap;
}

Flexbox

Display property

possibilities:

• display: block
• display: inline
• display: none
• display: flex

Flexbox

Simple possibility to arrange elements underneath each other or next to each other

Flexbox properties

container:

• flex-direction
• flex-wrap
• justify-content
• align-content
• align-items

items:

• flex-basis
• flex-grow

Flexbox

#container {
  display: flex;
  flex-direction: row;
}

#container {
  display: flex;
  flex-direction: column;
}

Flexbox

Example: page layout with navbar on the side and main area

body {
  display: flex;
  flex-direction: row;
}
body > nav {
  flex-basis: 5em;
}
body > main {
  flex-grow: 1;
}

Flexbox

Example: article element with header and scrollable main area

article {
  height: 240px;
  display: flex;
  flex-direction: column;
}
article > header {
  height: 48px;
}
article > .main-content {
  flex-grow: 1;
  overflow-y: auto;
}

Flexbox

css-tricks.com

Media queries

Media queries

possibility to query the screen size and orientation (amongst others)

Media queries

.menu {
  display: flex;
  flex-direction: column;
}

@media (min-width: 800px) {
  .menu {
    flex-direction: row;
  }
}

Media queries

@media (orientation: landscape) {
  .layout {
    flex-direction: row;
  }
}

Media queries

@media (min-width: 576px) {
  /* small screen */
}

@media (min-width: 768px) {
  /* medium screen */
}

/* ... */

Media queries

common breakpoints (roughly every 200px):

Exercises

• Google clone
• Chat application

Advanced CSS selectors

Advanced CSS selectors

• attributes
• sub-elements
• child elements
• pseudo classes
• pseudo elements

Attributes

input[type='checkbox'] {
  /* ... */
}

Sub elements and child elements

style links occuring somewhere in the header:

header a {
  /* ... */
}

style a nav which is a direct child of body:

body > nav {
  /* ... */
}

Pseudo classes

Pseudo classes start with a colon:

a:hover {
  text-decoration: underline;
}
button:disabled {
  background-color: lightgrey;
}
tr:nth-child(2n) {
  background-color: grey;
}
tr:hover:nth-child(n) {
  background-color: lightgreen;
}

Pseudo classes in forms

• :checked
• :empty
• :valid
• :invalid
• :required

Pseudo classes for links, buttons, ...

• :hover
• :visited
• :active

Pseudo classes for ordered children

• :first-child
• :last-child
• :nth-child(2n)

Pseudo elements

Pseudo elements allow for adding additional HTML elements via CSS:

.todo-item.completed::before {
  content: '✓';
}

nav button[aria-haspopup='true']::after {
  content: '▾';
}

Shadow

Shadow

shadow example:

.shadow {
  box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 16px;
}

• horizontal offset: 0px
• vertical offset: 8px
• blur radius: 16px
• color: rgba(0, 0, 0, 0.15) (transparent black)

Positioning

Absolute positioning

Example: a div should be positioned 10px from the bottom right corner of its parent

Absolute positioning

<div id="outer">
  <div id="inner"></div>
</div>

#outer {
  position: relative;
}

#inner {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

Positioning

• position: absolute
• (position: relative)
• (position: fixed)
• (position: static: default value)

Positioning

Example for position: relative: superscript or subscript

Beispiel

Facebook clone with chat

Grid

Grid

example: layout with header and sidebar

#layout {
  display: grid;
  height: 100vh;
  grid-template-areas: "header header" "sidebar main";
  grid-template-rows: auto 1fr;
  grid-template-columns: 200px 1fr;
}

Grid

placing contents:

#header {
  grid-area: header;
}

#main {
  grid-area: main;
}

/* ... */

Transformations

Transformations

#element1 {
  transform: translsate(100px, 0);
}

Transformations

#element2 {
  transform: translate(100px, 0) rotate(45deg);
  transform-origin: 0 0;
}

element will be rotated by 45 degrees first, then translated to the right by 100 pixels

center of rotation: top left corner of the element

Transitions

Transitions

the change of some CSS properties can be animated:

#animated {
  transition: background-color: 3s, margin-top: 1s;
}

Example: transition on hover

div.box {
  width: 40px;
  height: 40px;
  background-color: blue;
  transform: rotate(0);
  transition: transform 9s, background-color 9s;
}
div.box:hover {
  background-color: red;
  transform: rotate(360deg) scale(2);
  transition: transform 0.5s, background-color 0.5s;
}

Example: game

div {
  width: 40px;
  height: 40px;
  background-color: blue;
  transform: translate(0, 0) rotate(0);
  transition: transform 9s, background-color 9s;
}
div:hover {
  background-color: red;
  transform: translate(200px, 0) rotate(360deg);
  transition: transform 3s, background-color 3s;
}

Task: dropdown

Dropdown that becomes active on button click

HTML template:

<div id="dropdown">dropdown</div>
<button
  id="dropdown-button"
  onclick="dropdown.className = 'active'"
>
  menu
</button>

Task: overlay on hover

Task: Animating spoon and fork

Note: we are using CSS transformations, not SVG transformations; we must set transform-origin separately