Introduktion

I denna lektionen går vi igenom vad CSS är, vad man använder det till och hur man tillämpar det. Du får även lära dig syntaxen för språket.

Vad är CSS?

CSS står för Cascading Style Sheets och är ett språk som formaterar texter som du har märkt ut med taggar (till exempel HTML). Du kan till exempel göra en text grön, färga bakgrunden röd och helt köra över de standardinställningar som webbläsarna har för att visa taggarna.

Vart lägger jag min CSS-kod?

Du ska nu få lära dig hur man färger en text röd. Detta för att vi enkelt ska kunna visa hur man tillämpar CSS-kod på taggarna, och du behöver inte oroa dig ifall du inte förstår varför texten blir röd, det får du lära dig i en annan lektion. CSS-koden för att färga texten röd ser ut såhär:

CSS - Cascading Style Sheets
color: red;

Din CSS-kod kan placeras på flera olika ställen. Det enklaste sättet är att använda attributet style, och lägga CSS-koden i det.

HTML - HyperText Markup Language
<p>En paragraf.</p> <p style="color: red;">En paragraf.</p> <p>En paragraf.</p>

En paragraf.

En paragraf.

En paragraf.

Ett annat alternativ är att använda taggen <style>, och lägga CSS-koden i den. <style>-taggen ska ligga i <head>-taggen. Till <style>-taggen behöver vi även ange attributet type="text/css", för att tala om att det är CSS som vi använder.

HTML - HyperText Markup Language
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Min titel</title> <style type="text/css"> /* CSS-kod här! */ /* Genom att skriva /* så har man påbörjat en kommentar i CSS, och den slutar när man skriver dem i omvänd ordning. */ </style> </head> <body> <p>En paragraf</p> </body> </html>

Det tredje, och sista, alternativet är att lägga CSS-koden i en egen fil, och hänvisa webbläsaren till den filen med taggen <link>. Då bör vi även ange attributen rel="stylesheet" type="text/css" , och attributet href anger sökvägen till CSS-filen. CSS-filen ska ha filändelsen .css. Fördelen med att lägga CSS-koden i en egen fil är att webbläsaren kan cacha filen, vilket gör att besökaren vid ett andra besök enbart laddar hem HTML-filen, då denne redan har CSS-filen sparad på sin dator. Dessutom kan du ju koppla alla dina HTML-filer till en och samma CSS-fil, så om du vill ändra utseende på din hemsida behöver du bara ändra i en CSS-fil, istället för att öppna alla dina HTML-filer och ändra i var och en av dem.

HTML - HyperText Markup Language
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Min titel</title> <link rel="stylesheet" type="text/css" href="minCSSFil.css"> </head> <body> <p>En paragraf</p> </body> </html>
/* CSS-koden här */

Angående de två senare sätten (att använda taggarna <style> och <link>) så måste vi även specificera vilken/vilka tagg/taggar som ska påverkas av CSS-koden. Om vi vill välja en specifik sorts tagg ska påverkas så skriver man såhär:

CSS - Cascading Style Sheets
taggnamn{ /* CSS-kod */ }

All CSS-kod som ligger inom måsvingarna ({ och }) efter taggnamnet kommer sedan att påverka hur den angivna taggen ska visas.

Nedan kommer ett exempel som färgar texten röd i alla paragrafer.

HTML - HyperText Markup Language
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Min titel</title> <style type="text/css"> p{ color: red; } </style> </head> <body> <p>En paragraf.</p> <p>En paragraf.</p> <p>En paragraf.</p> </body> </html>

En paragraf.

En paragraf.

En paragraf.

Vi kan även specificera en viss tagg genom att använda attributet id. Som värde i attributet skriver vi ett unik namn (ett namn som vi inte använder som id-namn på en annan tagg), och för att hänvisa till den taggen i CSS så skriver vi #id-namnet.

Notera: id-namnen får inte innehålla tecknen å, ä eller ö och måste börja med en bokstav.

HTML - HyperText Markup Language
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Min titel</title> <style type="text/css"> #rodParagraf{ color: red; } </style> </head> <body> <p>En paragraf.</p> <p id="rodParagraf">En paragraf.</p> <p>En paragraf.</p> </body> </html>

En paragraf.

En paragraf.

En paragraf.

Med attributet class kan vi åstadkomma liknande resultat, med den skillnaden att flera olika taggar kan ha en och samma class. För att hänvisa till taggarna med en angiven class så skriver man .class-namnet.

Notera: class-namnen får innehålla tecknen å, ä eller ö och måste inte börja med en bokstav.

HTML - HyperText Markup Language
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Min titel</title> <style type="text/css"> .rödParagraf{ color: red; } </style> </head> <body> <p class="rödParagraf">En paragraf.</p> <p>En paragraf.</p> <p class="rödParagraf">En paragraf.</p> </body> </html>

En paragraf.

En paragraf.

En paragraf.

Man kan även specificera "barn-taggar" som ska påverkas av CSS-koden på följande sätt:

HTML - HyperText Markup Language
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Min titel</title> <style type="text/css"> /* Alla <b>-taggar som ligger i taggen med id-namnet "enParagraf" */ #enPargraf b{ color: red; } </style> </head> <body> <p> Denna texten ska ha vanlig textfärg<br> <b>Jag är en fet tagg, men jag blir inte röd, för min föräldrataggs id-namn är inte "enParagraf"</b><br> Denna texten ska ha vanlig textfärg<br> </p> <p id="enParagraf"> Denna texten ska ha vanlig textfärg<br> <b>Denna texten ska ha röd textfärg.</b><br> Denna texten ska ha vanlig textfärg<br> <b>Denna texten ska ha röd textfärg.</b><br> Denna texten ska ha vanlig textfärg<br> </p> </body> </html>

Denna texten ska ha vanlig textfärg
Jag är en fet tagg, men jag blir inte röd, för min föräldrataggs id-namn är inte "enParagraf"
Denna texten ska ha vanlig textfärg

Denna texten ska ha vanlig textfärg
Denna texten ska ha röd textfärg.
Denna texten ska ha vanlig textfärg
Denna texten ska ha röd textfärg.
Denna texten ska ha vanlig textfärg

I HTML ignoreras upprepade mellanslag, tabb och entertryckningar, och det samma gäller i CSS, vilket gör att man kan indentera sin kod på det sätt man själv tycker är bäst.

Gå till nästa lektion, Textformatering.