CSS in werking

uit de cursus Basiskennis CSS (2014)

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Volgende video: De versies van CSS

Geef een reactie of stel een vraag

Geef een reactie

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Basiskennis CSS (2014)

perm_identity Belinda | video_library 53 video's | query_builder 03:38:14

Webdesign met CSS (2014)

Met css bepaal je de layout en de vormgeving van een webpagina. CSS schrijf je in een apart bestand dat je koppelt aan de html-pagina’s. Hiermee koppel je de inhoud los van de vormgeving en dat biedt heel veel voordelen. Dankzij externe css-stijlbladen zorg je voor een consistente vormgeving en opmaak voor de gehele website. Leer op welke manier je CSS kan verbinden aan webpagina’s en gebruik te maken van de juiste css-selectors.

CSS blijft in ontwikkeling

CSS biedt een groot aantal css-stijlopdrachten waarmee je onder andere teksten en afbeeldingen perfect kunt vormgeven. CSS is continu in beweging omdat hier elke dag aan ontwikkeld wordt. Het is dus een taak om altijd op de hoogte te blijven van de nieuwe mogelijkheden en de veranderingen. Maar de basis is de basis, en die leer je in deze cursus. Vanuit dit startpunt kun je jezelf blijven ontwikkelen in deze krachtige manier van het consistent vormgeven van je HTML-pagina’s.

Doelgroep van deze cursus

Wil jij zelf de vormgeving van html-pagina’s bepalen dan is deze cursus absoluut een must.

Wat ga je leren

In deze online basiscursus  leer je de grondbeginselen van css (Cascading Style Sheets). Waaronder hoe je met grid en flexbox op een waanzinnig snelle, efficiënte en makkelijke manier snel een responsive design kunt maken die zich automatisch op elk formaat beeldscherm perfect aanpast. In deze cursus leer je direct hoe je jouw website responsive maakt met mediaqueries. Klinkt misschien ingewikkeld maar je zult merken dat dit reuze meevalt. En daarnaast is het vaardig worden van responsive design een ‘must’ voor webdesigners.

Vereiste voorkennis en vaardigheden

Voor het volgen van deze cursus heb je kennis en ervaring nodig van het vervaardigen en structureren van html-pagina’s.

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.