Syntax | CSS cursus

Youtube totaaldemo ‐ CSS intro en tekstopmaak

Deze video maakt deel uit van een HTML + CSS totaaldemo uit de Basic Web Development playlist, die begint met de video BWD 01. HTML - deel 8: praktijkdemo

https://www.youtube.com/watch?v=5y6QDsi6uVk

Stylesheets

CSS stijlregel

CSS of Cascaded Style Sheets bestaat in essentie uit een opsomming van stijlregels met opmaak en layout. Elke stijlregel bestaat uit een selector, een property en een waarde:

selector {
  property: value;
}

Voorbeeld:

p {
  color: black;
}

→ dit selecteert alle paragrafen, en zet de tekstkleur in zwart

CSS stijlen koppelen aan HTML

inline

Je kan in theorie stijlen inline toevoegen, dus rechtstreeks in je HTML, via het style attribuut:

...
<body style="background-color: #f7ba5a">
  <p style="font-size: 18px; margin-left: 20px">
  ...

→ er is totaal geen scheiding tussen HTML en CSS code
→ gebruik van inline stijlen is verboden in deze cursus!

intern

Je kan stijlen in theorie ook intern toevoegen in een <style> blok in de <head>:

...
<head>
  ...
  <style>
    p {
      font-size: 18px;
      margin-left: 20px
    }
    body {
      background-color: #f7ba5a;
    }
  </style>
</head>
...

→ de scheiding van HTML en CSS code is al beter, maar ze staan nog steeds in hetzelfde codebestand
→ gebruik interne stijlen is verboden in deze cursus!

extern

De beste methode is een apart CSS bestand of stylesheet linken aan je HTML document:

...
<head>
  ...
  <link rel="stylesheet" href="css/styles.css">
  ...
</head>
...

Het gelinkte CSS bestand bevat dan de CSS code:

p {
  font-size: 18px;
  margin-left: 20px;
}
body {
  background-color: #f7ba5a;
}

→ dit is de juiste manier om CSS te koppelen aan je HTML
→ extern gekoppelde CSS is verplicht in deze cursus!

meerdere stylesheets

Je kan zoveel stylesheets linken als je wil:

...
<head>
  ...
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/site.css">
  <link rel="stylesheet" href="css/home.css">
  ...
</head>
...

→ dit laat toe je CSS te organiseren in meerdere bestanden

media types

Je kan aparte stijlen definiëren voor verschillende media, bv. voor schermen of printers, naargelang minimum of maximum hoogtes, breedtes, resoluties, oriëntatie enz... Een overzicht van de belangrijkste sleutelwoorden:

toestel	betekenis
`all`	standaardwaarde; gebruikt voor alle toestellen
`screen`	gebruikt voor schermen
`print`	gebruikt voor printers
`speech`	gebruikt voor screenreaders voor blinden

kenmerk	betekens
`aspect-ratio`	hoogte/breedte verhouding
`height`	hoogte
`orientation`	landscape of portrait
`resolution`	resolutie in dpi (dots per inch)
`width`	breedte

operator/prefix	betekens
`and`	AND operator
`not`	NOT operator
`,`	OF operator
`max-`	maximum
`min-`	minimum

`<link media="...">` attribuut

Je kan de media specifiëren op niveau van het CSS bestand <link media="..."> attribuut. Voorbeelden:

...
<head>
  ...
  <link rel="stylesheet" href="..."><!-- alle media types -->
  <link rel="stylesheet" href="..." media="all"><!-- ook alle media types; all is de standaardwaarde -->
  <link rel="stylesheet" href="..." media="print"><!-- enkel printers -->
  <link rel="stylesheet" href="..." media="screen"><!-- enkel schermen -->
  <link rel="stylesheet" href="..." media="print and (min-resolution: 300dpi)"><!-- enkel afgedrukt met min 300dpi -->
  <link rel="stylesheet" href="..." media="(min-width: 300px) and (max-width: 1200px)"><!-- enkel breedtes tussen 300 en 1200px -->
  <link rel="stylesheet" href="..." media="(min-width: 300px) and (max-width: 1200px)"><!-- enkel breedtes tussen 300 en 1200px -->
  <link rel="stylesheet" href="..." media="screen and (orientation: portrait)"><!-- enkel rechtop gehouden schermen -->
  <link rel="stylesheet" href="..." media="screen and (min-aspect-ratio: 16/9)"><!-- enkel brede schermen schermen -->
  ...
