CSS

CSS | Webdesign KennisbankCSS staat voor Cascading Style Sheets en is een extra document dat is opgenomen binnen een website, met talrijke functionele eigenschappen.

Exclusief uitgevonden om de vele opmaakstijlen, vanuit één CSS-document, gemakkelijk en compleet aan te duiden. Deze stijlen bestaan uit o.a. letterkleur, letterfamilie, achtergrond, tabellen, afbeeldingen, hyperlinks enz.

Minder Opmaaktaal in de Broncode;

Het programma zorgt er bovendien voor, dat er minder opmaaktaal in een website wordt aangemaakt. Kortom met een CSS kan de vormgeving van elk element in een webpagina worden bepaald door de webdesigner.

Zo is het een belangrijke reden geweest voor de introductie van Cascading Style Sheets om éénvoudigere en consistentere vormgeving van webpagina’s, met minder webbrowser-specifieke eigenaardigheden mogelijk te maken.

Door het automatisch genereren van allerlei overbodige HTML-codes kunnen fouten op het beeldscherm ontstaan. Het kan immers het downloaden van webpagina’s doen vertragen.

Overigens heeft elke webbrowser een ingebouwde stylesheet die de vormgeving van alle elementen bepaalt, wanneer er geen stylesheets aan een document kan worden meegegeven.

Hoe Codeer je een Stylesheet?

Naast je HTML-document maak je dus een tweede document met daarinCSS | Webdesign Kennisbank een opsomming van datgene wat met de stijl van de website te maken heeft. Ook daarvoor kun je gebruik maken van een HTML-document. Zo’n document heeft de volgende inhoud;

Een voorbeeld-document van een inline Style Sheet;

<html>
<head>
<title>De titel van de pagina.</title>
</head>
<body>
<p style=”Hier komen de stijlelementen voor deze paragraaf”>
</p>
</body>
</html>

Voorbeeld van een internal (embedded) Style Sheet;

<html>
<head>
<title>De titel van de pagina.</title>
<style type=”text/css”>
<!–
Hier komen de stijlregels
–>
</style>
</head>
<body>
Hier komt de inhoud van je pagina.
</body>
</html>

Voorbeeld van een external Style Sheet;

<html>
<head>
<title>De titel van de pagina.</title>
<link href=”bestandsnaam.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
Hier komt de inhoud van je pagina.
</body>
</html>

Dit om er voor te zorgen dat de website zo’n stijldocument ook weet te vinden. Dan is het geen HTML-document, maar een .CSS-document.

Hierop kun je de verschillende stijleigenschappen weergeven zoals;

body {background-color: #d0e4fe;}
h1 {color: orange; text-align: right;}
p {font-family: “Times New Roman”; font-size: 20px;}

De vormgeving van Hyperlinks kan als volgt worden aangegeven;

a {text-decoration: none;}
a:link {color: #0000ff; border-bottom: 1px solid #ff0000;}
a:visited {color: #0000ff; border-bottom: 1px solid #c0c0c0;}
a:hover {color: #000000; border-bottom: 2px dashed #dd0000;}
  • De eerste regel geeft aan, dat in de hyperlink verder geen stijl-decoratie is opgenomen.
  • De tweede regel geeft de kleur aan, dat de onderlijn gestreept doorloopt en de kleur van de lijn, die wordt weergegeven bij een onbezochte link.
  • De derde regel geeft de kleur van de tekst aan, de dikte van de onderlijn en dat deze gestreept doorloopt nadat de link is bezocht.
  • De vierde regel geeft de kleur aan, de dikte van de onderlijn en dat deze gestippeld is, samen met de kleur van de onderlijn, wanneer de muis zich over de hyperlink beweegt.

Als je aantekeningen wilt maken op de CSS, dan doe je dat als volgt; /* tekst */

/* mouse over link */
a:hover {color: #000000; border-bottom: 2px dashed #dd0000;}

Graag verwijs ik je naar de volgende webadressen over CSS;

W3Schools | CSS Wikibooks | CSS Wikipedia | CSS