CSS in werking

In deze video wil ik even kort en snel de verschillende soorten stijlbladen laten zien en toepassen binnen een html document.

Ik kijk hier in dreamweaver naar een html document.

waarvoor nog geen enkele css stijl is geschreven.

En toch wordt de pagina al met een bepaalde vormgeving getoond.

Dit is de browser gestuurde vormgeving.

Als ik deze pagina wil bekijken in een browser, bijvoorbeeld in Google Chrome.

En ik vraag met de rechtermuisknop ingedrukt voor element inspecteren.

Dan toont deze browser meer informatie over het geselecteerde.

In dit geval de h element.

En dan kijk ik welke stijl hierop toegepast wordt.

En dan wordt hier weergegeven dat de vormgeving van de h wordt bepaald door de User Agent Style Sheet.

Dit is de browser gestuurde vormgeving.

Keer ik terug naar dreamweaver.

Je kunt ook meer informatie vragen over de html pagina, bijvoorbeeld in Firefox.

Je kunt deze browser uitbreiden met bepaalde extensies. Zo heb je onder andere ook FireBug.

En FireBug die toont ook meer informatie over de broncode.

Moet ik zelf wat meer handelingen verrichten. In de body staat een h, die klik ik aan.

En jammer genoeg geeft Firefox geen informatie over zijn eigen browser gestuurde vormgeving.

Keer ik weer terug naar dreamweaver.

Ik koppel aan deze html pagina

een stijlblad en zelfs de voorvertoning van dreamweaver zal dit stijlblad proberen voor te vertonen. Weet wel...

...dit is niet echt een browser, maar het is een soortement van namaak browser in dreamweaver zelf.

En je kan nooit volledig vertrouwen op deze vormgeving.

Dus het beste wat je kunt doen is deze te bekijken in een browser.

Ik bekijk deze pagina opnieuw via voorvertoning in Google Chrome. Ik sla de wijzigingen op.

Ik vraag opnieuw, rechtermuis ingedrukt, voor element inspecteren.

En je ziet nu dat de browser gestuurde vormgeving van de h.

Wordt overschreven door de h die is beschreven in het bestand 'stijlblad.css'.

Wat ik zojuist als extern stijlblad heb gekoppeld aan mijn html document.

In de local root folder van deze html pagina.

Heb ik niet alleen stijlblad.css, maar een tweede versie die heet 'stijlblad-V.css' staan.

Om te tonen hoe eenvoudig het is om de vormgeving van een html pagina te wijzigen.

Wijs ik nu het andere stijlblad aan.

Als ik één keer klik in de pagina, dan zie je dus dat exact dezelfde content op een hele andere manier wordt vormgegeven.

Omdat deze een andere vormgeving beschrijft in zijn css-stijlen.

Ik keer even terug naar mijn vorige stijlblad. Zo!

En ik maak een intern stijlblad aan. Dat doe je in de head van het html document, dus ik plaats hier onder...

...nog voor einde head ee intern stijlblad.

Op dit moment is het een heel klein stijlblad het bestaat enkel uit de beschrijving van,

de vormgeving voor de h en de h. Op het moment dat ik hierop klik.

Dan zie je dus dat de koppen wijzigen van stijl.

Het cascading effect is nu dus duidelijk geworden.

Want we hebben zojuist gezien dat in het stijlblad de kopjes bruin waren.

Vervolgens plaats ik daarna een inline stijlblad.

Die wordt daarna ingelezen door de browser.

En hierin overschrijf ik een eerdere stijlopdracht.

Dat gaan we opnieuw bekijken in Google Chrome

Ik vraag opnieuw via, rechtermuisknop, element inspecteren.

En je ziet dat. in eerste instantie de browser gestuurde vormgeving, wordt overschreven

door het stijlblad.css, het externe stijlblad.

En vervolgens wordt overgenomen door het interne stijlblad.

En dus wordt overschreven. Hij geeft ook nog eens aan wat precies wordt overschreven.

In dit geval de kleur.

Dus die worden doorstreept in de eerdere stijlopdrachten.

Dan als laatste wat ik wil laten zien.

Is dat je ook inderdaad een inline stijl kunt schrijven. en dat doe je als volgt.

Stijl=" "

En vervolgens tussen de quotes, plaats ik color:red

En dit wordt ook al direct in dreamweaver getoond maar ik wil het alsnog bekijken in Google Chrome.

Sla de wijzigingen op.

En je ziet dat ook in Chrome de kop rood is geworden, ik ga naar 'element inspecteren'.

En daar zien we dus nu het einde van het lijstje. Dus!

De browser gestuurde vormgeving wordt overschreven door het 'stijlblad.css', die zou hem bruin hebben gemaakt.

Daarna het inline stijlblad, die het groen heeft gemaakt. Wordt weer overschreven door een inline stijl.

Die ervoor zorgt dat de kop in het rood verschijnt.

Dan wil ik nog één keer laten zien hoe Firefox dit weergeeft.

Voorvertoning in Firefox.

Firefox kun je uitbreiden met de Addon FireBug.

En als ik hier ga kijken naar het h element.

Dan geeft Firefox mij op de volgende wijze weer welke stijlen betrekking hebben op de h.

Jammer genoeg geeft Firefox geen enkele informatie over zijn eigen browser gestuurde vormgeving.

Hij pikt het op vanaf het externe stijlblad.css.

Vervolgens het interne stijlblad, toegepast in de head van de index.html.

En dan is er een inline stijl toegepast op de h.

En die wordt als laatste ingelezen en is uiteindelijk dan ook bepalend voor de vormgeving.

Hopelijk heeft dit even op een hele snelle manier inzicht gegeven.

In de werking van een extern stijlblad, intern stijlblad en een interne stijl.

En niet te vergeten, elke browser heeft zijn eigen browser gestuurde vormgeving.