CSS


Wat is CSS?

CSS| Webdesign KennisbankDe afkorting CSS staat voor Cascading Style Sheets en is een extra document dat opgenomen is binnen een website, met talrijke functionele eigenschappen. Speciaal 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. Het programma zorgt er bovendien voor, dat er minder opmaaktaal in een website wordt aangemaakt.

Dankzij een CSS kan de vormgeving van elk element op een webpagina, worden bepaald door de webdesigner.

Minder Opmaaktaal

Door gebruik te maken van CSS maak je een stuk minder opmaakcodes aan en zal een webpagina sneller laden. Dat zorgt weer voor meer waardering in de zoekresultaten.

Hoe Codeer je een Stylesheet?

Hoe Codeer je een Stylesheet? | Webdesign KennisbankNaast je HTML-document maak je dus een tweede document met daarin 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.

Zoals hieronder kun je verschillende stijl-eigenschappen gebruiken:

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

Als je aantekeningen maakt op CSS, dan doe je dat met: /* tekst */

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

 

Back to Top