Interne styles

Vooruitlopend op de laatste oefening, hebben we de marge van de gehele pagina al veranderd door de body-tag te herdefinieren.

De koptekst is rood gemaakt door voor h2 een style definitie te maken.

Bekijk weer de broncode.



De onderstaande tekst is oranje gemaakt met de nieuw gedefinieerde tag: <or>.

In deze pagina plaatsen we style-definities bovenaan de pagina. Ze staan tussen <head></head> en hebben de algemene vorm 

   <style>
      selector1 { property1: value1; property2: value2; }
      selector2 { property: value; }
      ...
   </style>

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.

In onderstaande paragraaf is de tekst blauw gemaakt met een nieuw gedefinieerde class.

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: 

   <style>
      selector.selector1 { property1: value1; property2: value2; }
      selector.selector2 { property: value; }
      ...
   </style>
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.



In onderstaande paragraaf is de tekst onderstreept.

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

   <style>
      .classname { properties: values; }
   </style>

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.



In onderstaand text-deel hebben we de marge veranderd.
Dit is gedaan met een div-tag. Het was daartoe nodig om de div-tag, die in de oorspronkelijke pagina 'algemeen' was gedefinieerd, opnieuw te definieren. (Zie de bron-code.)
We kunnen concluderen dat het niet verstandig is om de div-tag zelf anders te definieren, maar dat uitsluitend te doen met een CSS-class.

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: 

   <style>
      .classname tag { properties: values; }
   </style>

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.

Omdat de marge verandering via een class-definitie is gespecificeerd, kunnen we die class ook opnemen in een paragraaf, de p-tag. Dat is hier gebeurd.