Initiatie CSS

We leren in dit hoofdstuk op grafische manier (via Dreamweaver ) werken met CSS. Later zullen we het minder grafisch aanpakken en gaan we de code meer zelf intypen.

CSS staat voor Cascading Style Sheets en is een taal waarmee je de opmaak van een website kan regelen. Aangezien je meerdere mogelijkheden qua opmaak hebt dan bij HTML, wordt CSS ook wel eens een uitbreiding op CSS genoemd.

Eigenlijk plaats je in een webpagina tekst, figuren, tabellen en hyperlinks en ga je in een apart CSS-bestand zeggen: dit is de achtergrondkleur van mijn pagina, dit is de algemene tekstkleur, -grootte en lettertype, dit zijn de kleuren van de hyperlinks, dit zijn de kleuren en stijl van mijn tabelranden, enz. Wanneer je vervolgens elke webpagina van je website aan dit ene CSS-bestand koppelt, krijgt elke pagina een uniforme en consequente opmaak.

Je kan CSS op twee manieren gebruiken: in de pagina zelf of in een apart bestand. Zo kan je CSS-code in de HTML-pagina zelf invoegen of het in een apart CSS-bestand opslaan. Wij zullen telkens via de tweede manier werken: in een apart bestand. Zoniet verlies je het voordeel dat je elke pagina aan hetzelfde bestand kan koppelen. Het grote voordeel hiervan is dat elke pagina dezelfde opmaak krijgt en dat je de opmaak van heel de website in één keer kan aanpassen.

Er bestaan drie methodes in CSS: je kan tags herdefiniëren, je kan werken via classes en id’s.

Een korte beschrijving:

1                    Tags definiëren: je neemt een tag en geeft deze een volledige opmaak. De tag zal op elke plaats deze opmaak overnemen.
Enkele belangrijke tags:

·       body: de volledige pagina

·       h1: hoofding 1

·       h2: hoofding 2

·       p: alinea

·       hr: lijn

·       a:link: onbezochte hyperlinkkleur

·       a:visited: bezochte hyperlinkkleur

·       a:hover: aangewezen hyperlinkkleur

·       input: tekstveld, knop, keuzerondje en -vierkantje (formulier)

·       select: menu/lijst (formulier)

·       textarea: groot tekstveld


Elke tag heeft een standaardopmaak. De bodytag is bijvoorbeeld ingesteld dat je een witte achtergrondkleur krijgt, zwarte tekst in Times New Roman. Als je het lettertype wil wijzigen, of een achtergrondfiguur wil instellen, doe je dit in CSS, voor de bodytag.

2                   Werken met classes: soms wil je natuurlijk dat niet elk object dezelfde opmaak krijgt. Door een class te maken, kan je een uitzondering maken op de algemene opmaak. Voorbeeld: elke lijn is donkerblauw, maar eentje moet wat meer opvallen en krijgt een rode kleur.

3                   Werken met id’s: elk object heeft een id. Je kan dit vergelijken met een naam. Door een id aan te maken, krijgt een object een andere opmaak dan de rest. Deze werkwijze is erg gelijkend op die van classes.

Wij zullen proberen vanaf nu enkel de structuur in onze pagina’s te zetten en alle opmaak in het CSS-bestand te plaatsen!

Een voorbeeld:

Onderstaande pagina is een HTML-pagina die niet gekoppeld is met een CSS-bestand.

Onderstaande pagina’s zijn dezelfde HTML-pagina’s, maar deze keer wél aan een CSS-bestand gekoppeld. Weliswaar 2 verschillende, aangezien je twee verschillende resultaten bekomt.

De voordelen van CSS:

·       Zoals reeds vermeld kan je CSS in een apart CSS-bestand plaatsen. Hierdoor krijgt elke pagina dezelfde opmaak en kan je de opmaak van je website dus ook heel snel in één keer wijzigen.

·       Er zijn meer opmaakmogelijkheden dan in html.

·       Een CSS-bestand wordt altijd in één keer ingeladen. Wanneer je naar de tweede pagina van je website gaat, is het inladen niet meer nodig en weet de browser dadelijk hoe de opmaak getoond moet worden. Aangezien de opmaak in een CSS-bestand staat en niet apart in de HTML-pagina, krijg kleinere bestanden en dus snellere webpagina’s.

·       De opmaak in CSS wordt in alle browsers op dezelfde manier getoond, in tegenstelling tot HTML.

Meer knappe voorbeelden, vind je op www.csszengarden.com.

Een CSS-bestand maken

Hoe kan je nu een CSS-bestand maken via Dreamweaver?

Ga naar het paneel CSS.

Klik op All, zodat Current niet meer actief is.

Klik op  om een nieuw bestand te maken.

Je bekomt nu onderstaand venster:

