Oefening - Selectors

Voltooid

In de vorige oefening hebt u stijl toegepast op elementen zoals html en h1. Je moet vaak wat smaller zijn in het toepassen van stijl.

In deze oefening stel je de stijl in voor de secties en ervaringen op sociale media en links op de pagina.

Stijl toepassen op klassen en ID's

Je begint met het instellen van de stijl voor de secties sociale media en ervaring.

1. Ga terug naar het vscode.dev venster dat u in de vorige oefening hebt gebruikt.

2. Let in index.htmlop het section element met de ID van sociale media op regel 10; u past stijl toe op dit gedeelte om de kleur op blauw in te stellen.

3. Voeg aan het einde van style.css de volgende CSS toe om de kleur voor het element sociale media in te stellen:

   #social-media {
       color: blue;
   }
   

4. De pagina wordt bijgewerkt, waardoor de inhoud in het sociale media-gedeelte op blauw wordt gezet.

5. Let in index.htmlop de twee secties op regel 28 en 32 met de klaservaring; U past stijl toe op deze secties om het lettertype cursief te maken.

6. Voeg aan het einde van style.css de volgende CSS toe om het lettertype voor de elementen met de ervaringsklasse te wijzigen:

   .experience {
       font-style: italic;
   }
   

7. De pagina wordt bijgewerkt, waardoor het lettertype in de ervaring cursief wordt weergegeven.

Pseudo-klassen gebruiken om de linkstijl in te stellen

Veel webontwikkelaars wijzigen de kleur en stijl van hyperlinks op een pagina. U stelt de kleur in voor links die groen zijn en markeert links wanneer een gebruiker er de muisaanwijzer op plaatst.

1. Voeg aan het einde van style.css de volgende CSS toe om koppelingen in te stellen zodat deze altijd groen zijn:

   a:visited {
       color: green;
   }
   
   a:link {
       color: green;
   }
   

2. De pagina wordt bijgewerkt om koppelingen als groen weer te geven.

3. Voeg de volgende CSS toe aan het einde van style.css om koppelingen te markeren terwijl je eroverheen beweegt met de muis.

   a:hover {
       background-color: yellow;
   }
   

4. Beweeg de muisaanwijzer over de koppelingen op de pagina en u ziet dat de koppelingen zijn gemarkeerd.

Beoordelen

In de volgende schermopname ziet u de resultaten van de CSS die u hebt toegepast. U hebt klassen, id's en pseudoklassen gebruikt om stijlen toe te passen op specifieke elementen en logische groepen elementen.