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