Kies voor Tag (redefines the look …). Je zal hiermee een tag kunnen herdefiniëren. Kies in de lijst een tag die je wil aanpassen (bv. body). Kies ook voor New Style Sheet File. Hierdoor kan je een apart CSS-bestand aanmaken.

Druk op OK.

Je zal nu moeten aangeven waar je CSS-bestand wil opslaan. Geef je bestand ook een naam (bv. opmaak.css)

Je kan nu een opmaak geven aan de tag die je wil herdefiniëren.

We bespreken kort de verschillende categorieën van opmaak:

Bij type kan je lettertype, -grootte, -kleur en andere teksteigenschappen instellen.

In de categorie “Background” kan je een achtergrondkleur of –figuur instellen.

Bij “Block” kan je de teksteigenschappen (uitlijning, spaties, …) instellen.

Bij “Box” kan je een paginamarge instellen.

Dit gaat erg belangrijk worden bij layers. We treden later in detail.

Bij Box kan je ook een padding en margin instellen. Wat is nu het verschil tussen padding en margin?

Je kan het verschil pas zien als een object een rand (kan je instellen bij “BORDER”) of een achtergrondkleur (kan je instellen bij “BACKGROUND”) instelt.

Een margin (=marge / 2) is de afstand van de browserrand tot de rand of achtergrondkleur van het object. Een padding (=opvulling / 1) is de afstand van de rand of achtergrondkleur van het object tot aan het object (bijv. tekst). Indien er géén rand of achtergrondkleur is, kan je het onderscheid tussen margin en padding NIET zien.

Het principe van marges en padding, wordt ook wel eens het BOX-model genoemd. Hier komen we later op terug!

Kies voor OK als je klaar bent met het instellen van de eigenschappen.

Let op! We hebben nu allemaal eigenschappen ingesteld voor één tag (bv. Body). Dit betekent dat de instellingen effect hebben die ene tag (bv. op de volledige pagina).
Je kan ook instellingen doen voor andere tags (bv. H1, H2, A-link, V-link, enz). Deze instellingen hebben dan enkel invloed op de betreffende onderdelen.

Je kan in Dreamweaver zien dat het css-bestand als apart bestand geopend is. Je kan de CSS-code erin zien.

Voorbeeld:

body {

     font-family: Verdana;

     font-size: 10pt;

     margin: 4px;

     background-color: #C7C0A5;

}

a:link, a:active, a:visited {

     color: #4E493A;

     text-decoration: none;

}

h1 {

     font-size: 14pt;

     color: #E28C05;

     font-variant: small-caps;

}

CSS code bestaat altijd uit een selector en declaratie.
In bovenstaand voorbeeld is body, a:link, enz. een selector.
In bovenstaand zijn de codes tussen de accolades de declaraties.

Je kan nu in je HTML-code zien dat deze pagina gelinkt is aan een CSS-bestand.

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


Je kan ook CSS-code in de html-pagina zelf invoegen. Je bekomt dan geen apart CSS-bestand.

Bij het aanmaken van de CSS-regel, kies je dan voor “This document only”.

Wanneer code in een HTML-pagina zelf geplaatst wordt, zie je dit als volgt in de code:

<style type="text/css">

<!--

h1 {

     color: #990000;

}

-->

</style>

In onderstaand voorbeeld zijn beide mogelijkheden gemixed: er staat CSS-code in de pagina zelf (<STYLE>) en in een apart CSS-bestand (OPMAAK.CSS).

Wanneer je beide mogelijkheden mixed, zal de opmaak die apart staat in de pagina (<STYLE>), voorrang hebben op het CSS-bestand. Dit voor selectors (bv. h1) die in beide codes vermeld worden.

Wij zullen ze echter altijd samen in één bestand zetten.

We slepen dus alle stijlen steeds naar “opmaak.css”. Daarna selecteer je “style” en verwijder je dit. Hiermee worden alle overtollige regels code verwijderd.

Een CSS-bestand bewerken

Wanneer je CSS-code wil wijzigen, dubbelklik je op de te wijzigen selector in het CSS-paneel. Je kan ook de selector selecteren en klikken op

Je kan een bestaande tag verwijderen door te klikken op .

Andere pagina’s koppelen aan een CSS-bestand

Je kan dit te doen door te klikken op de knop  in het css-venster, of door te kiezen voor TextCSS StylesAttach Style Sheet...

Je moet nu bladeren naar het css-bestand via Browse. Selecteer het bestand en kies voor OK.

Kies altijd voor de optie Link. Anders wordt de css-code vanuit het aparte bestand geïmporteerd in de webpagina. Je verliest dan het grote voordeel van eenvoudige en vlugge aanpassingen op de hele website.

Werken met komma’s

Als je voor twee tags dezelfde opmaak wenst, kan je beter via een andere manier werken.

