Welcome
to CSS Friday

Web development fundamentals

2022

Disclaimer

I am a programmer for more than 20 years
Sometimes I might be a bit too fast, stop me!
If you don't understand something, ask me!
There are no stupid questions

Client

Server

HTML

Structures text semantically
Visual appearance is not part of HTML

<p>

</p>

My Text

element

opening tag

content

closing tag

element name

<!DOCTYPE html>
<html>
  <head>
    <title>Hello Internet</title>
  </head>
  <body>
    <p>Hello World!</p>
  </body>
</html>

Paths on computers - Recap

Absolute paths

https://www.ju.se/somefolder/somefile.html

Scheme

URL (Uniform Resource Locator)

host

path

filename

Relative paths

garrit.png

images/garrit.png

./images/garrit.png

/images/garrit.png

../garrit.png

File is located in same folder as current page

File is located in images in current folder

Same as above

File is located in the image folder on the root

File is located in the folder one level up

Don't use spaces or umlauts in your paths!

Semantic

In computer science, the term semantics refers to the meaning of language constructs, as opposed to their form (syntax).

<div>
  <div>
    <ul>
      <li>Home</li>
      <li>NMD</li>
    </ul>
  </div>
</div>
<div>
  <div>
    <div>A long text about NMD...</div>
    <div>Some more text about Web and User Interface Design!</div>
  </div>
  <div>About me</div>
</div>
<div>
  Made with ❤️ in Jönköping
</div>

<header>
  <nav>
    <ul>
      <li>Home</li>
      <li>NMD</li>
    </ul>
  </nav>
</header>
<main>
  <section>
    <article>A long text about NMD...</article>
    <article>Some more text about Web and User Interface Design!</article>
  </section>
  <aside>About me</aside>
</main>
<footer>
  Made with ❤️ in Jönköping
</footer>

Let's see HTML code in the wild...

Open the Browser (best Firefox or Chrome)
Surf to your favourite Website
Right-click on it and choose View Page Source

What do you see?

Let's see HTML code in the wild...

Open the Browser (best Firefox or Chrome)
Surf to your favourite Website
Right-click on it and choose Inspect

What do you see now?

CSS

Cascading Style Sheets
Styles the HTML Website
Describes how HTML elements will be displayed

Box model

<footer>...</footer>

<p>...</p>

<h1>...</h1>

Box model

How does it work?

Elements can be selected via selectors and have attributes.

Attributes

background-color
background-image
background
border-width
border-style
border-color
border

Look

float
margin
padding
position

Layout

color
text-align
text-decoration
font-family
font-size
font-style
font-weight

Text

CSS Reference

developer.mozilla.org/en-US/docs/Web/CSS/Reference

Or just google: CSS reference

How to use color in code?

Color mixing

Screens use additive color mixing

FF

#

FF

#

FF

#

Red

Green

Blue

FF

#

Red

Green

Blue

255

00 #

Red

Green

Blue

FF

00 #

Red

Green

Blue

255

00 FF

00 #

Red

Green

Blue

255

00 FF

#

Red

Green

Blue

255

Let's talk about numbers...

Hexadecimal

Decimal

Binary

2

10

16

0	1	2	3	4	5	6	7	8	9
0	1	2	3	4	5	6	7	8	9

10	11	12	13	14	15
A	B	C	D	E	F

Hexadecimal

16

But we have values from 0 to 255...?!

FF

We have two values, each have 16 distinct states

16 * 16 = 256

256?

From 0 to 255 are 256 distinct states, including 0

256?

A byte can represent 256 states and is

a unit of digital information in computers

Color

A color consists of 3 bytes.

1 byte per color channel.

100%

255

50%

127

...

MDN Developer Color Picker

Try it out yourself

RGB & RGBA

Defines also the alpha (a) channel which is responsible for transparency
R, G and B are values from 0 - 255
A is a value between 0.0 - 1.0

.content {
  background-color: rgba(255, 255, 255, 0.5);
}

