NemProgrammering.dk logo
nordicway webhotel

Typografi i CSS

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å, hvordan du kan anvende CSS til typografi, altså styling tekst-elementer. Vi vil gennemgå en lang række forskellige egenskaber, som du kan bruge til at style din tekst med. Det er dog op til dig selv at udforske alle mulighederne, da vi desværre ikke har tid nok i videoen til at vise dem alle.

Øvelse:
1 - Lav en ny klasse som anvender alle egenskaberne fra p.tekst2 til p.tekst7. Du bestemmer selv værdierne. Anvend klassen på et HTML-element.

Video tags:

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

Her har du kildekoden

<!DOCTYPE html>
<html>
<head>
  <title>Lektion 5</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="Lektion5.css">
</head>
<body>
  <div id="div1">
    <p class="tekst1">Tekst1</p>
    <p class="tekst2">Tekst2</p>
    <p class="tekst3">Tekst3</p>
    <p class="tekst4">Tekst4</p>
    <p class="tekst5">Tekst5</p>
    <p class="tekst6">Tekst6</p>
    <p class="tekst7">tekst7</p>
    <p class="tekst8">Tekst8</p>
    <p class="tekst9">Tekst9</p>
  </div>
</body>
</html>

Her har du kildekoden

#div1 {
    width: 200px;
    height: auto;
    border-style: solid;
}
p.tekst1 {
  font-size: 2.2em;
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
}

p.tekst2 {
  font-size: 2.2em;
  font-family: Arial, serif;
  font-weight:bold;
}

p.tekst3 {
  color:#DDD;
}

p.tekst4 {
  color:red;
}
p.tekst5 {
  text-align: right;
}
p.tekst6 {
  text-decoration: none;
}
p.tekst7 {
  text-transform:capitalize;
}

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    05-11-2018

Hej Mathias, Hvis du gerne vil bruge en styling på flere elementer skal du lave den som en klasse og ikke et id. Mvh. Thomas

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Mathias    04-11-2018

Hej <div style="background-color:#000; color:#FFF;"> <div style="display:inline;" id="Overskrift">Velkommen!</div> <div style="display:inline;" id="copyright">copyright®</div> </div> Hvorfor kan jeg kun ændre text-align i første div, som indeholder CSS der markerer, at det er inde i en boks? Hvis jeg i min CSS-fil skriver text-align: center - ved mit id="Overskrift" sker der intet. Kender du en løsning, da jeg gerne vil have centreret Overskriften, og smidt copyright ud i højre side på samme linje? Vh

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Thomas    04-07-2017

Hej J H, Jeg har desværre aldrig hørt om et JNlink. HVis du blot mener et link kan du se denne video: https://www.nemprogrammering.dk/Tutorials/CSS/V2/7-links.php Mvh.

kommentar på NemProgrammering.dk - lav din egen hjemmeside
J H Madsen    03-07-2017

Hvordan bestemmer jeg, ved hjælp af CSS, farveog størrelse af et JNlink ?