Je kan meerdere selectors dezelfde opmaak geven, door ze in reeks te plaatsen, gescheiden door komma’s.

Klassiek voorbeeld is dat alle formulierobjecten (textfield, select en textarea) dezelfde opmaak moeten hebben.


In de code:

<style type="text/css">

<!--

input, select, textarea {

      color: #999900;

}

-->

</style>

Je moet de komma’s echt manueel intypen!

Werken met Classes en ID’s

Werken met Classes

Soms wil je dat niet elk element dezelde opmaak krijgt. Zo heb je bijvoorbeeld een pagina met 3 tabellen en moet één tabel van de drie een andere opmaak krijgen. Dit kan je doen door voor die ene uitzondering een class te maken.

Bij je CSS-bestand kies je nu niet voor Tag, maar voor Class.

Bij Name typ je een naam in naar keuze. Gebruik geen naam van een bestaande tag.

Kies voor Ok. Geef een bepaalde opmaak voor het object dat een andere opmaak behoeft.

Kies voor Ok, tot je in je pagina terecht komt.

Selecteer het object met de aparte opmaak (bijvoorbeeld een tabel).

In je eigenschappenvenster vind je een aparte rubriek Class. Hier vind je de class in die je daarnet gemaakt hebt. Wanneer je de respectievelijke class selecteert, krijgt je object de gewenste opmaak.

Let op: een class begint in de code altijd met een punt.

.uitzondering{

color: #FF0000;

}

De naam van een class mag je zelf kiezen!

Werken met ID’s

Je kan erg veel elementen een naam geven. Zo kunnen tabellen, figuren, tekstvelden en andere objecten een ID krijgen. Je kan dit geven in het eigenschappenvenster.

Via de code kan je een object een naam geven met het attribuut “id”.

<table id="rodetabel">

Vervolgens die je een nieuwe selector te maken. In dit geval kies je voor “Advanced (IDs)”. Een class begint altijd met een punt, een ID met een hekje (#).

Je moet de ID niet meer toepassen zoals dat bij classes moest. Ze wordt automatisch gekoppeld het object dat deze naam heeft.

Het verschil tussen classes en id’s

Het gebruik van classes en id’s is zo goed als hetzelfde.  Het is echter zo dat classes dikwijls gebruikt worden in een CSS-bestand en id’s eerder in de HTML-pagina zelf.

Het grote verschil echter is dat Classes aan meerdere objecten op één pagina gekoppeld mogen worden en dat een id slechts aan één object per pagina gekoppeld mag worden.

We zullen in deze cursus echter vooral via id’s werken. Dit omdat er automatisch id’s aangemaakt worden per layer (div) die we later nog zullen leren maken.

Hyperlinks

Hyperlinks zijn een speciaal geval. Er bestaan namelijk 4 hyperlinkkleuren: de onbezochte, de bezochte, de actieve en de hover (als je een link aanwijst).

1/ Elke hyperlink dezelfde opmaak geven

Indien je elke hyperlink dezelfde opmaak wenst te geven, moet je de a-tag herdefiniëren.

2/ Een onderscheid maken tussen de verschillende hyperlinksoorten

Indien je elke hyperlink een andere opmaak wenst te geven, moet je een onderscheid maken tussen a:link, a:visited, a:active en/of a:hover.

·       De onbezochte link     

a:link

·       De bezochte link

a:visited

·       De actieve link

a:active

·       De hoverlink

a:hover

3/ Op één pagina verschillende hyperlinkkleuren, zonder onderscheid

Nu wil je soms op twee verschillende plaatsen in een document, twee maal verschillende links gebruiken. Hiervoor kan je geavanceerde id’s gebruiken.

Stel de hyperlinks van een linkermenu moeten rood zijn en de hyperlinks in een rechtermenu moeten groen zijn (om het eenvoudig te houden, maken we geen opsplitsing in hyperlinkkleuren). Het linkermenu staat in een rode tabel, het rechtermenu in een groene tabel. We geven ze beide een naam zodat we met id’s kunnen werken.

id = rodetabel

id = groenetabel

We kunnen nu de hyperlinks in de tabel met id = rodetabel, aanspreken via de selector #rodetabel a

<style>

#rodetabel{

      border: 1px solid #CC0000;

}

#rodetabel a {

      color:  #FF0000;

}

#groenetabel {

      border: 1px solid #009900;

}

#groenetabel a {

      color:  #009900;

}

</style>

4/ Op één pagina verschillende hyperlinkkleuren, mét onderscheid

Dit werkt net hetzelfde als bij de vorige methode, alleen ga je hier weer werken met a:link, a:visited, enz.

Bijvoorbeeld:

#rodetabel a:link

#rodetabel a:visited

#rodetabel a:hover

#groenetabel a:link

#groenetabel a:hover