</head>
...

`@media` CSS blok

Je kan de media ook specifiëren op niveau van een blok CSS met @media { ... }. De vorige voorbeelden herschreven:

@media {
   /* CSS-regels voor alle mediatypes */
}

@media all {
   /* ook CSS-regels voor alle mediatypes (all is standaardwaarde) */
}

@media print {
   /* CSS-regels voor printers */
}

@media screen {
   /* CSS-regels voor schermen */
}

@media print and (min-resolution: 300dpi) {
   /* CSS-regels voor printers met een minimale resolutie van 300dpi */
}

@media (min-width: 300px) and (max-width: 1200px) {
   /* CSS-regels voor breedtes tussen 300px en 1200px */
}

@media screen and (orientation: portrait) {
   /* CSS-regels voor rechtop staande schermen */
}

@media screen and (min-aspect-ratio: 16/9) {
   /* CSS-regels voor brede schermen, minimaal 16/9 */
}

→ media types zullen we in deze cursus enkel gebruiken in het hoofdstuk CSS responsive

CSS commentaar

Commentaar in CSS wordt tussen /* en */ geplaatst:

/**
* Main styles
*
* @author Rogier van der Linde
*/

p {
  color: black; /* alle paragrafen zwart */
}

CSS code layout

Een goede CSS begint bij een degelijke layout:

elke property op aparte regels
degelijke indentatie
een spatie na elk dubbelpunt
een open regel na elk blok
properties alfabetisch gesorteerd

p { line-height:1.3; color: #333 }
 .box {
   background-color: #666;
   font-size:        12px;
   padding:          10px 20px;
 }
 @media (min-width: 800px) {
 .box {
   padding: 0;
 }
 }

p {
   color: #333;
   line-height: 1.3;
}

.box {
   background-color: #666;
   font-size: 12px;
   padding: 10px 20px;
}

@media (min-width: 800px) {
  .box {
    padding: 0;
  }
}

Om de code correct te layouten in VS Code, gebruik Shift-Alt-F (installeer de CSS formatter extensie)

Selectors

Wat volgt is maar een kort overzicht van selectors; voor een volledig overzicht zie de CSS cheatsheet

elementen selecteren

Selecteer elementen op basis van tagnaam, class- of id attribuut, of alle:

p {
  /* tag selector; selecteert <p> */
}
.message {
   /* class selector; selecteert <... class="message"> */
}
.message.error {
   /* multiple class selector; selecteert <... class="message error"> */
}
#lnk-login {
   /* id selector; selecteert <... id="lnk-login"> */
}
* {
   /* universele selector; selecteert alle elementen */
}

→ een id attribuut moet uniek zijn, dus een id selector kan maar één element selecteren
→ een class attribuut hoeft niet uniek te zijn, dus deze selector kan meerdere elementen selecteren

element toestand

Selecteer elementen in een bepaalde toestand:

a:hover {
   /* selecteert hovered link */
}
textarea:focus {
   /* selecteert focused <textarea> */
}
input[type=email]:invalid {
   /* selecteert invalid <input type="email"> */
}
input:disabled {
   /* selecteert disabled <input> */
}

→ men noemt dit ook pseudo-class selectoren; ze selecteren een heel element en worden voorafgegaan door een enkele dubbelpunt ‘:’

element deel

Selecteer een deel van een element:

