Introductie CSS

Pilaren van het web

CSS is voor presentatie

Voor wanneer je visueel de HTML anders wilt weergeven:

  • Rechts uitlijnen
  • (Achtergrond) kleur
  • Alignering
  • En zo veel meer...

Wat is CSS

1

Wat is CSS?

2

Basis syntax

De pilaren van het web

JavaScript

Gedrag

CSS

Uitzicht

HTML

Inhoud

CSS

Cascading Style Sheet

Cascade (nl: vallen)

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

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

1

Inline (bad practice)

2

Embedded 

3

Externe Stylesheet

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

<!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="nl">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/main.css">
  </head>

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

main.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.

#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>

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>

bepaalde state

Meerdere declarations

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

body {
  background: green;
  color: blue;
  width: 30%;
  height: 100px;
  text-align: center;
  margin-top: 100px;
  margin-bottom: 20px;
  margin-left: 200px;
}

Let's play!

http://m.zhaojishun.cn/cssgame/

Oefening @Campus

De browser inspector

Uitdaging

Carni vs Veggi

(Enkel voor studenten met voorkennis)

Meerdere declaraties

Screencast - 03 - Introductie tot CSS

By Evelien Rutsaert

Made with Slides.com

Screencast - 03 - Introductie tot CSS

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

  • 218

More from Evelien Rutsaert