Wat is CSS?

Met gebruik van CSS in een HTML document kun je heel makkelijk een stijl bepalen voor het hele document. 
Om je een idee te geven van hoe het werkt, laat ik hier wat voorbeelden zien. 

<HTML>
<HEAD>
<TITLE>Cascade Style Sheet test</TITLE>
<STYLE TYPE=”text\css”>
<!–
td { font-family: arial; font-size: 9pt; font-weight: bold; color: #000000; }
//–>
</STYLE>
</HEAD>
 

Met bovenstaand voorbeeld heb ik ingesteld dat alle tekst dat binnen een <TD> tag moet worden weergegeven in het font Arial (font-family: arial;) met een grootte van 9 points (font-size: 9pt;), vetgedrukt (font-weight:bold;) en de in het zwart (color: #000000;). 

Je kunt het ook uitbreiden: 
<HTML>
<HEAD>
<TITLE>Cascade Style Sheet test</TITLE>
<STYLE TYPE=”text\css”>
<!–
td { font-family: arial; font-size: 9pt; font-weight: bold; color: #000000; }
a { color: #FF0000; text-decoration: none; }
//–>
</STYLE>
</HEAD>
 

Met de regel die nu toegevoegd is geef je aan dat alle Anker Tags (links) rood moeten zijn (color: #ff0000;). Tevens mag de link niet onderstreept worden (text-decoration: none;), wat vaak standaard is voor links. 

Zelfs een mouse-over effect (dat de link een andere kleur krijgt terwijl je met muis er overheen beweegt) is mogelijk in MSIE: 

<HTML>
<HEAD>
<TITLE>Cascade Style Sheet test</TITLE>
<STYLE TYPE=”text\css”>
<!–
td { font-family: arial; font-size: 9pt; font-weight: bold; color: #000000; }
a { color: #FF0000; text-decoration: none; }
a: hover { color: #000000; }
//–>
</STYLE>
</HEAD>
 

Je kunt ook eigen benamingen gebruiken om een stijl aan te geven voor je site: 
<HTML>
<HEAD>
<TITLE>Cascade Style Sheet test</TITLE>
<STYLE TYPE=”text\css”>
<!–
#mijnstijl { font-family: arial; font-size: 9pt; font-weight: bold; color: #000000; }
//–>
</STYLE>
</HEAD>

In bovenstaand voorbeeld heb ik de “td” veranderd naar #mijnstijl. Wanneer je elders in het document de DIV-tag gebruikt, dan kun je hiernaar refereren: 
<DIV ID=”mijnstijl”>
mijn tekst
</DIV>
 

De tekst binnen de DIV-tag zal dan voldoen aan alle eisen die in de STYLE codes aangegeven zijn. 

Hetzelfde effect bereik je met: 

<HTML>
<HEAD>
<TITLE>Cascade Style Sheet test</TITLE>
<STYLE TYPE=”text\css”>
<!–
.mijnstijl { font-family: arial; font-size: 9pt; font-weight: bold; color: #000000; }
//–>
</STYLE>
</HEAD>
 

Met elders in het document: 
<P CLASS=”mijnstijl”>
mijn tekst
</P>
 

Goed gebruik van CSS scheelt je dus heel wat gebruik van o.a. FONT tags, waardoor je website sneller te downloaden is. Bovenstaand voorbeeld zou je dan in elke HTML file moeten plaatsen, maar je kan de CSS codes ook in een extern bestand zetten. 

In een leeg notepad bestand zet je dan alle CSS codes die je nodig hebt voor je site: 
td { font-family: arial; font-size: 9pt; font-weight: bold; color: #000000; }
a { color: FF0000; text-decoration: none; }
#mijnstijl { font-family: arial; font-size: 9pt; font-weight: bold; color: #000000; }

Vervolgens sla je deze op als bestandsnaam.css en plaats je de file in dezelfde directory als je HTML documenten. Vanaf elke HTML document kun je linken naar deze file binnen de HEAD-tag: 

<HTML>
<HEAD>
<TITLE>Cascade Style Sheet test</TITLE>
<LINK rel=”stylesheet” href=”bestandsnaam.css” type=”text/css”>
</HEAD>
 

Wil je dan de kleur van de links veranderen op de hele site, dan is dit nog maar een fluitje van een cent, want je hoeft dan alleen desbetreffende code aan te passen in de .css file. 

Je kan CSS ook gebruiken voor een gedeelte van je document, dus niet voor het hele document. In zo’n geval plaats je de STYLE tag in een andere HTML tag: 

<H2 style=”color: #ffffff;”>TEKST</H2> 

Met bovenstaande STYLE zal de TEKST in het wit weergegeven worden met een zwart achtergrond. 

Hetzelfde kun je doen met een table: 

<TABLE>
<TR><TD style=”color: #ffffff;”>tekst</TD></TR>
<TR><TD>meer tekst</TD></TR>
</TABLE>

Met dit voorbeeld heeft de eerste regel van de tabel een zwarte achtergrond terwijl er met witte letters geschreven wordt. 

Gebruik je CSS zowel in een tag, maar heb je ook een extern CSS bestand aangeroepen en zelfs een paar STYLE codes in de HEAD-tag geplaatst? Dan bepaald de browser welke code voorrang heeft op de ander. Standaard is dit als volgt: de CSS binnen een HTML tag zal alle andere CSS instellingen overschrijven. Daarna volt de browser de instellingen binnen de HEAD-tag en als laatste zal het externe CSS bestand gaan gelden. Alles wordt wel gelezen en uitgevoerd, waardoor het één het ander overschrijft of aanvult. 

Vormgeven met CSS 

Bovenstaande is een heel beknopte introductie van CSS, want je kunt er een website zelfs geheel mee vormgegeven! Het is daarom uitgegroeid tot één van de belangrijkste talen. Als je verder wilt met webdesign, dan is het zeker de moeite waard om hier verdere research naar te doen en vooral veel te oefenen!

Bookmark the permalink.

Comments are closed