a::first-letter {
   /* selecteert de eerste letter van <a> */
}
::selection {
   /* selecteert het deel geselecteerd door de gebruiker */
}
li::before {
   content: url(../img/bullet.png); /* injecteer aan het begin een afbeelding */
   /* meer properties van de nieuwe content */
}
li::after {
   content: "some text"; /* injecteer aan het einde tekst */
   /* meer properties van de nieuwe content */
}

→ men noemt dit ook pseudo-element selectoren; ze selecteren een deel van een element en worden voorafgegaan door een dubbel dubbelpunt ‘::’

voorbeeld: `::before` en `::after`

Een voorbeeld met injectie van 👉 en 👈 aan het begin en einde list items:

<ul>
   <li>item 1</li>
   <li>item 2</li>
   <li>item 3</li>
</ul>

li {
   list-style: none; /* verwijder standaardbullets */
}
li::before {
   content: "👉";
   font-size: 12px;
   margin-right: 5px;
}
li::after {
   content: "👈";
   font-size: 12px;
   margin-left: 5px;
}

element positie

Specifieer de positie van een element:

h1 + p {
   /* selecteert <p> direct volgend op een <h1> */
}
li:first-child {
   /* selecteert een <li> die de eerste child is van zijn parent */
}
#content > section {
   /* selecteert <section> direct genest in <... id="content"> */
}
tr:nth-child(odd) {
   /* selecteert oneven <tr>'s */
}
section:nth-child(3n+1) {
   /* selecteert <section>'s nummer 1, 4, 7... */
}

element attribuut

Selecteer elementen op basis van attribuut:

select[multiple] { ... }    /* "heeft", b.v. <select multiple> */
input[type=button] { ... }  /* "is", b.v. <input type="button"> */
a[title*=flower] { ... }    /* "bevat", b.v. <a title="...flower..."> */
img[src^=https://] { ... }  /* "begint met", b.v. <img src="https://..."> */
a[href$=".pdf"] { ... }     /* "eindigt met", b.v. <a href="....pdf"> */

selectors combineren

Combineer selectors:

p.message {
   /* tag-class selector; selecteert <p class="message"> */
}
nav#mainmenu {
   /* tag-id selector; selecteert <nav id="mainmenu"> */
}
#mainmenu.open {
   /* id-class selector; selecteert <... id="mainmenu" class="open"> */
}

selectors groeperen

Groepeer verschillende selectors met dezelfde stijlen in een komma-lijst:

input {
   color: blue;
}
#mainmenu a:hover {
   color: blue;
}
p.formpar {
   color: blue;
}

input, #mainmenu a:hover, p.formpar {
   color: blue;
}

selectors nesten

Een spatie betekent genest in (lees van rechts naar links):

#leftcol p { 
   /* paragrafen genest in het element met id="leftcol" */
}
nav li.active a { 
   /* links genest in list items met class="active" genest in nav element */
}

Properties

Property lijst

Stijlen bestaan uit lijsten property - waarde paren:

selector {
   property_1: waarde_1;
   property_2: waarde_2;
   property_3: waarde_3;
   ...
}

Voorbeeld:

p {
   color: red;
   font-size: 10px;
   margin-bottom: 6px;
}

properties groeperen

Sommige gerelateerde properties kunnen gegroepeerd worden in een enkele waarde. Beide fragmenten zijn b.v. gelijk:

body {
   background-image: url(../img/bg.jpg);
   background-position: right;
   background-repeat: repeat-y;
}
.box {
   margin-top: 6px;
   margin-right: 25px;
   margin-bottom: 9px;
   margin-left: 15px;
}

body {
   background: url(../img/bg.jpg) repeat-y right; /* image, repeat, position */
}
.box {
   margin: 6px 25px 9px 15px; /* top, right, bottom, left */
}

propertywaarden met spaties

Rond propertywaarden met spaties moeten quotes staan om verwarring te vermijden:

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

→ rond andere waarden zijn quotes niet nodig:

