Oefening: uw HTML-stijl maken met CSS

  • 10 minuten

Met trapsgewijze opmaakmodellen (CSS) kunt u opgeven hoe uw pagina eruit moet zien. Het basisidee is om te definiëren wat de stijl moet zijn voor de elementen die u in uw HTML-pagina's gebruikt. Terwijl de HTML-elementen uw inhoud definiëren, definiëren CSS-stijlen hoe deze inhoud eruitziet.

U kunt bijvoorbeeld afgeronde hoeken toepassen of een achtergrond met kleurovergang aan een element geven, of u kunt CSS gebruiken om op te geven hoe hyperlinks eruitzien en reageren wanneer u ermee communiceert. U kunt ook geavanceerde pagina-indelingen en animatie-effecten uitvoeren.

U kunt stijlen toepassen op specifieke elementen, alle elementen van een specifiek type of klassen gebruiken om veel verschillende elementen te stylen.

In deze oefening past u CSS-stijlen toe op HTML-pagina-elementen en voegt u enkele CSS-code toe om uw lichte en donkere thema's te definiëren. Vervolgens controleert u de resultaten in de ontwikkelhulpprogramma's van uw browser.

Externe CSS

In de vorige les over HTML hebt u vanuit HTML een extern CSS-bestand gekoppeld.

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Task Timeline</title>
  <link rel="stylesheet" href="main.css">
...

Een voordeel van externe CSS is dat meerdere HTML-pagina's kunnen worden gekoppeld aan hetzelfde CSS-bestand. Als u een wijziging aanbrengt in de CSS, wordt uw stijl voor elke pagina bijgewerkt. Wanneer u een HTML-bestand gebruikt voor uw pagina-inhoud, een CSS-bestand voor stijl en een JavaScript-bestand voor interactie, wordt het scheiding van zorgen genoemd.

Zoals eerder beschreven, kunt u css ook rechtstreeks schrijven in HTML, wat interne CSS wordt genoemd. Zelfs voor een eenvoudige website zijn er zoveel CSS-regels die de HTML-pagina snel onoverzichtelijk kan maken. Met meer dan één pagina zou dezelfde CSS vaak worden herhaald en lastig te beheren.

CSS-regels

CSS-regels zijn de wijze waarop u stijlen toepast op HTML-elementen. CSS-regels hebben een selector, die wordt gebruikt om het element (of elementen) uit te drukken waarop de stijlen moeten worden toegepast.

Open het main.css bestand in Visual Studio Code en voer het volgende in:

body {
    font-family: monospace;
}

ul {
    font-family: helvetica;
}

Dit codefragment bevat twee regels. Elke regel heeft:

  • Een selector. body en ul zijn de selectors van de twee regels en worden gebruikt om te selecteren op welke elementen de stijlen van toepassing zijn.
  • Een opening accolade ({).
  • Een lijst met stijldeclaraties die bepalen hoe de geselecteerde elementen eruit moeten zien.
  • Een afsluitende accolade (}).

De selector selecteert bijvoorbeeld ul het <ul> HTML-element op de pagina om er stijlen op toe te passen. De declaratie is font-family: helvetica, en bepaalt wat de stijl moet zijn. De naam van de eigenschap is font-family, en de waarde is helvetica.

Zoals u hierna ziet, kunt u uw eigen aangepaste namen voor elementen definiëren.

Selecteerders

Met id's en klassekiezers kunt u stijlen toepassen op aangepaste kenmerknamen in uw HTML. U gebruikt een id om één element te stylen, terwijl u klassen gebruikt om meerdere elementen te stylen.

  1. Kopieer de volgende code en voeg deze toe aan uw CSS-bestand. Plak deze na de afsluitende accolade voor de ul selector die u eerder hebt toegevoegd.

    li {
  list-style: circle;
}

.list {
  list-style: square;
}

