NemProgrammering.dk logo
nordicway webhotel

Klasser (class) og id i CSS | Sådan anvender du dem

CSS kursus | Lær CSS for begyndere
WordPress hjemmeside hjælp

Information om denne video

Underviser: Thomas Iversen, A-kasse priser

I denne video skal vi se på en række forskellige måde, hvorpå du kan style specifikke HTML-elementer i din markup. Vi skal prøve at arbejde med både klasser og id, og derved vil du forhåbentlig opnå en god forståelse for forskellen på de to og hvordan de bruges. Som altid anbefaler vi dig at lave nedenstående øvelser.

Øvelser:
1 - Lav en "citat" klasse, som gør tekst kursiv.
2 - Find et stykke tekst, og sæt det ind i et paragraf-tag. Udvælg 2-3 linjer i teksten og sæt et <span> element omkring dem. Tilføj din "citat" klasse til disse elementer.
3 - Lav en id styling ved navn "alm_tekst". Tilføj en skriftstørrelse på 12px; til denne styling. Tilføj derudover skriftstørrelse på 14px; til din "citat" klasse.
4 - Tilføj din id styling til dit paragraf tag. Nu skulle du gerne få en tekst, hvor citaterne tydeligt skiller sig ud med kursiv og en større skriftstørrelse

Video tags:

Denne video relaterer til emner såsom: CSS kursus for begyndere, CSS guides, Lær CSS fra bunden, CSS video-tutorials, klasser, class og id

Her har du kildekoden

<!DOCTYPE html>
<html>
<head>
  <title>Lektion 4</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="Lektion4.css">
</head>
<body>
  <h1>Overskrift 1</h1>
  <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
      ut laoreet dolore magna aliquam erat volutpat.<br/><br/>
      <span class="citat gul">
          Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
          nisl ut aliquip ex ea commodo consequat.
      </span>
  </p>
  <h1 id="stortekst">Overskrift 2</h1>
  <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
      ut laoreet dolore magna aliquam erat volutpat.
  </p>
  <p class="citat gul">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
      ut laoreet dolore magna aliquam erat volutpat.
  </p>
  <p class="gul">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
      ut laoreet dolore magna aliquam erat volutpat.
  </p>
</body>
</html>

Her har du kildekoden

h1 {
  font-size: 40px;
  color: #FF0000;
  font-family: sans-serif;
}
h1#stortekst {
  font-size: 70px;
}
span.citat {
  font-size: 12px;
  font-style: italic;
}
.gul {
  color:yellow;
}

Spørgsmål og kommentarer

Har du spørgsmål eller kommentarer? Så skriv herunder og vi eller en anden lœser vil svare hurtigst muligt!

Url´er bliver automatisk omdannet til links (nofollow).

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Thomas    01-04-2020

Hej Else, En ting er at det fungerer fint, et andet er om det er korrekt. Id må kun bruges én gang og klasser kan bruges flere gange. Hvis du en dag begynder at arbejde med JavaScript/jQuery på din side, og så vil vælge bestemte elementer på baggrund af deres unikke id, så løber du ind i problemer, hvis du har brugt det flere gange. Mvh.

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Else    26-03-2020

Hejsa. Har snuset en del til html og css før, men det er dejligt at få en gennemgang i stedet for selv at gætte alting, inden jeg om kort tid kaster mig over avanceret wordpress. Jeg undrer mig i denne lektion over, at der lægges så meget vægt på at undgå at sætte samme id på flere elementer. Nedenstående fungerer fint hos mig både i Safari og Chrome ? .. </p> <h1 id="stortekst">Overskrift 2</h1> <p id="stortekst"> Lorem ipsum ..

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Thomas    21-11-2017

Hej Tobias, Hmm... jeg er ikke helt sikker på, hvad det er du forsøger at opnår. Kan du evt. lokkes til at skrive et indlæg på vores forum. Her kan du også vedlægge et billede af det du forsøger at lave, og så er det måske lidt nemmere for os at hjælpe dig. Mvh. Thomas

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Tobias     21-11-2017

Hej nemprogrammering.dk Tak for en super fed guide til HTML og CSS! hvordan undgår jeg, at det billede jeg sætter ind som baggrund, afbryder den vertikale linje af links, som står i venstre side. (ikke så god) illustration: link til forside link til side 1 link til side2 BilledeBillede Billede Billede Billede Billede Billede Billede Billede Billede Billede Billede Billede Billede Billede Billede Billede Billede Billede Billede Billede Billede Billede Billede Billede Billede Billede Billede link til side 3 link til side 4 link til side 5 Jeg ønsker altså, at linksene til venstre skal stå lige under hinanden, men også at have et baggrundsbillede centreret på hjemmesiden. hvordan gør jeg det? M.V.H. Tobias Martin Pedersen