Cascading Style Sheets, of CSS, is een taal die een webpagina vertelt hoe deze eruit moet zien. CSS voegt kleur, stijl en lay-out toe aan de eenvoudige structuur van een website. Net zoals je je kleding uitkiest om je goed te voelen en er netjes uit te zien, helpt CSS een webpagina er aantrekkelijk en aantrekkelijk uit te zien. In webontwikkeling gebruiken we CSS om de kleur, grootte en positie van tekst en vakken op de pagina te wijzigen. Deze les introduceert je de basisprincipes van CSS in eenvoudige taal. We leren wat CSS is, waarom het belangrijk is en hoe het samenwerkt met HTML.
CSS staat voor Cascading Style Sheets. Het is een speciale taal die gebruikt wordt om webpagina's te stylen. Zie CSS als de verf en decoraties voor een gebouw. Het gebouw bestaat uit HTML en CSS maakt het mooi. Met CSS kun je de achtergrondkleur, lettertypen en de ruimte rond elementen op je webpagina aanpassen. CSS is een tool waarmee webdesigners websites er beter en leuker uit kunnen laten zien.
Stel je voor dat je een tekening inkleurt. De lijnen van de tekening vormen de basisstructuur van een website. CSS is als de kleurpotloden en stiften die de tekening tot leven brengen. Met een paar simpele regels kun je je hele tekening van saai naar kleurrijk veranderen!
CSS wordt gebruikt om websites aantrekkelijk en gebruiksvriendelijk te maken. Het houdt de stijl gescheiden van de inhoud. Dit betekent dat de tekst en afbeeldingen op de pagina (aangeleverd door HTML) hetzelfde blijven, terwijl CSS bepaalt hoe ze eruitzien. Wanneer u de stijl bijwerkt, hoeft u de inhoud niet aan te passen. Deze scheiding helpt webontwikkelaars sneller te werken en maakt websites prettiger om te bezoeken.
Zie CSS als de outfit die je kiest. Als je andere kleding draagt, zie je er anders uit, maar je bent nog steeds dezelfde persoon. CSS verandert het uiterlijk van een website zonder de informatie erop te veranderen. Dit maakt het eenvoudig om het ontwerp van een hele website bij te werken door slechts één CSS-bestand te bewerken.
CSS werkt hand in hand met HTML. HTML vormt de basis die bepaalt waar dingen op een webpagina komen. CSS komt vervolgens in beeld om kleuren, lettertypen en stijl toe te voegen. Wanneer een browser een webpagina laadt, bouwt hij eerst de structuur op met HTML en past vervolgens de in CSS gedefinieerde stijlen toe.
CSS is geschreven als een set regels. Elke regel bestaat uit twee delen: een selector en een declaratieblok. De selector vertelt de browser welk HTML-element gestyled moet worden. Het declaratieblok bevat een of meer declaraties. Elke declaratie heeft een eigenschap en een waarde. De eigenschap is wat u wilt wijzigen en de waarde geeft aan hoe u dit moet doen.
Om bijvoorbeeld de achtergrondkleur van de pagina op lichtblauw in te stellen, kunt u een regel schrijven die er als volgt uitziet:
<code>lichaam {
achtergrondkleur: lichtblauw;
</code>Met deze eenvoudige regel verandert u de achtergrond van de hele pagina.
Een basis CSS-regel volgt een eenvoudig patroon. Het toont de selector en een blok met eigenschappen en waarden. Het patroon ziet er als volgt uit:
<code>selector {
eigenschap: waarde;
</code>Hier kiest de selector welk HTML-element er moet worden geselecteerd. De eigenschap is wat u wilt wijzigen en de waarde is hoe u het wilt wijzigen.
Als u bijvoorbeeld wilt dat alle tekst in een alinea blauw is, schrijft u:
<code>p {
kleur: blauw;
</code>Deze regel vertelt de webbrowser dat elk <p> (alinea)-element blauwe tekst moet hebben.
Met CSS-selectors kun je bepalen welke elementen op je webpagina door de stijlregels worden beïnvloed. Er zijn verschillende soorten selectors, en elk type werkt net iets anders.
Deze verschillende selectors geven je veel mogelijkheden om specifieke onderdelen van je webpagina te stylen. Ze stellen je in staat om elementen nauwkeurig te targeten en te bepalen hoe ze eruit moeten zien.
CSS biedt veel verschillende eigenschappen die u kunt gebruiken om uw webpagina te stylen. Met elke eigenschap kunt u een specifiek aspect van de weergave van een element wijzigen. Enkele veelvoorkomende eigenschappen zijn:
Elke CSS-eigenschap wordt gevolgd door een waarde. Om tekst bijvoorbeeld een rode kleur te geven, kunt u het volgende schrijven:
<code>p {
kleur: rood;
</code>Deze eenvoudige regel zorgt ervoor dat alle alinea's rode tekst hebben. De eigenschap 'kleur' bepaalt hoe de tekst wordt weergegeven en de waarde 'rood' geeft aan welke kleur de tekst moet hebben.
Het woord "cascading" in CSS betekent dat stijlen van de ene regel naar de andere kunnen vloeien. Als twee regels op hetzelfde element van toepassing kunnen zijn, kan de volgorde bepalen welke wint. Dit is vergelijkbaar met het stapelen van blokken, waarbij het ene blok soms een deel van het andere bedekt.
Een veelvoorkomende regel is dat stijlen die direct in een HTML-element worden geschreven (zogenaamde inline-stijlen) de stijlen in je CSS-bestand overschrijven. Een andere regel is dat als een bovenliggend element een stijl heeft, de onderliggende elementen die stijl kunnen overnemen, tenzij anders aangegeven.
Als u bijvoorbeeld de tekstkleur van een <div> instelt op groen, wordt de tekst binnen de <div> vaak ook groen weergegeven vanwege overerving. Dit zorgt voor een consistent ontwerp op een webpagina.
Met CSS kun je kleuren op veel manieren wijzigen. Je kunt gangbare kleurnamen gebruiken zoals rood , blauw en groen . Je kunt ook hexadecimale codes gebruiken, zoals <code>#FF0000</code> voor rood, of RGB-waarden zoals <code>rgb(255, 0, 0)</code>.
Lettertypen zijn een ander belangrijk onderdeel van CSS. Een lettertype is vergelijkbaar met de schrijfstijl die je in een notitieboek kiest. In CSS kun je het lettertype, de grootte, dikte en stijl wijzigen. Als je bijvoorbeeld wilt dat je alinea's in Arial worden weergegeven, kun je het volgende gebruiken:
<code>p {
lettertype: Arial, schreefloos;
</code>Deze regel vertelt de browser om de tekst in het Arial-lettertype weer te geven als dat beschikbaar is, en om een ander soortgelijk lettertype te gebruiken als dat niet beschikbaar is.
Door kleuren en lettertypen te wijzigen met CSS wordt de tekst gemakkelijker te lezen en wordt uw webpagina interessanter om naar te kijken.
Het CSS Box Model is een manier om te begrijpen hoe de verschillende onderdelen van een element op een pagina zijn gerangschikt. Elk element is als een doos. Het boxmodel bestaat uit vier onderdelen:
Stel je een foto voor. De foto zelf is de inhoud. De passe-partout die de foto omgeeft, fungeert als opvulling. Het frame dat alles bij elkaar houdt, is de rand. En de ruimte rond het frame is de marge. Met dit model kun je ervoor zorgen dat alle onderdelen van je ontwerp de juiste ruimte en balans hebben.
CSS gaat niet alleen over kleuren en lettertypen; het helpt je ook bij het ordenen van elementen op een webpagina. Dit noemen we lay-out en positionering. Met CSS bepaal je zelf waar elk element op de pagina verschijnt.
Er zijn verschillende manieren om de lay-out van een webpagina te beheren, waaronder:
Het gebruik van deze lay-outtechnieken is vergelijkbaar met het ordenen van speelgoed op een plank. U bepaalt zelf waar elk stuk speelgoed komt, zodat het voldoende ruimte heeft en er netjes uitziet. Dit maakt uw webpagina overzichtelijker en aantrekkelijker.
Hier is een voorbeeld van hoe HTML en CSS samenwerken. Deze voorbeeldcode toont een eenvoudige webpagina met wat styling:
<code><!DOCTYPE html>
<html>
<hoofd>
<stijl>
lichaam {
achtergrondkleur: lichtblauw;
}
h1 {
kleur: marineblauw;
lettergrootte: 24px;
}
P {
kleur: groen;
lettergrootte: 18px;
}
</stijl>
</hoofd>
<lichaam>
<h1>Mijn eerste webpagina</h1>
<p>Dit is een eenvoudige webpagina, opgemaakt met CSS.</p>
</body>
</html></code>Deze code creëert een webpagina met een lichtblauwe achtergrondkleur. De koptekst is marineblauw en de alineatekst is groen. De CSS binnen de <code><style></code>-tag laat zien hoe regels worden geschreven en toegepast.
Je kunt CSS op drie manieren aan je HTML toevoegen. Elke methode heeft zijn eigen toepassing, afhankelijk van de situatie:
De externe methode is de meestgebruikte methode in professionele webontwikkeling, omdat deze de HTML overzichtelijk houdt en u de stijlen op meerdere pagina's tegelijk kunt bijwerken.
CSS is op veel manieren erg nuttig. Hier zijn enkele voordelen van het gebruik van CSS in webontwikkeling:
Het gebruik van CSS is als het hebben van een speciale gereedschapskist. Elk gereedschap in de gereedschapskist helpt je om het uiterlijk van je webpagina gemakkelijk te verbeteren. Naarmate je oefent, zul je merken hoe krachtig CSS kan zijn om websites mooi en gebruiksvriendelijk te maken.
Elke website die je bezoekt, maakt op de een of andere manier gebruik van CSS. Van je favoriete tekenfilmsites tot schoolprojectpagina's, CSS zorgt voor een leuke en gemakkelijk leesbare lay-out. Wanneer je een kleurrijke webpagina ziet met nette spaties en duidelijke tekst, dan is CSS aan het werk.
Denk aan het ontwerp van populaire websites, zoals die voor games, tekenfilms of online verhalen. Het doordachte gebruik van kleuren, lettertypen en lay-outs maakt deze websites spannend en boeiend. CSS wordt ook gebruikt in apps en mobiele sites, waardoor de content er zowel op grote schermen als op kleine telefoons goed uitziet.
In het dagelijks leven is CSS vergelijkbaar met het inrichten van een kamer. Je kunt een thema kiezen voor je kamer, kleurrijke foto's ophangen en je meubels netjes neerzetten. CSS doet hetzelfde voor websites. Het brengt orde en schoonheid in de digitale ruimte, waardoor deze prettig is voor bezoekers.
Dit zijn de belangrijkste punten die we over CSS hebben geleerd:
CSS is een essentieel onderdeel van webontwikkeling en zorgt ervoor dat websites er mooi en gebruiksvriendelijk uitzien. Terwijl je verder onderzoekt en je eigen webpagina's bouwt, onthoud dan dat CSS jouw gereedschap is om je creativiteit te uiten. Experimenteer met kleuren, lettertypen en lay-outs, want elke kleine verandering draagt bij aan de magie van een goed ontworpen website.
Blijf oefenen en observeer je favoriete websites. Let op hoe verschillende stijlen worden gebruikt om je aandacht te trekken en een prettige ervaring te creëren. Na verloop van tijd zul je zien hoe krachtig CSS kan zijn bij het transformeren van eenvoudige HTML-structuren tot visueel aantrekkelijke webpagina's.