Klasser (class) og id i CSS | Sådan anvender du dem
NemProgrammering.dk logo
Læs mere om denne UnoEuro Rabatkode
UnoEuro rabatkode

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

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å 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

<!-- HTML filen: -->

<!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="css.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="gul superklassen">
                Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis 
                nisl ut aliquip ex ea commodo consequat.
            </span>
            
        </p>
        
        <h1 id="specieloverskrift" >Overskrift 1,2</h1>
        
        <p class="superklassen">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
            ut laoreet dolore magna aliquam erat volutpat. 
        </p>
        
        <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="superklassen">
            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

/* CSS filen */

h1 {
    font-size: 40px;
    color: #FF0000;
    font-family: sans-serif;
}


#specieloverskrift {
    font-size: 30px;
    color: blue;
    font-family: sans-serif; 
}

.superklassen {
    font-size: 14px;
    font-style: italic;
}

span.gul {
    color: yellow;
}        
        



        

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!