Les 2: CSS
Van Stijl-attribuut naar CSS
In opdracht 1 heb je al wat stijl aan je HTML-documenten toegevoegd. Je hebt tekst bijvoorbeeld een kleurtje gegeven, of misschien de achtergrond van een blok. Ook heb je lettertypes aangepast. Bekijk nu de powerpoint over CSS ↗. Dit is een korte powerpoint, want CSS is niet ingewikkeld:
Wat je als <style>attribuut bij de HTML-tags schreef, kun je namelijk ook in de <head> plaatsen, binnen de <style>tags. Je gebruikt dan een iets andere syntax om aan te geven op welke HTML-tags de stijl van toepassing is, maar hoe de eigenschappen (of parameters) en waardes beschreven worden blijft hetzelfde. Een HTML-document bevat maar 1 style-tag en die zit altijd in de <head>. Meestal is het de laatste tag in de <head>. In de <style> tag wordt alle stijl verzameld die voor deze pagina geldt. Als je de inhoud van deze tag naar een apart bestand kopieert, heb je een .css-bestand. Je moet dan een <link> tag gebruiken om de HTML en de CSS weer met elkaar te verbinden. Het voordeel hiervan is dat je dezelfde code dan op meerdere pagina’s kan toepassen, liefst zelfs voor de hele website.
| 1 | Een voorbeeld van stijl in de html-tag | <p style=”color: black; size: 1em”> | Maakt de tekst van 1 paragraaf zwart en formaat 1 em |
| 2 | wordt css in de style-tag (in de <head>): | <style> p {color: black; size: 1em} </style> | Maakt de tekst van ALLE paragrafen op de pagina zwart en van formaat 1em, tenzij deze regel wordt gevolgd door een css-tag of html-stijl-attribuut die iets anders voorschrijft. |
| 3 | wordt in een css-document: | p {color: black; size: 1em} | Maakt de tekst van ALLE paragrafen op de website zwart en van formaat 1em, tenzij ze niet hetzelfde css-document gebruiken, of tenzij deze regel wordt gevolg door een css-regel of html-stijl-attribuut die iets anders voorschrijft. |
Bovenstaande tabel laat een aantal dingen zien:
- Stijl kan op drie plekken gedefinieerd worden, namelijk als attribuut van een html-tag, in de <style> tag in de <head>, of als een extern css-document.
- CSS heeft de volgende syntax: selector {eigenschap: waarde}
De Selector en { } zijn eigen aan css, maar de inhoud van de haakjes blijft altijd hetzelfde, waar en op welke manier de stijl ook gedefinieerd is. De combinatie “eigenschap: waarde” is een statement, of een css-regel. CSS kan oneindig veel regels bestaan welke van elkaar gescheiden worden door punt-komma’s (;). Voor leesbaarheid horen css-regels elk op een nieuwe regel geschreven te worden, maar om je document zo klein mogelijk te houden schrijf je ze juist allemaal achter elkaar (minify).
Met de selector selecteer je op welke tag(s) de stijl van toepassing is. De meestgebruikte selectoren zijn html-tags, de Class of ID-attributen en de a:hover selector. Lees meer meer over (complexe) selectoren op deze pagina over CSS selectoren. - Precedence: Als er meerdere stijl-regels voor een element bestaan, dan overschrijven ze elkaar volgens een bepaalde hierarchie: er zijn voorrangsregels. Je moet je indenken dat een computer code net als wij van boven naar beneden leest en interpreteert. Hij doorloopt dus eerst het CSS-document, daarna de <style>-tag van het document dat hij gaat afbeelden en als laatste de stijl-attributen van individuele html-tags in het document. Elke keer als hij een nieuwe stijl-regel tegenkomt, past hij die toe. Het effect is dat regels die vroeg in de verwerking zijn tegengekomen worden overschreven door regels die laat worden tegengekomen. Deze waterval-structuur geeft CSS ook zijn naam: Cascading Style Sheets.
IMPLEMENTATIE: STIJL SCHEIDEN VAN HTML
Je weet nu genoeg over CSS om het toe te passen in je eigen webpagina of website. Om van HTML naar HTML+CSS te gaan moet je stijl van je inhoud/HTML scheiden. Hoe je dit doet staat hieronder. Je oefent het ook in Opdr 3. Je eerste online site.
- Verwijder alle stijl die als attribuut in je html-tags staat, en verplaats dit naar een <style> tag in de <head>.
- Verwijder vervolgens de hele <style> tag, en kopieer de INHOUD van die tag (dus zonder de tags zelf) naar een tekst-document. Sla dat document op met de extensie .css, ergens in de buurt van (liefst naast) je html-documenten.
- Plaats nu een link-attribuut in elke html-pagina die van dezelfde css gebruik moet maken:
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”> - Heb je uitzonderingen in je pagina, of in een bepaald element? Plaats de bijbehorende stijl dan alsnog in de <head> van de pagina, of als attribuut bij het element.