CSS

Hoe wordt CSS gebruikt?

Een style sheet maken is heel gemakkelijk, men moet echter wel enige kennis van HTML hebben. Met CSS kan je elke HTML-tag een opmaak meegeven. Willen we bijvoorbeeld elke keer als we <H1> de tekst rood hebben, dan geven we de tag <H1> de eigenschap

color:
        red

mee. Dit doen we door <H1> als volgt te definieëren:
H1 { color: red }
In CSS wordt H1 de selector genoemd, color heet de property (eigenschap) en red is de value (waarde). Als we nu gebruik maken van de tag <H1>, dan ziet onze tekst er zo uit: Deze tekst is rood

CSS aan een pagina toevoegn

Het volgende voorbeeld laat alle mogelijk manieren zien hoe men een Style Sheet in een pagina kan gebruiken:

1:    <HTML>

        2:       <HEAD>

        3:          <TITLE>Titel
        van de pagina</TITLE>

        4:          <LINK HREF="our.css"
        TYPE="text/css" REL=StyleSheet>

        5:          <STYLE
        TYPE="text/css">

        6:             
        <!--

        7:             
           @import url(http://css1.webjump.com/our.css);

        8:             
           H1 { color: red }

        9:             
        //-->

        10:         </STYLE>

        11:      </HEAD>

        12:      <BODY>

        13:         <H1>Deze
        tekst is rood</H1>

        14:         <P STYLE="color:
        blue">Deze paragraaf is blauw</P>

        15:      </BODY>

        16:   </HTML>

Door gebruik te maken van de tag <LINK> (zie regel 4) kan een Style Sheet 'gelinkt' worden aan een pagina. In dit voorbeeld wordt de Style Sheet 'our.css' aan onze pagina 'gelinkt'. De locatie van dit bestand wordt aangegeven door HREF. Met de tag <STYLE> kunnen we een Style Sheet importeren, dit gebeurt met de commando's die staan op regel 5, 7 & 10. Hier importeren we de Style Sheet 'our2.css' die op locatie http://css1.webjump.com staat.
@import geeft aan dat we een Style Sheet willen importeren en met url geven we de locatie aan. Met deze twee manieren kunnen we eenvoudig de opmaak van al onze pagina's aanpassen. Het enige wat we nog moeten doen is onze Style Sheet linken en/of importeren. Met <STYLE> kunnen we ook een 'embedded' Style Sheet maken. We kunnen nu opmaak codes tussen <STYLE> en </STYLE> zetten. Hiermee passen we alleen de opmaak van de huidige pagina aan. Als laatste mogelijkheid kunnen we nog gebruik maken van 'inline' Styel Sheets (zie regel 14). Door hier gebruik van te maken kunnen we heel eenvoudig de opmaak van een enkele tag aanpassen. Dit doen we door een eigenschap STYLE aan een tag toe te voegen.