NemProgrammering.dk logo
Læs mere om denne UnoEuro Rabatkode
UnoEuro rabatkode

Typografi i CSS

Lad NemProgrammering.dk´s eksperter lave din hjemmeside for dig
Vi tilbyder professionel hjælp til udvikling af hjemmesider og webshops . Læs mere om vores ydelser her!

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

<!-- HTML filen: -->

<!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="css.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

/* CSS filen */

#div1 {
    width: 200px;
    height: auto;
    border-style: solid;
}

p.tekst1 {
    font-size:2.5em;
    font-family: "Time New Roman", Times, serif;
    font-style: italic;
}
p.tekst2 {
    font-size:40px;
    font-family: Arial, serif;
    font-weight: bold;
}

p.tekst3 {
  color: #0000FF;
}
p.tekst4 {
  color: aqua;  
}
p.tekst5 {
  text-align: center;
}
p.tekst6 {
   text-decoration: line-through; 
}
p.tekst7 {
   text-transform: uppercase;
}
p.tekst8 {
   text-transform: lowercase; 
}
p.tekst9 {
   text-transform: capitalize; 
}      
        

Spørgsmål og kommentarer

Har du et spørgsmål eller en kommentar til denne video/artikel? Så skriv herunder! Alternativt kan du kontakte os på vores forum, hvor en masse hjælpsomme personer sidder klar til at hjælpe.

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

Vær den første til at skrive en kommentar!

Forum stats

  • 1087 Antal brugere
  • 1568 Antal emner
  • 7888 Antal indlæg

Deltag selv!

Nyt fra vores bloggere

Besøg vores webbureau

WordPress Hjemmeside