#msg {
  font-family: monospace;
}

    De voorgaande code bevat drie CSS-regels, waarbij de laatste twee regels aangepaste kenmerken gebruiken om elementen te selecteren: .list en #msg.

    • .list is een klassekiezer. Elk HTML-element met een class kenmerkset haalt list de stijlen op die in deze selector zijn gedefinieerd.

    • #msg is een id-selector. Het HTML-element waarvoor id het kenmerk is ingesteld, msg haalt de stijlen op die binnen deze selector zijn gedefinieerd.

    De namen die u voor uw selectors gebruikt, kunnen willekeurig zijn, zolang ze overeenkomen met wat u in de HTML hebt gedefinieerd.

  2. Sla uw werk op door Control+S te selecteren in Windows of Command+S in macOS.

Bekijken in browser

  1. Als u een voorbeeld van Visual Studio Code wilt bekijken, klikt u met de rechtermuisknop op het index.html bestand in Explorer en selecteert u Openen in standaardbrowser.

    Belangrijk

    Hoewel u het main.css bestand net bewerkt, moet u het index.html bestand selecteren om een voorbeeld van de wijzigingen te bekijken.

    De webpagina wordt geopend in uw standaardbrowser.

    Schermopname van de website waarop de lettertypestijlen zijn toegepast.

Zijn de tekenstijlen die u verwachtte te zien? Het is interessant hoe stijlen die op het <body> element worden toegepast, worden overgenomen <h1> . We hebben niets gedefinieerd voor <h1>, maar het heeft nog steeds het lettertype dat is gedefinieerd op <body>. Dit overnamemechanisme van bovenliggende elementen tot hun nakomelingen is een van de belangrijkste aspecten van CSS. De <li> elementen hebben echter een ander lettertype. De stijl voor de <li> elementen overschrijft de stijlset <body> omdat het <li> element een afstammeling is van het <ul> element waarvoor u een stijl hebt gedefinieerd.

Wanneer u Openen in standaardbrowser in Visual Studio Code gebruikt, wordt telkens een nieuw tabblad in de browser geopend. Om te voorkomen dat u een nieuw tabblad opent, kunt u het tabblad dat al uw website bevat, opnieuw laden.

Als u het tabblad opnieuw wilt laden, drukt u op F5, de sneltoets vernieuwen of drukt u op Ctrl+R in Windows of Linux en Command+R op een Mac.

Een licht thema toevoegen

Voeg vervolgens ondersteuning toe voor een kleurenthema voor uw website. Begin met het definiëren van een lichtgekleurd thema met behulp van hex-kleurcodes.

  1. Voeg in uw CSS-bestand (main.css) de volgende code toe aan het einde van het bestand.

    .light-theme {
  color: #000000;
  background: #00FF00;
}

    In dit voorbeeld #000000 geeft u zwart op voor de tekstkleur en #00FF00 geeft u groen op voor de achtergrondkleur.

  2. Werk in uw HTML-bestand (index.html) het <body> element bij met de klassenaam light-theme. Nu past de klaskiezer voor licht thema de stijlen correct toe.

    <body class="light-theme">

Bekijken in browser

  • Als u een voorbeeld wilt bekijken met Visual Studio Code, klikt u met de rechtermuisknop en index.htmlselecteert u Openen in standaardbrowser of laadt u het vorige tabblad opnieuw door op F5 te drukken.

    U ziet dat het lichtthema met een groene achtergrond wordt weergegeven.

    Schermopname van de website waarop het lichtthema is toegepast.

Toegepaste CSS weergeven

  1. Open Ontwikkelhulpprogramma's in de browserweergave.

    Klik met de rechtermuisknop op de pagina en selecteer Controleren of selecteer de sneltoets F12 of Ctrl+Shift+I.

  2. Selecteer het tabblad Elementen en selecteer het tabblad Stijlen op het tabblad Elementen (deze moet standaard al zijn geselecteerd).

  3. Beweeg de muisaanwijzer over de verschillende HTML-elementen en terwijl u een paar elementen selecteert, ziet u hoe de ontwikkelhulpprogramma's weergeven welke stijlen op deze elementen worden toegepast op het tabblad Stijlen .

  4. Selecteer het <body> element. Noteer de light-theme toegepaste.

  5. Selecteer het niet-geordende lijstelement <ul> . Let op de aangepaste stijl font-family: helvetica;, waarmee de stijl voor het <body> element wordt overschreven.

