CSS bewaar je afzonderlijk

In een tekstverwerker zoals MS Word schrijf je niet alleen je teksten. Je bepaalt ook hoe het document er zal uitzien. Je kan wel gebruik maken van gedefinieerde stijlen, maar toch zitten zowel de inhoud als de stijl van het document in éénzelfde bestand.

Als je de stijl van heel je site wil aanpassen, hoef je slechts één document te openen en te wijzigen!

De opmaak van je website bepaal je in een afzonderlijk document. Dit biedt tal van voordelen. Je kan hetzelfde stijldocument linken aan al je webpagina's, of dit nu gaat om 1, 10 of 5 miljoen webpagina's. Als je de stijl van heel je site wil aanpassen, hoef je slechts één document te openen en te wijzigen!

Hoe ga je te werk?

Bewaar het stijldocument in een afzonderlijke map. In het onderstaande voorbeeld zie je hoe het document style.css in de map style is bewaard.
Voeg in de <head>-sectie van al je HTML-documenten de link toe naar dit stijldocument.

<link rel="stylesheet" href="style/style.css">

Stijlregels voor HTML-elementen

In een CSS-document kan je aan HTML-elementen stijlkenmerken toekennen.

Tekstelementen zoals titels, alinea's... kan je dus geen hoogte of breedte geven, maar je kan wel een heleboel andere eigenschappen opmaken:

lettertype
lettergrootte
marge (links, boven, rechts, onder... of allemaal tegelijk)
kleur
...

Uiteraard gebruiken we voor CSS ook vaste benamingen in het Engels. Je kan niet zo maar wat gaan schrijven.

lettertype	font-family
lettergrootte	font-size
marge (links, boven, rechts, onder... of allemaal tegelijk)	margin (margin-left, margin-top, margin-right, margin-bottom...)
kleur	color
uitlijning	text-align

Deze lijst is lang niet volledig, het is gewoon een overzicht van de belangrijkste stijlregels die we gaan gebruiken.

“Doos”elementen kan je ook nog andere eigenschappen meegeven:

breedte	width
hoogte	height
positie (een absolute plaats of een relatieve plaats) tov. andere elementen	position
plaats op de pagina (links, rechts...)	float
stapelen (elementen boven elkaar plaatsen)	z-index
afronding	border-radius
achtergrondkleur	background-color
achtergrondafbeelding	Background-image
marge (links, boven, rechts, onder... of allemaal tegelijk): de afstand van dit element tov andere elementen daar buiten	margin (margin-left, margin-top, margin-right, margin-bottom...)
padding (links, boven, rechts, onder... of allemaal tegelijk): de afstand van dit element tov andere elementen daar binnen	padding (padding-left, padding-top, paddingright, padding-bottom...)
rand	border (border-left, border-top, border-right, border-bottom...)

Nogmaals opgelet: de lijst is ook hier ver van compleet, maar met deze stijlregels kom je al behoordelijk ver!

FIlm: CSS-selecties

HTML-elementen flexibel plaatsen

Met CSS3 (de laatste versie) kan je HTML-elementen heel flexibel plaatsen op je pagina.

HTML-elementen selecteren

In CSS selecteer je een HTML-element. Tussen akkolades schrijf je vervolgens de stijleigenschappen die bij dat element horen

selector{               
         stijlkenmerk: eigenschap;               
         stijlkenmerk2:eigenschap;   
}

a. HTML-tags selecteren

body{           
     font-family: Helvetica, Arial, sans-serif;      
     font-size:1.2em; 
} 
article{      
      border:1px solid #cccccc;
      padding:2%;
      border-radius:6% 12% 5% 0%;
      margin-bottom: 20px; 
} 
h1{
      color:deepskyblue; 
} 
img{
      max-width:100%;
}

b. Stijlklassen: een enorme uitbreiding van de mogelijkheden

In het bovenstaande voorbeeld krijgen alle <h1>-titels een blauwe kleur. Alle afbeeldingen krijgen een maximale breedte van 100%. Alle <article>-elementen zien er exact hetzelfde uit op alle pagina's. Misschien wil je sommige artikels wel een andere achtergrondkleur geven.

Dat kan met stijlklassen.

Stel dat je sommige afbeeldingen links wil uitlijnen en andere rechts, dan kennen we (naargelang we dit wensen) een de <img>-elementen in onze HTML-pagina's een klasse waarin we definiëren waar de afbeelding moet terechtkomen.

In HTML zou dit er zo kunnen uitzien:

