Tot nu toe hebben we te maken gehad met de standaard vormgeving van de browser wanneer deze HTML code kreeg voorgeschoteld. Deze standaard vormgeving heeft er waarschijnlijk voor gezorgd dat de geplaatste content links is uitgelijnd, alles onder elkaar staat, de tekst zwart is en het lettertype een schreef heeft. Wanneer we iets meer willen dan de standaard vormgeving is het gebruik van CSS code de beste oplossing. In de onderstaande oefening gaat je met deze CSS code aan de slag.
De code die we gebruiken voor de vormgeving plaatsen we in een aparte tekst bestand. Je kunt met jouw teksteditor een nieuw document aanmaken en deze vervolgens in een sub-map van jouw website-map opslaan. Een logische naam voor de sub-map zou css zijn. Je mag de naam voor het css bestand zelf kiezen. In het voorbeeld heet het css bestand layout.css. In dit nieuwe tekst bestand plaatst je de onderstaande code.
Omdat de teksteditor Atom in het voorbeeld kleur geeft aan bepaalde elementen is het eenvoudig om de verschillende onderdelen te omschrijven. De CSS code begint met het rode woord body. Alle rode tekst in de CSS file worden kiezers genoemd en ze verwijzen naar de HTML elementen die je eerder heeft getypt in het HTML bestand. Het woord body verwijst dus naar de body-container in de HTML en dat is het volledige, zichtbare vlak in jouw browser. Door aan die body-kiezer een eigenschap background-color toe te voegen is het mogelijk de achtergrondkleur van de website te veranderen van wit naar licht grijs. De gele waarde die toegekend is aan de eigenschap achtergrondkleur is een hexadecimale kleurcode. Je kunt deze kleurcode bij https://www.w3schools.com/colors/colors_picker.asp opzoeken.
Tussen de eigenschap en de toegekende waarde wordt altijd een dubbele punt geplaatst en na elke toegekende waarde wordt altijd een puntkomma geplaatst om onderscheid te maken met de volgende eigenschap. Tot slot kunt je aan de body-kiezer meerdere eigenschap-regels toevoegen en al die regels worden door middel van de accolades { } bij elkaar gehouden.
Tip: de komma tussen de h1 en de p-kiezer kunt je het beste lezen als een "en". Als je de komma in dit voorbeeld weglaat zal geen enkele tekst Arial worden en zal de paragraaf niet inspringen met 10 pixels.
Als je wilt dat het nieuwe CSS bestand ook daadwerkelijk wordt meegenomen (ingelezen) tijdens het openen van het HTML bestand dan is het nodig dat je in de head van het HTML bestand een verwijzing opneemt naar het nieuwe CSS bestand. De code hiervoor ziet er als volgt uit.
Er wordt een link-tag geplaatst in de head. Hiermee wordt er een koppeling gelegd naar een ander bestand. Vervolgens heeft je het attribuut href al eerder gezien bij het maken van een link in het vorige hoofdstuk. Belangrijk in dit geval is dat je naast de bestandsnaam van de CSS bestand ook het zogenaamde pad naar dit bestand opgeeft. In dit voorbeeld wordt de bestandsnaam voorafgegaan door de map-naam waar het bestand zich in bevindt. Uiteindelijk is er nog een tweede attribuut toegevoegd, namelijk het rel attribuut. Dit attribuut kunt je het beste lezen als "relatie". De waarde die aan het rel-attribuut is toegekend is "stylesheet". M.a.w. de link/relatie die gemaakt wordt is naar een CSS bestand. (Je kunt ook een link leggen naar een javascript bestand en dan zal de waarde van het attribuut rel geen stylesheet meer zijn.) Bekijk het resultaat in jouw browser, als het goed is komt het overeen met onderstaande afbeelding.