web/03

CSS Introductie

wat, hoe linken, selectoren

Pilaren van het web

CSS is voor presentatie

Voor wanneer je visueel de HTML anders wilt weergeven:

  • Breedte aanpassen van iets
  • font-grootte
  • (Achtergrond) kleur
  • Alignering
  • En zo veel meer...

De pilaren van het web

Wat is CSS

CSS

  • Cascading Style Sheet
  • Cascade (nl: vallen)
  • De meest prachtige taal dat je in dit graduaat gaat zien 😇

CSS-regelset

body {
  background: pink;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>

  <body>
    <p>tekst</pp>
  </body>
</html>

CSS-regelset

body {
  background: pink;
}

Selector

Declaration

CSS-regelset

body {
  background: pink;
}

Property (eigenschap)

Value (waarde)

CSS-regelset

/* Dit is commentaar */
body {
  background: pink;
}

Je kan ook commentaar schrijven in CSS

CSS toevoegen

CSS toevoegen

Verschillende manieren:

  1. Inline (bad practice)
  2. Embedded (op pagina niveau)
  3. Externe Stylesheet (op websiteniveau)

Inline CSS

👎 Bad practice 😒

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>

  <body style="background: pink;">
    <p>tekst</pp>
  </body>
</html>

1

👎 Bijna altijd een bad practice voor performance, behalve in individuele cases 😒

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
      body {
        background-color: pink;
      }
    </style>
  </head>

  <body>
    
    <p>tekst</pp>
  </body>
</html>

Embeded CSS

2

body {
  background: pink;
}

index.html

css/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
  </head>

  <body>...</body>
</html>

style.css

Extern stylesheet

3

Selectoren

Type-selector

Selecteer op basis van het HTML-element

h1, h2, p {
  background: red;
}
<h1>Mijn titel</h1>
<h2>Mijn titel</h2>
<h3>Mijn titel</h3>
<h4>Mijn titel</h4>
<h5>Mijn titel</h5>
<h6>Mijn titel</h6>
<p>Een paragraaf</p>

Class-selector

Selecteer op basis van een class attribuut: "."-selector.

.bg-red,
.my-class {
  background: red;
}
<h1 class="bg-blue">Mijn titel</h1>
<h2 class="bg-blue">Mijn titel</h2>
<h3 class="bg-red">Mijn titel</h3>
<h4 class="bg-red">Mijn titel</h4>
<h5 class="bg-blue">Mijn titel</h5>
<h6 class="bg-blue">Mijn titel</h6>
<p class="my-class">Een paragraaf</p>

ID-selector

Selecteer op basis van een id attribuut: "#"-selector.

👎 Bad practice

#my-unique-id-3,
p {
  background: red;
}
<h1 id="my-unique-id-3">Mijn titel</h1>
<h2>Mijn titel</h2>
<h3>Mijn titel</h3>
<h4>Mijn titel</h4>
<h5>Mijn titel</h5>
<h6>Mijn titel</h6>
<p>Een paragraaf</p>

Combinatie selectors

Combineer elke selector dat je maar wilt.

ul a {
  background: green;
}
<h1 id="my-unique-id-3">Mijn titel</h1>
<p>Een paragraaf met <a href="http://fb.com">een link</a></p>

<ul>
  <li>Een beetje tekst</li>
  <li>Een beetje tekst met <a href="http://fb.com">een link</a></li>
  <li>Een beetje tekst</li>
  <li>Een beetje tekst</li>
</ul>

Attribute selector

Selecteer op basis van een attribuut.

a[target="_blank"] {
  background: green;
}

<a href="http://fb.com" >een link</a>
<a href="http://fb.com" target="_blank">een link</a>
<a href="http://fb.com">een link</a>
<ul>
  <li>Een beetje tekst</li>
  <li><a href="http://fb.com">een link</a></li>
  <li><a href="http://fb.com" target="_blank">een link</a></li>
</ul>

Attribute selector

Selecteer op basis van een attribuut.

p[class],
a[class]{
  background: green;
}

<p class="feest">een link</a>
<a id="yes" href="http://fb.com" target="_blank">een link</a>
<a class="amai" href="http://fb.com">een link</a>

Pseudo class selector

Selecteer op basis van een attribuut.

a:hover {
  color: green;
}

<p class="feest">een link</a>
<a id="yes" href="http://fb.com" target="_blank">een link</a>
<a class="amai" href="http://fb.com">een link</a>

Let's play!

Oefening @Campus

De browser inspector

Uitdaging

Carni vs Veggi

(Enkel voor studenten met voorkennis)

Meerdere declaraties

Meerdere declarations

Het is mogelijk om binnen 1 selector meerdere declarations mee te geven!

Experimenteer al eens met deze properties!

body {
  background: green;
  color: blue;
  text-align: center;
}

DigExp - WEB/03 - CSS Intro

By Lecturer GDM

DigExp - WEB/03 - CSS Intro

Wat is CSS? CSS toevoegen, Selectoren, meerdere declarations.

  • 221