<!DOCTYPE html> 
    <html>
      <head>
          <title>Computerwinkel Heverlee</title>
          <link rel="stylesheet" href="style/style.css"/>
      </head>
      <body>
          <article>
              <h1>Laptop voor webdesign</h1>
              <img src="images/water.jpg" class="fotolinks"/>
              <p>Een laptop, schootcomputer of notebook is een draagbare computer die
               in principe op de schoot kan worden gebruikt. Laptops worden vooral gebruikt
               door mensen die op verschillende locaties met hun computer werken. ...</p>
          </article>
          <article>
              <h1>Laptop voor webdesign 2</h1>
              <img src="images/water.jpg" class="fotorechts"/>
              <p>Een laptop, schootcomputer of notebook is een draagbare computer die in
               principe op de schoot kan worden gebruikt. Laptops worden vooral gebruikt door
               mensen die op verschillende locaties met hun computer werken. ...</p>
          </article>
      </body> 
</html>

Je merkt dat de <img>-markeringen een attribuut "class" hebben gekregen:

<img src="images/water.jpg" class="fotolinks"/>   
<img src="images/water.jpg" class="fotorechts"/>

De naam van de "class" mag je zelf bedenken. Ik koos hier voor "fotolinks" en "fotorechts".

In het stijlbestand voegen we vervolgens de kenmerken van elke "class" in. Je selecteert een class op de volgende manier:

.fotolinks{}
.fotorechts{}

Een class-naam laat je in het CSS-document voorafgaan door een "." (punt).

In het CSS-document nemen we nu de volgende regels op:

.fotorechts{
     width:50%;
     float:right;
     margin-left:2%; 
} 
.fotolinks{
     width:50%;
     float:left;
     margin-right:2%; 
}

Goed om te weten:

Een class mag je in een webpagina meerdere keren gebruiken.
De naam van een class mag je zelf verzinnen.
De naam van een class mag niet beginnen met een cijfer.
De naam van een class mag geen spaties of vreemde tekens bevatten (zeker geen . of #)
Je mag aan één element meerdere "class"es geven, telkens gescheiden door een spatie.
In een CSS-document selecteer je een class op de volgende manier:

.classnaam{ }

c. Eén enkel element selecteren

Soms kan het handig/nuttig zijn om één enkel element een andere stijl te geven. Denk bijvoorbeeld aan een banner. Een banner komt slechts één keer voor in je webpagina. Als je één enkel element anders wil vormgeven, dan kan je aan dat ene element een bepaalde ID geven.

Opgelet: Een "class" kan je meerdere keren binnen één pagina gebruiken. Je kan zelfs meerdere klassen aan een element toekennen, maar een "id" is binnen één pagina uniek.

<div class="container">
    <div class="row">
        <div class="col s12 m12 pagepart" id="part1">
            Een tekst....
        </div>
    </div>
    <div class="row">
        <div class="col s12 m12 pagepart" id="part2">
            Een tekst...
        </div>
    </div>
</div>

Goed om te weten:

Je merkt dat sommige "klassen" terugkeren (vb. pagepart, m12, s12, col...).
Een id is echter altijd uniek: part1 of part2.
Een id mag je in één webpagina dus maar één keer gebruiken.
De naam van een id, mag je net zoals de naam van een class, zelf verzinnen.
Een naam van een id of class mag niet beginnen met een cijfer.
Een naam van een id of class mag geen spaties of vreemde karakters bevatten (zeker geen . of een #)
Elk element mag slechts één ID hebben.
In je CSS-document selecteer je een id op de volgende manier:

#naamid{
}

d. Andere selectietechnieken

De hierboven vermelde selectietechnieken zijn lang niet de enige, maar wel de belangrijkste.

Je kan CSS-selectors ook achter elkaar plaatsen. Een voorbeeld...

<nav>
    <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>
<a href="winkel.html">Winkel</a>

Als je enkel de links binnen het nav-element wil selecteren, kan je in CSS de volgende selector schrijven:

nav ul li a{
      
}

e. Stijl bij klik of muisover

Aan een html-link kan je een andere stijl toekennen als je er met de muis overheen beweegt of als je er op klikt.

Muis over de link:

a{
   color:white;
   background-color:black;
   display:inline-block;
   padding:10px;
}
a:hover{
   color:black;
   background-color:white;
}

Je schrijft bij de selector a:hover enkel de stijleigenschappen die effectief veranderen.

Muis ingedrukt op de link:

Als je de muis ingedrukt houdt op een knop is de toestand a:active geactiveerd:

a:active{
    color:white;
    background-color:orange;
}

Opmaak met CSS

Wat is CSS?