Ved at bruge denne side acceptere du samtidig Brugbarts og vores partneres brug af cookies.

Læs mere

ID og Klasser i HTML og CSS

Vejledning til hvordan man bruger ID og Klasser i HTML og CSS.

Redigeret: 2015-05-10 08:26

HTML living stadard logo anden orange udgave.

ID attributten kan bruges til at identificere nogle af elementerne på siden - det gør det både nemmere at stile elementerne med CSS, og at manipulere elementerne med eksempelvis JavaScript.

class attributten bliver brugt til at tilføje elementer til bestemte klasser, det vil blandt andet gøre det nemmere at tilgå disse senere.

Bemærk. Der skelnes imellem store og små bogstaver i både IDer og Klasser!

Forskellen på IDer og Klasser

Forskellen på ét ID og en klasse, er at et ID kun må optræde på samme side en gang, det skal være unikt - hvorimod en klasse kan optræde på flere elementer.

IDer og klasser bliver mest brugt til at stile elementer på siden, ved brug af CSS Stilark - men IDer bliver også brugt af scripts, til præcist at tilgå bestemte elementer.

Sådan bruger du Klasser i CSS

Hvis eksempelvis der er nogle bestemte elementer på en side, som skal se ud på en anden måde end resten - det kan være overskrifter, paragraffer, eller links, osv - så kan man give de elementer en klasse via class attributten.

<!DOCTYPE html>
<html lang="da">

  <head>
    <title>Hvordan du kan bruge Klasser i HTML</title>  
    <style type="text/css">
     .InfoSider {
      font-size: 1em;
     }
     .Vejledninger {
      font-size: 2em;
     }
    </style>

  </head>

  <body>
   <div>
    <p>Sådan kan du bruge Klasser i HTML og CSS</p>
   </div>

   <div>
    <ol>
     <li><a href="http://brugbart.dk/Infrastruktur/privat-politik" class="InfoSider">Privat Poltik</li>
     <li><a href="http://brugbart.dk/Infrastruktur/kontakt" class="InfoSider">Kontakt</li>
     <li><a href="http://brugbart.dk/Infrastruktur/om" class="InfoSider">Om Brugbart</li>

     <li><a href="http://brugbart.dk/Vejledninger/web-design" class="Vejledninger">Web-design Vejledning</li>
     <li><a href="http://brugbart.dk/Vejledninger/php" class="Vejledninger">PHP Vejledning</li>
     <li><a href="http://brugbart.dk/Vejledninger/seo" class="Vejledninger">SEO Vejledning</li>
     <li><a href="http://brugbart.dk/Vejledninger/computere" class="Vejledninger">Computer Hjælpen</li>
    </ol>
   </div>
  </body>

</html>

Brugbart Vision!

Et element kan også tilhøre flere forskellige klasser - så skal de bare adskilles med mellemrum.

<p class="Klasse1 Klasse2">Et element med To klasser</p>

Sådan bruger du IDer i CSS

Hvert ID må kun optræde én gang på hver side, et ID skal med andre ord være unikt - for at tilgå et ID via CSS bruges nummer symbolet, i stedet for punktum.

#Basement {
  width: 95%;
  min-width: 768px;
  max-width: 1400px;
}

HTML Lister - Brugen af div og span