//// Referentie: https://www.w3schools.com/css/default.asp

Stijl invoegen in HTML kan op 3 manieren:

1.Inline style

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

2.Internal style sheet

<head> 
<style> 
body { 
background-color: red; 
} 
</style>

3.External style sheet

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

5 lagen om stijl aan te brengen (vandaar de naam cascading)

Laag 1: de selector

p, h3 {
color: red;
}

Alle paragrafen en h3-elementen worden rood.

Laag 2: de identifier (elke identifier moet uniek zijn !)

<p id="roderegel">

#roderegel { // # duidt op een identifier
font-style: bold;
}

Enkel de paragrafen met id=”roderegel” worden rood

Laag 3: de stijlklasse

<p class='rodetekst">

.rodetekst { // . duidt op een style class
text-decoration: underline;
}

Alle elementen  behorende tot de class=”rodetekst” worden onderlijnd.

In CMS sjablonen wordt vaak volgende constructie gebruikt. Ze is iets eleganter dan het definiëren van 2 aparte klassen columnleft en columnright.

<div class="column left">xx</div>
<div class="column middle">xx</div>

.column {
      float: left;
}
.column.left {
    width: 15%;

}
.column.middle {
    width: 85%;
}

Laag 4: het style attribuut

<p style="color:blue;margin-left:30px;">This is a paragraph</p>

Inline styles zijn af te raden !

Laag 5: pseudoklassen

a:hover {
    color: red
}

hover is een pseudoklasse van a. Pseudoklassen geven een toestand van een element weer.

De volgorde van de 5 lagen (belangrijkste bovenaan)

style
:pseudoklasse
#identifier
.class
selector

De selector is het meest generiek binnen een webpagina en heeft dus minder prioriteit dan de andere lagen.
Style is dus het meest dwingend en krijgt dus het laatste woord: 

<h1 style=”color:blue;margin-left:30px;”>This is a heading</h1>

Zelfde tag, andere opmaak

h3 {
color: red;
}

aside h3 {
color: purple;
}

Elke h3-kop binnen een <aside> wordt paars.

 

<div id="menu">
<a href="#">Red</a>
</div>

#menu a { color: red; }

Een link binnen het element met id=menu is red

<div class=menu><a href="#">Black</div>
<div class=sidebar><a href="#">Grey</div>

.menu a {color: black ;}
.sidebar a {color: black ;}

Een link binnen het menu ziet er anders uit dan een link in een sidebar

 

 

<list7>
<p class="link">fuchsia</p>
</list7>

list7 .link { color: fuchsia ; }

Een element horende tot de klasse=link binnen een <list7>-element is fuchsia.

Elementen die behoren tot meerdere klassen

Vb: https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_cols

<div class="column menu">
    <ul>
	<li>Link</li>
	...
    </ul>
</div>

<div class="column content">
    <h1>The City</h1>
    <p>Chania is the capital of the Chania region on the island of Crete. </p>
</div>

.column {
    float: left;
    padding: 15px;
}

.menu {
    width: 25%;
}

.content {
    width: 75%;
}