Externe styles

Bekijk weer de broncode.



In deze pagina plaatsen we style-definities in een aparte file:. cssfile.css.
De file wordt gelinked in een pagina, waarna de CSS-definities gebruikt kunnen worden.
De link wordt in de head-sectie geplaatst.
De definities van 'css2.html' zijn gekopieerd waarna de <style> en </style> tags zijn verwijderd.

Door een CSS-file te gebruiken kunnen we alle tags in vele pagina's tegelijk in ´ keer veranderen.

De verschillende style-definities worden hieronder herhaald. De inhoud ven de pagina is ongewijzigd. (Tja, beetje eentonig.) 

      selector1 { property1: value1; property2: value2; }
      selector2 { property: value; }
      ...

De 'selector' kan een bestaande 'tag' zijn die wordt aangepast.

De definities van 'properties' en 'values' is anders dan in de in-line styles. Vergelijk bijvoorbeeld de manier waarop de <body>-tag is aangepast.

Op die manier kunnen we alle tags in deze pagina in een keer veranderen.
Let bijvoorbeeld op deze link die verder niks doet, maar waaraan we zien dat er geen streep onder staat. De link-tag <a> is aangepast.

We kunnen ook nieuwe tags definieren. Bijvoorbeeld een tag die de kleur van de letters verandert. Dat is hier toegepast: alle letters worden rood. Tot hier.

Het handige is dat we zo met een eenvoudige ingreep de kleur op veel plaatsen tegelijk kunnen veranderen.

Vaak wordt de <div>-tag gebruikt om voor een bepaald gedeelte van de pagina styles te specificeren.

Met de <div-tag> (division) veranderen we een gedeelte van de pagina. Hier is bijvoorbeeld een ander font gekozen. En een andere kleur.

Een overzicht van CSS-selectors en CSS-properties vindt u hier en u kunt er naar hartelust mee experimenteren.



Voor een bepaalde 'selector' kunnen we de definitie specificeren met een nieuwe 'selector'. De syntax is: 

      selector.selector1 { property1: value1; property2: value2; }
      selector.selector2 { property: value; }
      ...
De tweede 'selector' wordt een klasse ('class') genoemd.

As voorbeeld staan hieronder drie paragrafen in verschillend lettertype. Bekijk de broncode voor de manier waarop dit tot stand is gekomen.

Paragraaf met normaal font in lichtblauwe kleur.

Paragraaf met italic font.

Paragraaf met bold font.

We kunnen tekst (of iets anders) in een 'box' plaatsen.

Dat ziet er dan zo uit.



We kunnen een klasse ook apart definieren en later op een bepaalde selector toepassen. Dat is nodig als we bijvoorbeeld de <div>-tag op verschillende plaatsen willen inzetten met een andere style-definitie.
De sytax is als volgt - let op de punt voorafgaand aan de naam - : 

      .classname { properties: values; }

In de broncode ziet u dat hier gebruik is gemaakt van de <div>-tag om de paragraaf een bepaald aanzien te geven. De link-tag is onveranderd van kleur.



Het kan nog een slagje gedetailleerder (complexer, zo u wilt). We kunnen binnen een klasse de definities van properties beperken tot bepaalde tags. Je krijgt dan het volgende: 

      .classname tag { properties: values; }

In de broncode ziet u dat hier weer gebruik is gemaakt van de <div>-tag om de paragraaf een bepaald aanzien te geven. De link-tag is nu dit. We zien dat de oorspronkelijke style-definitie van de <div>-tag worden overschreven of aangevuld.

Van de link-tag kunnen we het uiterlijk veranderen als we er met de muis overheen bewegen (hover) of als de link wordt aangklikt (active) of in het verleden aangeklikt is (visited).
Het wordt hier gedemonstreerd.



Hier laten we het bij voor wat betreft CSS-style definities.
Zoals u ziet is het werken met CSS-styles best ingewikkeld. Er zijn namelijk heel veel mogelijkheden en die kunnen ook nog eens gecombineerd worden. Opzoeken op internet is het parool en ... voorbeelden zoeken en kopieren.