Some more resources...

https://css-tricks.com/nerds-guide-color-web/

How to use units in css?

Absolute units

Centimeters

Millimeters

Quarter-millimeters

Inches

Picas

Points

Pixels

Relative units

em
ex
ch
rem
lh
vw
vh
vmin
vmax

Parent font size, or font size of the element

x-height of the element's font

Measure of the glyph 0 of the element's font

Font size of the root element

Line height of the element

1% of the viewport's width

1% of the viewport's height

1% of the viewport's smaller dimension

1% of the viewport's larger dimension

Relative units

Percentage of your parents Element

More resources

CSS values and units on MDN

Select

an Element

<h1>My headline</h1>

h1 {
  font-size: 10em;
}

Element selector

<p>I ❤️ HTML and CSS</p>

p {
  color: #ff00ff;
}

Element selector

<div class="content">I ❤️ HTML and CSS</div>

.content {
  font-size: 2em;
}

Class selector

<div class="content blue">I ❤️ HTML and CSS</div>

.content {
  font-size: 2em;
}
.blue {
  background-color: #0000ff;
}

Multiple class selectors

<input id="name" placeholder="Your name"></input>

#name {
  font-size: 1.5em;
  color: #00ff00;
}

Id selector

<div class="content blue">I ❤️ <span>HTML</span> and <span>CSS</span></div>

.content > span {
  font-size: 1.5em;
  color: #00ff00;
}

More advanced selectors

All p elements where parent is div

Select multiple elements

All p elements that are next to ul elements

All elements

All p-elements with class

Is selected when the element gets focus

Is selected when the element is hovered

Selects all p-elements that are the first child of their parent

div > p
p, div
ul + p
*
p.myClass
.class:focus
.class:hover
p:first-child
...

CSS Selector Playground

https://www.w3schools.com/cssref/trysel.asp

Where do I put my CSS code?

In an external CSS file
Inside the HTML (not recommended)

HTML with external CSS file

<!DOCTYPE html>
<html>
  <head>
    <title>Hello Internet</title>
    <link rel="stylesheet" type="text/css" href="example.css" />
  </head>
  <body>
    <h1>Hello World!</h1>
    <p class="content blue">This is some content! And my name is <span id="name">Garrit</span>!</p>
  </body>
</html>

HTML with inline CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Hello Internet</title>
    <style>
      .content {
        font-size: 2em;
      }
      .blue {
        background-color: #0000ff;
      }
      #name {
        font-size: 3em;
        color: #00ff00;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p class="content blue">This is some content! And my name is <span id="name">Garrit</span>!</p>
  </body>
</html>

Live Demo

code.visualstudio.com

VS Code has a nice little helper...

Create a new HTML file
Type ! and press enter

index.html?

Most Webserver will automatically select the file that is named index.html as default page to deliver.

Welcome to CSS Friday

Web development fundamentals

Disclaimer

HTML

Paths on computers - Recap

Absolute paths

Relative paths

Don't use spaces or umlauts in your paths!

Semantic

Let's see HTML code in the wild...

Let's see HTML code in the wild...

Let's see HTML code in the wild...

CSS

Box model

Box model

How does it work?

Attributes

Look

Layout

Text

CSS Reference

How to use color in code?

Color mixing

Screens use additive color mixing

FF

FF

FF

#

FF

FF

FF

#

FF

FF

FF

#

FF

FF

FF

#

00

00

00

#

FF

00

00

#

00

FF

00

#

00

00

FF

#

Let's talk about numbers...

Hexadecimal

Decimal

Binary

2

10

16

Hexadecimal

16

But we have values from 0 to 255...?!

FF

We have two values, each have 16 distinct states

16 * 16 = 256

256?

From 0 to 255 are 256 distinct states, including 0

256?

A byte can represent 256 states and is

a unit of digital information in computers

Color

A color consists of 3 bytes.

1 byte per color channel.

Try it out yourself

RGB & RGBA

Some more resources...

Welcome
to CSS Friday