CSS geeft de website style


vrijdag 9 september 2016

Ondertussen weten we hoe we een pagina van een website moet beginnen. We kunnen wat tekst en afbeeldingen plaatsen, maar die tekst zal weergegeven worden in het standaard lettertype wat op de pc van de gebruiker geïnstalleerd is. Voor de meeste van ons zal dat “Times New Roman” zijn.

Ten behoeve van de vormgeving van een website heeft daarom het W3C de Cascading Style Sheet in het leven geroepen. Kortweg CSS.

 css

Ondertussen is men bezig met de ontwikkeling van CSS3. Een aantal browsers geven daarvan zelfs al mondjesmaat stijlen weer. De standaard is CSS2. Totdat CSS3 voldoende ondersteund wordt is het verstandig van deze standaard gebruikt te maken.

Cascading Style Sheet zegt al direct meer. Eenvoudig gezegd: De laatst opgegeven stijl zal worden weergegeven. De volgorde daarvan is eenvoudig.

1. Inline style: Alle opgegeven stijlen in de website code hebben voorrang.

Bijv. het opmaken van een paragraaf kan op deze manier.

<p style=”Hier komt het stijlelement voor deze paragraaf”>Tekst – inhoud</p>

2. Interne stylesheet: Wordt geplaatst in de<head> en heeft ná de inline stylesheet voorrang.

Je plaatst deze stylesheet op de volgende manier.

<head>
<title>titel van deze pagina</title>
<style type=”text/css”>
<!–
Hier de stijl van deze pagina
–>
</style>
</head>

3. In een externe stylesheet: Deze krijgt voorrang ná de inline style en de interne stylesheet. Deze stylesheet wordt seperaat opgeslagen op de webserver en eindigt met de extensie .css

In de <head> van de webpagina komt een verwijzing naar deze stylesheet. Dat is mogelijk met een link of met een import. Het aanroepen van deze stylesheet gaat als volgt met een link:

<html>
<head>
<title>titel van deze pagina.</title>
<link href=”naam_stylesheet.css” rel=”stylesheet” type=”text/css” />
</head>

of met een import:

<html>
<head>
<title>titel van deze pagina.</title>
<style type=”text/css” media=”all”>

<!–
@import url(“naam_stylesheet.css”);
–>
</style>
</head>

Nummer 2 gaan we snel vergeten. Niet meer doen….ouderwets!

Nummer 1 mag…soms….liever niet…

Blijft nummer 3 over.

De opzet van het W3C is om een zo schoon mogelijke code te krijgen. Op die manier zal een website het snelst laden. Bij snel ladende websites is iedereen gebaat. De bezoeker krijgt snel de gevraagde info voor zijn neus, en de server wordt minder belast zodat er minder dataverkeer is en andere websites op dezelfde server ook de kans krijgen om snel te laden.

Dat laatste is tegenwoordig natuurlijk minder relevant omdat server moderne processoren bezitten om de snelheid te waarborgen.

Uitgaande van de stylesheet zoals genoemd onder nummer 3 wordt op de webserver een bestand opgeslagen dat in dit geval “naam_stylesheet.css” heet. Vanzelfsprekend mag dat iedere willekeurige naam hebben, als het maar eindigt op .css.

Het bestand kan gemaakt worden met een simpele teksteditor. Bijvoorbeeld Notepad. Om wat meer duidelijkheid te krijgen in de opbouw kan ook gebruik worden gemaakt van Notepad++, Dreamweaver of elk willekeurige andere editor.

Het document dient te beginnen met een gebruikt characterset, op deze manier:

@charset “utf-8″;
/* CSS Document */

Beide regels zijn niet verplicht maar maken het document wat netter. We weten nu immers waar het over gaat.

Daarna kan begonnen worden met de opmaak van de diverse website elementen.

Dit is hiervan een voorbeeld.

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 62.5%; /* = 10px */
background-color: #666666;
background-position: center top;
background-image: url(../images/background.jpg);
background-repeat: repeat-x;
}

h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
color: #FFFFFF;
margin-left: 240px;
}

h2 {
color: #333333;
font-size: 1.8em;
}

p {
font-size: 1.2em;
color: #666666;
line-height: 1.6em;
margin-bottom: 20px;
margin-top: 18px;
}

 

In dit stukje CSS wordt de <body>, <h1>, <h2> en de <p> opgemaakt. Eenvoudige zaken als de letergrootte, afstanden en kleuren, maar ook het gekozen lettertype worden hier bepaald. In een volgend bericht zal ik daar vast dieper op in gaan. Elke stijl voor elke element wordt omsloten door accolades. In dit geval gaat het om simpele tag styles. Later ga ik in op id’s en classes.

We zijn opnieuw wat dichter bij het maken van een eigen website gekomen. In het volgende bericht zal ik laten zien wat er gebeurd als je hetHTML en CSS bestand gaat combineren.

Om alvast een beetje in de sfeer te komen kan je eens kijken op de meest bekende site over CSS. Zengarden


Reacties


Voeg een reactie toe op dit bericht.
Houd mij op de hoogte van nieuwe reacties op deze pagina