NemProgrammering.dk logo
3 måneders gratis webhotel til alle NemProgrammering.dk brugere! Få din UnoEuro Rabatkode her
UnoEuro rabatkode

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! Alternativt kan du kontakte os på vores forum, hvor en masse hjælpsomme personer sidder klar ved tasterne.

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

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