body {
   background-image: url(img/bg.jpg);
}

Prioriteit, specificiteit en overerving

De uiteindelijke stijl van een element wordt bepaald door verschillende factoren:

het element kan matchen met verschillende selectoren
stijlen kunnen meermaals gedefinieerd zijn in meerdere bestanden
sommige stijlen kunnen overerven van de parent (b.v. lettertype)
stijlen hebben standaardwaarden afhankelijk van de gebruikte browser

De "winnende" stijl wordt bepaald door (in volgorde, prioriteit van hoog naar laag):

stijlen gemarkeerd met !important
inline stijlen gedefinieerd in het style attribuut
het gewicht of de specificiteit van de selector (zie verder)
de positie van de CSS regel
stijlen overgeërfd van de parent (zie verder)
defaultwaarde van de browser

Specificiteit berekenen

De specifiteit wordt berekend als een getal dat de som is van:

aantal id selectoren x 100
aantal class, pseudo-class en attribuut selectors x 10
aantal elementen and pseudo-elementen x 1

Enkele voorbeelden:

selector	berekening	specificiteit
`p`	0 - 0 - 1	1
`p.test`	0 - 1 - 1	11
`p.test1.test2`	0 - 2 - 1	21
`#navbar ul li:active`	1 - 1 - 2	112
`#navbar ul li::before`	1 - 0 - 3	103
`#navbar p#demo`	2 - 0 - 1	201

Je kan de specificiteit trouwens inspecteren met je browser tools:

Voorbeeld

<div class="container">
   <p>gewone tekst</p>
   <p class="message" style="color: orange;">belangrijke mededeling</p>
   <p class="message">gewone mededeling</p>
   <p id="special" class="message">speciale mededeling</p>
   <p class="override message" style="color: yellow;">uitzonderlijke mededeling</p>
</div>

.container {
   color: brown;
}

.message {
   color: blue; /* specificiteit: 0-1-0 */
   font-size: 12px; /* specificiteit: 0-1-0 */
}

.container .message {
   color: green; /* specificiteit: 0-2-0 */
   font-size: 28px; /* specificiteit: 0-2-0 */
}

#special {
   color: red; /* specificiteit: 1-0-0 */
}

.override {
   color: purple !important; /* specificiteit: 0-1-0 + !important */
   font-size: 10px !important; /* specificiteit: 0-1-0 + !important */
}

De uiteindelijke stijl van elk element:

element	lettergrootte	kleur
gewone tekst	`16px`: browser default	`brown`: overgeërfd van container
belangrijke mededeling	`28px`: `.container .message` selector	`orange`: `style` attribuut
gewone mededeling	`28px`: `.container .message` selector	`green`: `.container .message` selector
speciale mededeling	`28px`: `.container .message` selector	`red`: `#special` selector
uitzonderlijke mededeling	`12px`: `!important`	`purple`: `!important`

stijlen inspecteren

Er zijn twee plaatsen in de inspector waar je kan achterhalen hoe een stijl tot stand gekomen is, n.l. Styles en Computed. Je vindt telkens de winnende stijl bovenaan:

Browser inspector gebruiken

CSS inspecteren

Inspecteer een element en bekijk de CSS eigenschappen:

Stijl uitschakelen

Schakel stijlen tijdelijk in en uit met de checkboxes:

Toegepaste stijlen inspecteren

Ontdek welke stijl uiteindelijk van toepassing is, en waarom:

Element state inschakelen

Schakel element states als hover en focus in:

Box model inspecteren

Bekijk afmetingen en diktes van border, margin en padding:

Andere waarde uitproberen

Experimenteer door andere property waarden uit te proberen:

Properties filteren

Vind snel een property via het zoekvenster:

Stijlregel toevoegen

Experimenteer door nieuwe stijlregels toe te voegen:

HTML node verwijderen

Debug een fout door een HTML node tijdelijk te verwijderen:

01. CSS syntax