Cursus CSS - Les 1: Inleiding

Wat is CSS?

CSS is een afkorting van Cascading Style Sheet. Dat betekend, als je het letterlijk vertaalt, 'Trapsgewijs Opmaakmodel'. Die naam maakt gelijk duidelijk wat je met CSS kunt: je website vormgeven (opmaken).

Voordelen van CSS:

CSS heeft een heleboel voordelen, anders zou het niet zoveel worden gebruikt. De belangrijkste voordelen zijn:

Alle CSS-code kun je in 1 bestand zetten. Dan kun je een verwijzing naar dat ene bestand in iedere pagina waar de CSS-code moet worden gebruikt opnemen, en overal zal diezelfde CSS-code worden gebruikt. Je hoeft dus niet je opmaak-code voor iedere pagina opnieuw te schrijven, maar dat hoeft maar 1 keer.
Dat heeft bovendien als voordeel dat je CSS-code maar 1 keer gedownload hoeft te worden, want daarna onthoudt de browser die code (hij cached de code). Hierdoor kost het je een stuk minder dataverkeer en schijfruimte.
Met CSS kun je HTML-elementen heel geavanceerd vormgeven. Veel meer dan HTML kan. In HTML kan je bijvoorbeeld niet de cursor of de exacte positie van een element veranderen, in CSS wel.
Je kunt HTML-elementen in 1 keer allemaal vormgeven. Je kunt bijvoorbeeld zeggen dat alle <h1>-tags blauw moeten worden. Dat kan je met maar 1 regeltje CSS, en je hoeft dat maar op 1 plek te doen, en het veranderd gelijk op al je pagina's. Dat scheelt een heleboel werk.
Als een browser je CSS-code niet ondersteund, zal hij de code gewoon negeren. Dan wordt je site gewoon zonder die CSS-code weergegeven.

Kortom: het scheelt je een heleboel werk (en dus tijd), dataverkeer, schijfruimte, en je kunt er heel veel mee. Wat wil je nog meer!?

Wat moet je kunnen?

Omdat CSS naast HTML werkt, moet je ook goed HTML kennen. Als je nog niet zo goed HTML kunt, kun je dat hier leren. Ken je al redelijk HTML? Laten we dan gelijk beginnen!

Verwijzen naar een stylesheet

Om CSS te gebruiken in jouw webpagina's, zul je de CSS-code in je webpagina moeten zetten. Dat kan op 3 manieren:

External Style Sheet
Internal Style Sheet (embedded, in de <head>-tag)
Inline Style (in een HTML-element, door het style-attribuut)

Dit is een stukje CSS-code:

body {
	color: #00FF00;
	background-color: #008000;
}

Stel dat je HTML-pagina er ongeveer zo uitziet:

<html>
    <head>
        <title>Titel van de website</title>
    </head>
    <body>
        Inhoud en tekst van de website.
    </body>
</html>

(klik hier om dit voorbeeld te bekijken)
Zoals ik al zei kan je op 3 manieren verwijzen naar de stylesheet (CSS-code). Die 3 manieren ga ik nu bespreken.

External Style Sheet

Met een External Stylesheet verwijs je de browser naar externe CSS-code. Extern betekent hier gewoon in een ander bestand. Je kunt je CSS-code bijvoorbeeld plaatsen in het bestand 'style.css'. Dan kun je op deze manier de browser naar die stylesheet verwijzen:

<html>
    <head>
        <title>Titel van de website</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        Inhoud en tekst van de website.
    </body>
</html>

(klik hier om dit voorbeeld te bekijken)
Je moet dus in de head een link-tag maken die de browser verwijst naar de stylesheet.

Inline Style

Dit is de eenvoudigste manier: je koppelt de CSS-code gewoon aan het HTML-element waarop de CSS-code van toepassing is. Onze voorbeeld-CSS-code is van toepassing op de body, dus je kunt hem bijvoorbeeld zo toepassen:

<html>
    <head>
        <title>Titel van de website</title>
    </head>
    <body style="color: #00FF00; background-color: #008000;">
        Inhoud en tekst van de website.
    </body>
</html>

(klik hier om dit voorbeeld te bekijken)
Je voegt dus het style-attribuut met de CSS-code toe aan de elementen waarop de stylesheet van toepassing is.

Internal Style Sheet

Je kunt ook in de head de style-tag toevoegen met de stylesheet daarin. In dat geval wordt de HTML-code zo:

<html>
    <head>
        <title>Titel van de website</title>
        <style>
            body {
                color: #00FF00;
                background-color: #008000;
            }
        </style>
    </head>
    <body>
        Inhoud en tekst van de website.
    </body>
</html>

(klik hier om dit voorbeeld te bekijken)

Je weet nu wat CSS is, wat je er mee kunt, en hoe het ongeveer werkt. In de volgende les leer je wat die stylesheet die we hier als voorbeeld gebruikten nou precies doet, en waarom hij dat doet.

⇒ Ga verder met Les 2: Syntax
↵ Terug naar de CSS-cursuss

Was deze informatie nuttig? Zo ja, overweeg dan een linkje op uw website te plaatsen:

<a href="http://www.simondevries.com/nl/programmeren/css/cursus/inleiding.php" title="Les 1: Inleiding">Les 1: Inleiding - www.simondevries.com</a>

Bedankt!

Menu