Opmaak

En webpagina moet natuurlijk ook een klein beetje prettig ogen. Hiervoor wordt CSS gebruikt. Uiteraard kunnen we deze CSS code zelf schrijven. In deze cursus maken we echter gebruik van een CSS framework die bijna alle CSS code alvast voor ons heeft geschreven. Toepassen is het enige wat we nog moeten doen. Er zijn veel verschillende CSS frameworks. Bijvoorbeeld

Wij zullen in deze cursus tailwindcss gebruiken. Dit is niet altijd even eenvoudig, maar de documentatie is goed. Er zijn voorbeelden en bijna alles is ermee mogelijk. Het is zeer populair en lijkt erg veel op de CSS die jullie al geleerd hebben.

Tailwindcss

Er zijn vele manieren om Tailwindcss aan je project toe te voegen. De meest eenvoudige manier is via CDN. Er wordt dan van een server een script ingeladen en daarmee kunnen we alles gebruiken van Tailwindcss. Dit is zeer eenvoudig toe te voegen.

<!doctype html>
<html lang="en">
<head>
    <title>Tailwind voorbeeld</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body>

</body>
</html>

Verklaring:

<script src="https://cdn.tailwindcss.com"></script>: Dit moet worden toegevoegd om tailwindcss te kunnen gebruiken.

Alle documentatie van Tailwindcss is te vinden op hun website.

Daarnaast is er een pagina met diverse gratis componenten die je als basis voor een pagina kan gebruiken. Deze kan je hier vinden.

Tailwindcss bestaat uit classes en die kun je gebruiken in class="" attribuut

<!doctype html>
<html lang="en">
<head>
    <title>Tailwind voorbeeld</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body>
<h1 class="text-4xl text-center text-indigo-700">Tailwindcss voorbeeld</h1>
<p class="mx-10 mt-10">Dit is een voorbeeld van Tailwind CSS</p>
</body>
</html>

Verklaring:

<h1 class="text-4xl text-center text-indigo-700"> tekst wordt 4x zo groot, tekst wordt gecentreerd en heeft kleur indigo.
<p class="mx-10 mt-10"> De paragraaf heeft een horizontale (x) margin van 10 en een margin-top van 10

Het komt er dan zo uit te zien

Bovenstaande bestand kan je hier downloaden

tailwindcss.php

Probeer wat te spelen met de margin, padding, text color, background color en font size

<body class="bg-blue-100">