CSS

De vormgeving van een website wordt gedaan met CSS (Cascading Style Sheets).
CSS is een aparte programmeertaal, maar werkt samen met HTML.

Er zijn 3 manieren om CSS code aan je HTML toe te voegen:

Met een style='' attribuut in een HMTL tag.
Met <style></style> tags in de <head> van je pagina.
Dit is handig als je de styling over de hele pagina hetzelfde wilt hebben.
In een apart bestand style.css waarnaar je verwijst met <link rel='stylesheet' href='style.css'> in de <head> van je pagina.
Dit is handig als je de styling over meerdere pagina's hetzelfde wilt hebben.

Hierna gaan we die 1-voor-1 toepassen.

Laten we de kleuren op de pagina aanpassen.
Om de pagina een lichtblauwe achtergrond te geven met groene tekst, kun je dat in bijvoorbeeld de <body> tag met een style='' attribuut als volgt toevoegen:

<body style='background-color:lightblue; color:green'>

Zoals je ziet bestaat CSS code uit een eigenschap met een :, gevolgd door een waarde.
Meerdere eigenschappen met waarde houd je gescheiden met een puntkomma ;.

Handige CSS eigenschappen zijn:

Eigenschap	Naam	Voorbeeld waarde
Achtergrondkleur	background-color:	white
Tekstkleur	color:	black
Lettertype	font-family:	Courier New
Lettertype	font-family:	Arial,sans-serif
Lettergrootte	font-size:	12pt
Lettergrootte	font-size:	15px
Breedte	width:	500px
Breedte	width:	80%
Uitlijning	text-align:	center
Rand	border:	solid blue 1px
Rand	border:	dotted yellow 3px
Ronde hoeken	border-radius:	5px
Ruimte rondom	padding:	4px

Als je meerdere paragraven hebt die je allemaal dezelfde stijl wilt geven, kun je dat ook samenvoegen tot één codeblok tussen <style></style> tags in de <head> van de pagina.
Bij dat samenvoegen begin je met de naam van het HTML element, met daarachter de CSS eigenschappen tussen { en }.
Bijvoorbeeld:

<head>
	<style>
		body {
			background-color: lightblue;
			color: green
		}
		p {
			border: solid blue 1px;
			padding: 5px
		}
	</style>
</head>

Waarschijnlijk wil je niet álle gelijke HTML elementen op een pagina dezelfde stijl geven.
Je kunt dan een class='' attribuut gebruiken voor die specifieke HTML tags.
De class bevat dan een zelfverzonnen naam, en die naam voeg je als blok aan je CSS toe met een punt ervoor.
Een voorbeeld:

<head>
	<style>
		.mijnstijl {
			border: solid red 1px;
			color: red
		}
	</style>
</head>
<body>
	<p class='mijnstijl'>
		Mijn paragraaf
	</p>
</body>

Om niet in elk html bestand dezelfde CSS code te hoeven zetten (vooral ladstig als je het op meerdere pagina's tegelijk wilt aanpassen), kun je de code tussen de <style></style> ook in een los bestand zetten.
Open in je teksteditor een nieuw bestand, plak je CCS code erin, en sla het bestand op als style.css. Let op dat je bij 'Opslaan als' kiest voor Alle bestanden (*.*).
In de <head> van elke pagina kun je dan dezelfde CSS toepassen met de tag <link rel='stylesheet' href='style.css'> in de <head>.
Bijvoorbeeld:

<head>
	<title>Extra pagina met dezelfde stijl</title>
	<link rel='stylesheet' href='style.css'>
</head>

Tip:
Door in de browser met je rechter muisknop op een element te klikken en te kiezen voor 'Inspecteren' opent de console met onder andere de CSS voor dat element. Je kunt daarin rechtstreeks de CSS aanpassen en live het effect zien!
(Dat kan niet worden opgeslagen, aanpassingen moet je overnemen in het html of css bestand).

Terug naar begin

Styling: CSS