Schermopname van de website waarop het lichte thema is toegepast en de Ontwikkelhulpprogramma's ernaast met het deelvenster Elementen met de HTML- en CSS-code.

Raadpleeg het artikel Aan de slag en het wijzigen van CSS-artikelen voor meer informatie over het weergeven van CSS-stijlen in Ontwikkelhulpprogramma's.

Een donker thema toevoegen

Voor het donkere thema stelt u de infrastructuur in ter voorbereiding op de volgende les, waarin u het schakelen tussen thema's op de webpagina inschakelt.

Gebruik de volgende stappen om ondersteuning voor een donker thema toe te voegen aan uw CSS.

  1. Voeg in het CSS-bestand (main.css) enkele constanten toe aan de hoofdmap van de pagina aan het begin van het bestand.

    :root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}

    De :root selector vertegenwoordigt het <html> element op de HTML-pagina. Voor dit soort taken kunt u het beste een set globale CSS-variabelen definiëren in een CSS-regel met de :root selector. In dit voorbeeld hebt u drie kleurvariabelen gedefinieerd. U kunt deze variabelen nu gebruiken in andere CSS-regels.

  2. Vervang aan het einde van het CSS-bestand de light-theme regel door de volgende code om deze bij te werken en om de dark-theme selector toe te voegen.

    .light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
}
.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
}

    In de voorgaande code hebt u twee nieuwe variabelen bg gedefinieerd en fontColor, waarmee een achtergrond en tekstkleur worden opgegeven. Deze variabelen gebruiken het var trefwoord om hun eigenschapswaarden in te stellen op de variabelen die eerder in uw :root selector zijn opgegeven.

  3. Vervang vervolgens in uw CSS-bestand de huidige body selector door de volgende code.

    body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}

    In dit voorbeeld gebruikt u de body selector om de background en color eigenschappen in te stellen en, omdat de elementen die zichtbaar zijn op de webpagina zich allemaal in het <body> element bevinden, nemen ze de kleuren over die zijn ingesteld op <body>.

  4. Verwijder in uw CSS-bestand de regels met de #msg en ul selectors, zodat ze ook hetzelfde lettertype overnemen van <body>.

  5. Vergeet niet om uw bestand op te slaan door Control+S of Command+S te selecteren.

    Uw CSS-bestand (main.css) moet er nu uitzien als in dit voorbeeld:

    :root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}

body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}

li {
  list-style: circle;
}

.list {
  list-style: square;
}

.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
}

.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
}

  6. Als u het donkere thema wilt weergeven, opent u het bestand index.html en bewerkt u het standaardthema in het klassekenmerk handmatig naar een <body> donker thema (dark-theme). Sla het bestand op en laad de pagina opnieuw in de browser.

    Schermopname van de website waarop het donkere thema is toegepast en de ontwikkelhulpprogramma's ernaast.

  7. Bewerk het <body> klassekenmerk om het standaardthema terug te zetten naar een licht thema.

In de volgende les gebruikt u JavaScript om interactiviteit te bieden en het schakelen tussen thema's te ondersteunen.

GitHub Copilot gebruiken om een thema toe te voegen

U kunt GitHub Copilot in uw IDE gebruiken om CSS te genereren om een nieuw thema toe te voegen. U kunt de prompt aanpassen om eigenschappen op te geven voor het definiëren van de stijlen voor HTML-elementen volgens uw vereisten.

In de volgende tekst ziet u een voorbeeldprompt voor Copilot Chat:

Add a medium colored theme in the CSS file using hex color codes for blue font and light blue background. Make font family as Arial.

GitHub Copilot wordt mogelijk gemaakt door AI, dus verrassingen en fouten zijn mogelijk. Zie Veelgestelde vragen over Copilotvoor meer informatie.

Meer informatie over GitHub Copilot in Visual Studio Code.