Skip to main content

Opdracht: Stijl je webpagina met CSS

Deze opdracht gaat verder met de bestanden van het project uit het vorige hoofdstuk.

Stap 1: Maak een Extern CSS-bestand

  1. Maak een nieuw bestand in je teksteditor.
  2. Sla het bestand op als styles.css in dezelfde map als je index.html.

Stap 2: Koppel je CSS-bestand aan je HTML

Voeg in de <head> van je index.html het volgende toe:

<head>
    <meta charset="UTF-8">
    <title>Over Mij</title>
    <link rel="stylesheet" href="styles.css">
</head>

Stap 3: Voeg CSS-stijlregels toe

1. Stijl de Body

In styles.css:

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
    color: #333;
    margin: 0;
    padding: 0;
}

2. Stijl de Koppen

h1 {
    color: #00539C;
    text-align: center;
    padding-top: 20px;
}

h2 {
    color: #027373;
    margin-left: 20px;
}

3. Stijl de Paragrafen

p {
    line-height: 1.6;
    margin: 0 20px 20px 20px;
}

4. Stijl de Lijst

ul {
    list-style-type: square;
    margin: 0 20px 20px 40px;
}

5. Stijl Afbeeldingen

img {
    display: block;
    max-width: 200px;
    height: auto;
    margin: 20px auto;
    border-radius: 50%;
}
a {
    color: #00539C;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

 

Stap 4: Bekijk je Webpagina

  1. Sla zowel index.html als styles.css op.
  2. Vernieuw je webpagina in de browser.

Je zou nu een opgemaakte versie van je webpagina moeten zien!

Back to top