css

CSS – basics

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

Stijl invoegen in HTML kan op 3 manieren:

1.Inline style

inline_style

2.Internal style sheet

internal_css

3.External style sheet

external_css

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 !)

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

Enkel de paragrafen met id=”roderegel” worden rood

Laag 3: de stijlklasse

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

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

Laag 4: het style attribuut

inline_style

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.

volgorde_lagen

Zal dus een blauwe link opleveren en géén rode.

Zelfde tag, andere opmaak

h3 {
color: red;
}
aside h3 {
color: purple;
}
volgorde_lagen2

 

volgorde_lagen3

 

.menu a {color: red;} .sidebar a {color: blue;}

volgorde_lagen4

 

ul .blauw {color: blue;}
ul .rood { color: red; }

volgorde_lagen5

Volgende wijziging werd aangebracht voor de ImaNema website (zie o.a. de pagina About Us->Staff en News->Blog)

Figuren die links gealigneerd werden met inline tekst plakten volledig tot tegen de figuur. We wilden graag wat padding, maar NIET VOOR ALLE figuren, enkel voor degene die links gealigneerd worden. Als we het voor ALLE figuren zouden doen zou de lay-out van de site niet meer zo mooi zijn !

Beschouw het element:

image_padding

(in About Us->Staff bvb.)
Stel dat we voor images van de klasse “align-left” de padding willen vergroten, zodat de tekst rechts ervan er niet tegen plakt. In CSS is dat:

img.align-left: { padding-right:10px; }

Let op: er staat géén spatie na img. !

Syntax van de vorm .klasse element {}

a {color: red;}
.site-name a {color: blue;}
site-name

Elementen die behoren tot meerdere klassen

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