HTML och CSS

CSS (Cascading Style Sheets) är ett stilspråk som används för att beskriva utseendet och formateringen av ett HTML-dokument. Med CSS kan du kontrollera layout, färger, typsnitt och andra visuella aspekter av en webbsida.

Grundläggande CSS-regler och selektorer

  • Selektorer: Anger vilka HTML-element som stilen ska tillämpas på.
    • Elementselektor: Tillämpas på alla element av en viss typ, t.ex. p { … }.
    • ID-selektor: Tillämpas på ett element med ett specifikt ID, t.ex. #header { … }.
    • Klass-selektor: Tillämpas på alla element med en viss klass, t.ex. .nav { … }.
  • Regler: Består av en selektor och en deklarationsblock.
    • Deklaration: Innehåller en egenskap och ett värde, t.ex. color: red;.

Laboration: Skapa och Länka en CSS-fil till din HTML-sida

Steg 1: Skapa en CSS-fil

Öppna en textredigerare som nano eller vim:

nano style.css

Skriv följande CSS-kod:css

body {
     font-family: Arial, sans-serif;
     background-color: #f0f0f0;
}
h1 {
     color: #333;
}
p {
     color: #666;
}

Spara filen och stäng redigeraren (Ctrl + O, Enter, Ctrl + X för nano).

Steg 2: Länka CSS-filen till din HTML-sida

Öppna din HTML-fil i en textredigerare:

maximus@linus:~$ nano /var/www/html/index.html

Lägg till följande rad i <head> -sektionen för att länka CSS-filen:html

Spara filen och stäng redigeraren.

Steg 3: Kopiera CSS-filen till Apache2

webbrots-katalog

Kopiera CSS-filen till samma katalog som din HTML-fil:

maximus@linus:~$ sudo cp style.css /var/www/html/

Steg 4: Ladda om sidan

Öppna din webbläsare och navigera till http://localhost för att se din stylade HTML-sida.

Sammanfattning

Genom dessa laborationer har du lärt dig att skapa och strukturera en grundläggande HTML-sida, lägga upp den på en Apache2-server och styla den med CSS.