CSS-guiden

CSS-guiden

OBS! Vi har skrivit en ny guide om nya CSS 3 som vi rekommenderar istället för denna. Du når den nya guiden här!

Vad är CSS?

CSS står för Cascading Style Sheets, och används för att styra utseendet och formateringen i ett HTML-dokument.  Man kan ha sin CSS-kod direkt i sitt HTML-dokument, men det vanligaste och mest praktiska tillvägagångssättet är att använda ett separat CSS-dokument som kopplas till HTML-dokumentet via en kodsnutt inuti <head>-taggen i HTML-dokumentet.

CSS samlar alla instruktioner för hemsidans utseende i ett separat dokument, vilket gör att HTML-dokumentet bara innehåller hemsidans innehåll, något som är mycket positivt både en person som skapar en hemsida samt om en utomstående vill gå igenom hemsidans kod, eftersom det skapar struktur. Det är också väldigt bra ut sökmotoroptimerings-synpunkt, eftersom en sökmotor inte behöver gå igenom en massa ”utseende-kod” som den ändå inte bryr sig om.

Vidare så behöver man bara ett CSS-dokument för att styra utseendet på ett obegränsat antal hemsidor och undersidor. Koppla bara alla nya sidor du skapar till samma CSS-dokument.

Hur du skapar ett CSS-dokument och kopplar det till ditt HTML-dokument

Ett CSS-dokument kan man skapa i en vanlig textredigerare, precis som med HTML. När du sparar dokumentet så ska filändelsen vara .css istället för .html. Det är väldigt vanligt att man döper CSS-dokumentet till style.css, men man kan döpa det till vad man vill, så länge man har .css på slutet. Använd denna kodsnutt innanför din <head>-tagg i HTML-dokumentet:

<link rel=”stylesheet” type=”text/css” href=”style.css” />

Om du nu har ett CSS-dokument med namnet style.css på samma ställe som ditt HTML-dokument så kommer nu utseendet på din hemsida att styras av det du skriver i CSS-dokumentet. För att du ska få lite översikt, såhär kan alltså en hel hemsida se ut:

<html>
<head>
<title>Hemsidans titel</title>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head>
<body>
Sidans innehåll
</body>
</html>

Grundläggande CSS

Nu ska vi börja gå igenom grunderna vad gäller CSS-kod. CSS skrivs på detta sätt:

#red { color: #FF0000; }

#FF000 står för färgen röd. I din HTML måste du ha någonting med ett ID-namn ”red” för att dokumentet ska veta vad det är du vill göra rött. Skriv enligt följande i ditt HTML-dokument:

<p id=”red”>Denna text kommer att bli röd</p>

I ditt HTML-dokument har du nu en paragraf med ID ”red”, och CSS-dokumentet kommer känna av detta och applicera det som står mellan { och } på allt inom paragrafen. Nu står det color: #FF0000 vilket betyder att texten blir röd. Det funkar på samma sätt med andra taggar, t.ex. länkar:

<a id=”red” href=”exempel.html”>Röd länk</a>

och divar

<div id=”red”>Röd text inuti diven red</div>

Lägg märke till semikolonet i slutet på #red {color: #FF0000;} – det används för att separera din kod och måste alltid användas.

Styla <div> med CSS

<div> är en väldigt vanlig tagg eftersom det är divar som delar upp din hemsida i sektioner, exempelvis en header-sektion där du har din logga, en meny-sektion under loggan, en höger- och en vänster-kolumn med innehåll samt en footer. Här kommer exempel på hur man kan fixa till en div med CSS:

#minDiv {width: 200px; height: 200px; margin-right: 20px; color: FF0000;}

Detta kommer att tvinga din div med ID ”minDiv” att bli 200 pixlar bred, 200 pixlar hög, ha en högermarginal på 20pixlar (allt som finns till höger om diven ”puttas” 20 pixlar till höger) och texten inuti diven blir röd.

Styla länkar med CSS

Såhär kan du ändra utseende på dina länkar:

A:link {text-decoration: none;}
A:visited {text-decoration: none;}
A:hover {text-decoration: underline; color: red;}

A:link står för länkar som besökaren inte har klickat på, A:visited står för länkar som besökaren redan klickat på och A:hover står för när besökaren har sin muspekare på länken. I detta exempel så tar vi bort linjen under länkarna med text-decoration: none, samt att vi sätter dit en linje och gör texten röd när besökaren har muspekaren över en länk. Detta kommer nu gälla för alla länkar på hemsidan, om vi nu inte specifierar annorlunda längre ner i CSS-dokumentet.

Styla text med CSS

Utseendet på text definieras i CSS-koden för det element som texten ligger inuti, oftast en paragraf <p> eller en div <div>, såhär:

#minParagraf {font-family: Georgia; font-size: 14px; color: #FF0000; font-weight: bold;}

Här behöver du ha en paragraf med ID ”minParagraf”, såhär:

<p id=”minParagraf”>Lite text</p>

Texten inuti denna paragraf kommer nu ha teckensnittet Georgia, vara 14pixlar hög, vara röd samt vara fetstilt.

Bakgrundsbilder

Bakgrundsbilder är väldigt populärt för att göra hemsidan snyggare. Man använda bakgrundsbilder på <body>, vilket gör att bakgrundsbilden hamnar som bakgrund för hela hemsidan. Du kan också använda bakgrundsbilder på t.ex. en <div>, och då hamnar bakgrundsbilden bara under den diven. Såhär infogar du ett bakgrundsmönster under din hemsida:

body {background-image: url(‘bakgrundsbild.jpg’);}

Bilden bakgrundsbild kommer nu att lägga sig under hemsidan, och repeteras både horisontellt och vertikalt. Detta betyder att om din bakgrundsbild är ett mönster så kommer mönstret att täcka hela bakgrunden på din hemsida. Du kan få bakgrunden att endast repeteras horisontellt på detta sätt:

body {background-image: url(‘bakgrundsbild.jpg’); background-repeat:repeat-x;}

eller endast vertikalt på detta sätt:

body {background-image: url(‘bakgrundsbild.jpg’); background-repeat:repeat-y;}

Float

Float används när man vill att någonting, t.ex. en div eller en bild, ska lägga sig till höger eller till vänster om någonting annat. Se exempel nedan.

I vårat CSS-dokument:

#floatLeft {float: left;}

I vårat HTML-dokument:

<img id =”floatLeft” src=”bild.jpg” />
<p>Någon text här!</p>

Detta kommer medföra att bilden lägger sig till vänster om texten, istället för ovanför texten, som den hade gjort om vi inte hade använt float: left.