Hoe CSS te maken

Hoe een stijlstijl in te voegen

Wanneer een stijlstijl wordt gelezen, formateert de browser het HTML-document op basis daarvan. Er zijn drie manieren om een stijlstijl in te voegen:

Externe stijlstijl

Wanneer stijlen moeten worden toegepast op veel pagina's, is een externe stijlstijl een ideale keuze. Bij het gebruik van externe stijlstijlen kun je het uiterlijk van een hele site veranderen door een enkel bestand aan te passen. Elke pagina gebruikt een <link>-tag om de stijlstijl te koppelen. De <link>-tag staat in de kop van het document:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

De browser leest de stijlverklaringen uit het bestand mystyle.css en formateert het document op basis daarvan.

Externe stijlstijlen kunnen worden bewerkt in elk teksteditor. De bestand moet geen html-tags bevatten. De stijlstijl moet worden opgeslagen met de .css-uitbreiding. Hier is een voorbeeld van een stijlstijlbestand:

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

Laat geen spaties achter tussen de waarde en de eenheid. Als je "margin-left: 20 px" gebruikt in plaats van "margin-left: 20px", werkt dit alleen in IE 6, maar niet in Mozilla/Firefox of Netscape.

Interne stijlstijl

Wanneer een enkel document speciale stijlen vereist, moet je een interne stijlstijl gebruiken. Je kunt een interne stijlstijl definiëren in de kop van het document met de <style>-tag, zoals hieronder:

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

Inline-stijl

Omdat de presentatie en de inhoud worden gecombineerd, verliest inline-stijl veel voordelen van de stijlstijl. Gebruik deze methode met mate, bijvoorbeeld wanneer de stijl slechts eenmaal op een element moet worden toegepast.

Om inline-stijlen te gebruiken, moet je de stijl (style) eigenschap in de relevante tag gebruiken. De eigenschap Style kan elke CSS-eigenschap bevatten. Dit voorbeeld toont hoe je de kleur van een paragraaf en de linkse buitendoolhofafstand kunt wijzigen:

<p> style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

Multiple Styles

If some properties are defined by the same selector in different style sheets, the property values will be inherited from the more specific style sheet.

For example, the external stylesheet has three properties for the h3 selector:

h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
  }

While the internal stylesheet has two properties for the h3 selector:

h3 {
  text-align: right; 
  font-size: 20pt;
  }

If this page with an internal stylesheet is also linked to an external stylesheet, the style obtained by h3 is:

color: red; 
text-align: right; 
font-size: 20pt;

The color property will be inherited from the external stylesheet, while text alignment (text-alignment) and font size (font-size) will be replaced by the rules in the internal stylesheet.