HTML op het net - Printversie

Klik hier voor de inhoudsopgave

HTML op het net - Printversie - Style sheets
Originele URL: http://html.op-het.net/tekst/stylesheets.html

Inleiding

Met behulp van Style Sheets kan je de opmaak van html-pagina's wijzigen. Als je wat meer ervaring hebt met style sheets zijn ze erg makkelijk om te gebruiken.
Style sheets worden ondersteund door Netscape vanaf versie 4 en Internet Explorer vanaf versie 3. Een groot nadeel van style sheets zijn de grote verschillen tussen Netscape en Internet Explorer. Er zitten soms al verschillen tussen de PC en Mac of UNIX-versie....
Het mooie aan style sheets is dat je op een centrale plaats de opmaak voor het hele document, of zelfs meerdere documenten kan definieren. Hierdoor wordt het ontwerp en onderhoud van de pagina's erg vereenvoudigd. Bovendien zijn met style sheets dingen mogelijk die met gewone html niet mogelijk zijn.

Invoegen

Er zijn drie manieren om style sheets met behulp van de <STYLE>-tag in een html-document in te voegen (deze codes moeten altijd in de <HEAD>-sectie staan):

*	een embedded style sheet <STYLE TYPE="text/css"> <!-- hier komen de css-codes // --> </STYLE>
*	een cascading style sheet (CSS) <LINK HREF="stylesheet.css" TYPE="text/css" REL="stylesheet">
*	een imported style sheet Als uitbreiding op een CSS kan je een andere stylesheet importeren: <LINK HREF="stylesheet.css" TYPE="text/css" REL="stylesheet"> <STYLE TYPE="text/css"> <!-- @import "stylesheet1.css"; // --> </STYLE>

Bij de laatste twee manieren staan de style sheet definities in een apart bestand en niet in het html-document zelf.

Mogelijkheden

Enkele mogelijke dingen die je in kan stellen zijn:

*	font-family: serif, sans-serif, cursive, monospace of fantasy
*	font-weight: bold
*	font-size: in pixels (bijvoorbeeld 10px) of punten (bijvoorbeeld 10pt)
*	font-style: italic
*	text-align: right, left of center
*	text-decoration: none (links niet onderstrepen)
*	color: #rrggbb of kleurnaam (bijvoorbeeld red)
*	margin-left, margin-right, margin-top, margin-bottom: in pixels (bijvoorbeeld 10px) of relatief aan paginagrootte (bijvoorbeeld 20%)
*	border-width: in pixels (bijvoorbeeld 10px)
*	border-color: #rrggbb of kleurnaam (bijvoorbeeld white)

Gebruik

Je kan style sheets op verschillende manieren gebruiken:

Koppelen aan een tag

Met behulp van tags verdeel je je html-document in verschillende secties (denk maar aan <BODY> - </BODY>, <H1> - </H1>, <FONT> - </FONT>). Je kan met style sheets nu een opmaak aan zo'n sectie toekennen, door die opmaak aan de begintag toe te kennen.

Voorbeeld

<STYLE TYPE="text/css">

</STYLE>
Het is ook mogelijk om bijvoorbeeld een opmaak te definieren voor een <B>-tag, maar alleen als die binnen een <H1>-tag voorkomt:
H1 B {font-size: 18pt}

Style classes

Als je een style class definieert, kan je een opmaak aan een naam koppelen. In je html-document kan je vervolgens weer naar die naam verwijzen.

Voorbeeld

<HEAD>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>
<BODY>
<H1 CLASS=GROEN>Deze kop is groen,</H1>
<H1>en deze niet.</H1>
</BODY>
all geeft aan dat de class bij alle tags gebruikt mag worden. Als een class bijvoorbeeld alleen bij <P> gebruikt mag worden, kan je een class definieren met bijvoorbeeld P.GROEN {color:#44CC22}.

Direct in de tag

Met behulp van de <DIV>-tag kan je makkelijk styles toewijzen aan stukken html die meerdere tags omvatten, met <SPAN> kan hetzelfde met stukjes tekst binnen dezelfde sectie.

Voorbeeld

*	Deze tekst is niet <SPAN STYLE="color:red">rood</SPAN>.

Links

*	De Webmees van Hans Werksman bevat veel informatie en links over onder andere style sheets
*	Netscape: http://developer.netscape.com/docs/manuals/communicator/dynhtml/index.htm
*	Microsoft: http://msdn.microsoft.com/workshop/author/default.asp