CSS

Intro, opbouw en selectoren

WEB ESSENTIALS

Pilaren van het web

RECAP

De pilaren van het web

RECAP

De pilaren van het web

  • HTML: Content en structuur
  • CSS: Opmaak en styling
  • Javascript: Functionaliteit en interactie

Wat is CSS?

CSS

= De taal waarmee je opmaak en layout toevoegt aan je site

  • Cascading Style Sheets
  • "Cascading" omdat styles watervalsgewijs worden ingelezen (later daarover meer)
  • Gebruik je voor kleuren, lettertypen, groottes, animaties...

Anatomie CSS

Opbouw 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>
  </head>

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

index.html

body {
  background: pink;
}

main.css

CSS en HTML zijn altijd gelinkt. In css selecteren we eerst het stukje html dat we willen opmaken, daarna voegen we code voor opmaak toe

Selector

body {
  background: pink;
}

Opbouw CSS

Css code bestaat uit twee belangrijke delen:

  • Selector: Selecteert het stukje html dat we willen opmaken
  • Declaration: De opmaak die we willen toevoegen

Declaration

body {
  background: pink;
}

Opbouw CSS

Een declaratie bestaat ook weer uit twee delen:

  • Property: De eigenschap die we willen aanpassen (kleur, achtergrondkleur, font, breedte, grootte...)
  • Value: De waarde die we meegeven aan de property

Property

Value

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

Opbouw CSS

Binnen een selector kan je meerdere declaraties toevoegen

CSS toevoegen

CSS op HTML toepassen

Er zijn drie manieren om CSS toe te passen op je HTML bestand:

  1. Inline
  2. Intern/embedded
  3. Externe stylesheet

Inline CSS

Je schrijft CSS-regels in je HTML bestand

  • Direct in het HTML-element zelf
  • Via een style-attribuut
  • Onhandig, niet herbruikbaar en ononverzichtelijk
<p style="color: blue; font-size: 18px;">Blauwe tekst</p>

 👎 BAD PRACTICE

Interne CSS

Je schrijft CSS-regels in je HTML bestand

  • In de <head> van je HTML bestand
  • Je plaatst je CSS tussen <style> tags
  • Niet goed voor performance
<head>
  <style>
    p { color: blue; font-size: 18px; }
  </style>
</head>

 👎 BAD PRACTICE

Externe CSS

Je maakt een apart CSS bestand waarnaar je linkt in je HTML file

  • Alle CSS schrijf je in een aparte file, bv main.css
  • Je linkt de file in de <head> van de html-file via het <link> element
  • Twee attributen: "rel" en "href"
<!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/main.css">
  </head>

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

😍 GOOD PRACTICE

index.html

body {
  background: pink;
}

main.css

Selectoren

Selectoren

Om een HTML element op te maken, moeten we deze eerst selecteren met een selector. Er zijn 6 soorten selectors:

  1. Type selector
  2. Class selector
  3. (ID selector)
  4. Attribute selector
  5. Pseudo class selector
  6. Combinatie selectors

Type selector

Je selecteert rechtstreeks een bepaalde HTML tag

  • Je schrijft de naam van de HTML tag en laat de brackets (< >) weg
  • Alle tags krijgen dan dezelfde opmaak, in dit voorbeeld zullen alle paragrafen blauw zijn
<h1>Welkom op mijn site!</h1>
<p>Hier vertel ik wat over mezelf</p>
<p>Hier vertel ik over mijn skills</p>
<p>Hier vertel ik over mijn opleiding</p>

index.html

main.css

h1 {
  color: red;
}

p {
  color: blue;
}

Class selector

Je selecteert elementen die een bepaalde class hebben gekregen

  • Op elke HTML tag kan je een class attribuut toepassen
  • Je kan hier een eigen, herkenbare naam meegeven (altijd Engels)
  • In CSS selecteer je de class door "." toe te voegen voor je classname
<h1>Welkom op mijn site!</h1>
<p>Hier vertel ik wat over mezelf</p>
<p class="text-small">Hier vertel ik over mijn skills</p>
<p class="text-small">Hier vertel ik over mijn opleiding</p>

index.html

main.css

.text-small {
  font-size: 0.8rem;
}

Class selector

Je kan meerdere classes toevoegen op één HTML element

<h1>Welkom op mijn site!</h1>
<p>Hier vertel ik wat over mezelf</p>
<p class="text-small">Hier vertel ik over mijn skills</p>
<p class="text-small red">Hier vertel ik over mijn opleiding</p>

index.html

main.css

.text-small {
  font-size: 0.8rem;
}

.red {
  color: red;
}

ID selector

In de praktijk wordt de ID selector nooit gebruikt maar voor
de volledigheid lichten we hem kort toe

  • In HTML kan je ook een ID toevoegen ipv een class
  • Dit is een unieke naam die je geeft aan een element
  • Kan je niet meer hergebruiken in je HTML document
<p id="uniek">Een stukje tekst</p>

index.html

main.css

#uniek {
  color: blue;
}

Attribute selector

Selecteer een element op basis van een attribuut

  • Je plaats de naam en optioneel de waarde van het attribuut tussen vierkante haakjes (square brackets). 
<a href="link1.html">Een link</a>
<a href="link2.html" target="_blank">Een andere link</a>

index.html

main.css

a[target="_blank"] {
  color: purple;
}

/*Enkel de a-elementen binnen met een "_blank" attribuut zullen de paarse kleur krijgen*/

Pseudo-class selector

Met een pseudo class selector kan je een status van een element selecteren, bijv:

  • :hover als je met de muis beweegt over een element of link
  • :visited als je een link reeds bezocht hebt
  • Bekijk hier de volledige lijst van pseudo-classes
<a href="link.html">Een link</a>

index.html

main.css

a:hover {
  color: blue;
}

a:visited {
  color: purple;
}

Selectoren combineren

Je kan ook meerdere selectors combineren

  • Descendant selector: Selecteer tags binnen andere tags
  • Andere combo selectors vind je hier terug
<p>Dit is een tekst met <a href="link.html">een link</a></p>

<a href="link.html">Dit is een andere link</a>

index.html

main.css

p a {
  color: red;
}

/*Enkel de a-elementen binnen een p-element zullen de rode kleur krijgen*/

Comments in CSS

Comments in CSS

Je kan ook commentaar schrijven in CSS

  • Door je tekst te plaatsen tussen /*...*/ (Shortcut: Command + Shift + /)
  • Handig om je file te structureren
  • Of om code tijdelijk "uit te schakelen"
/*Deze tekst is een comment*/

h1 {
  color: red;
}

p {
  color: blue;
}

4. CSS: introductie

By Lecturer GDM

4. CSS: introductie

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

  • 310

More from Lecturer GDM