Je eerste css regels
Last updated
Was this helpful?
Last updated
Was this helpful?
Je hebt nu de belangrijkste HTML tags geleerd. Hiermee kun je dus met de inhoud (wat staat er op de pagina?) en de globale indeling (eerst een paragraaf, dan een lijst, dan een ...) van je site bepalen. Maar tot nu toe heb je nog niet veel aan de layout en de aankleding kunnen doen (kleuren, lettertypen, plaatsing van dingen op de pagina, etc).
Daarom gaan we nu een tweede taal erbij halen: Cascading Style Sheets (CSS). Hiermee kun je de opmaak en layout van je webpagina veranderen.
Je gebruikt een apart bestand voor je CSS code en dat bestand wordt gekoppeld aan je html. In een Replit project krijg je dat bestand al "cadeau" en in de html code die hem koppelt staat al in de <head>- tag van je html:
In Replit kun je op je css bestand klikken in de bestandslijst aan de linkerkant om de inhoud te zien (hij is nu nog leeg). In je CSS-bestand maak je stijlregels voor je html pagina En dat werkt eigenlijk altijd als volgt:
Je selecteert welk HTML-element wilt wijzigen (bijvoorbeeld p voor paragrafen, h1 of h2 voor kopjes, etc). Dat heet de "selector". Daarna tussen geef je tussen { en } aan wat je wilt veranderen (dat zijn de "properties"). Dit doe je met eigenschap: waarde; tweetallen.
In je CSS bestand ziet het er bijvoorbeeld zo uit. (Dit maakt de achtergrond van de body, en dus de hele pagina, rood)
Schematisch kun je het zo zien. De selector selecteert een html element. Tussen de accolades { en } staat een lijstje met regels. Elke regel bestaat uit een "property" en een "value (een eigenschap en een waarde) en eindigt met een puntkomma ;
Je kunt ieder HTML-element selecteren met de selector. En je kunt meerdere eigenschappen tegelijk veranderen.