Deze les is gemaakt door: V van Dalen

Cssles 2; Het maken en toepassen van de css-soorten?

Er zijn verschillende manieren om css toe te voegen aan een website! U moet de CSS als het ware toevoegen aan de html en dat kan op verschillende manieren!
De verschillende soorten op een rijtje ook wordt erbij verteld hoe het toegepast moet worden!

Linked stylesheets

In dit geval staat de css buiten het bestand en dient u het op te roepen! De csscodes staan dus in een apart bestandje! Dit wordt vaak default.css, opmaak.css style.css genoemd!
De code zet u in de <head> van de html met de volgende code;

<LINK HREF="naambestand.css" TYPE="text/css" REL="stylesheet">

In naambestand.css moeten dan alle csscodes voor tekst, linkkleur enzovoort staan. Met de code(Link href...) verwijst u naar naambestand.css en zo activeert u de css!
U koppelt dus een los cssbestand aan een htmlbestand!! In zo'n bestand kunt u de selectors en properties gewoon plaatsen, bijvoorbeeld
H4{color:#000080} in een leeg bestand zetten en dan opslaan als *.css!
Tip: Het is handig om te beginnen met <style> en te eindigen met </style>

Embedded stylesheets

In dit geval staat de css gewoon in de html. Ook hier dient u de csscodes in de html te plaatsen! Ik kan u het principe laten zien met dit simpele voorbeeld; Ik neem dit keer de subkoppen als voorbeeld!!
U plaatst dit een de <head>
<style type="text/css">

</style>
Nu staan alle subkoppen(in de html h4) in het donkerblauw. Ook kan ik na dit voorbeeld de structuur even beschrijven! Css begint met <style> en eindigt dus met </style>
In het begin geven we even aan waarom het gaat en daarom krijgen we dit; <style type="text/css">. Zo weet de browser dat het om css gaat! Na dit gebeuren krijgen we  . De erkende html -en javascript kenner denk gelijk aan een comment! Want met een comment kunt u in de html en javascript tekst aanbrengen die bijvoorbeeld dient als uitleg zonder dat de browser die toont!
 heeft een beetje dezelfde functie! Sommige browsers ondersteunen css niet en daarom wordt deze code gebruikt zodat de oude browsers deze codes niet op het scherm laten zien!
Dus krijgen we als eindresultaat

<style type="text/css">

</style>

Inline Stylesheets

Bij deze vorm van css gaan we per letter, zin, alinea kleur toevoegen, maar dat heeft u al gezien in les 1 van de csscursus!!
Die komt er dus zo uit te zien!
<h4 style="color:#000080">t Webhulpje de site voor webmasters</h4>

Niet erg handig dus, als u de andere voorbeelden heeft gezien! Maar u kunt wel per letter de kleur en lettertype aan passen en het is nog altijd makkelijker dan html.

Wat heeft u geleerd en wat moet u kunnen
<><De 3 manieren van css toepassen
<><Enkele voorbeelden ook kunnen uitvoeren!

Dit is het einde van deze les. Wat gaan we in de volgende les leren?? Wat zijn classes en ID's en welke css gaat boven een ander??

Vincent

-------------------------------------------------------------------------------------------------------------------------------------------------
Woordenlijst
h4 - Een htmlcode die koppen maakt. Er zijn verschillende grootte waarvan h1 de grootste is! h4 is een soort subkop.
browser - Bladerprogramma waar u websites mee kunt bekijken!
comment- In de verschillende programmeer en opmaaktalen kunt u comment aanbrengen. Comments verschijnen niet op het scherm van de browser, want comment dienen als uitleg!