CSS syntax, kommentarer og gruppering af selectors
NemProgrammering.dk logo
3 måneders gratis webhotel til alle NemProgrammering.dk brugere! Få din UnoEuro Rabatkode her
UnoEuro rabatkode

CSS syntax, kommentarer og gruppering af selectors

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 have syntax´en i CSS helt på plads. Derudover skal vi også tage et kig på, hvordan du laver kommentarer i CSS, samt hvordan flere selectorer kan grupperes i dit style sheet, hvis de alligevel indeholder de samme deklarationer.

Øvelser:
1 - Lav en ny CSS regel i dit style sheet. Din selector skal pege på alle div-elementer. Lav hertil 2 deklaration, hvor du henholdsvis anvender egenskaberne "height" og "width". Begge skal have en værdi på 500px.
2 - Tilføj også egenskaben "border" til din nye CSS reglen. Sæt værdien til "solid".
3 - Lav et div tag i dit HTML dokument. Vær sikker på, at dit style sheet er linket til HTML dokumentet. Får du en div-firkant, som er 500x500px, og som har en sort kant?

Video tags:

Denne video relaterer til emner såsom: CSS kursus for begyndere, CSS guides, Lær CSS fra bunden, CSS video-tutorials, syntax, kommentarer, gruppering af selectors

Her har du kildekoden

<!DOCTYPE html>
<html>
<head>
  <title>Lektion 3</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="Lektion3.css">
</head>
<body>
  <h1>Overskrift 1</h1>
  <h2>Overskrift 2</h2>
  <h3>Overskrift 3</h3>
  <h4>Overskrift 4</h4>
</body>
</html>
        

Her har du kildekoden

h1 {
  font-size: 50px;
  color: #FF0000;
  font-family: sans-serif;
  /* Dette er en kommentar */
}

h2, h3, h4 {
  color: #0000FF;
  font-family: sans-serif;
}
h2 {
  font-size: 30px;
}
h3 {
  font-size: 20px;
}
h4 {
  font-size: 10px;
}

/*
Linje 1
Linje 2
*/         
        

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

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