Baskunskaper inom CSS

Som första guide inom CSS skall vi förklara grunderna i språket.

CSS står för Cascading Style Sheets och används till att bestämma designen på ett HTML dokument.
Varje element i HTML kan få egna värden för t.ex färg, storlek etc..

Kod-strukturen ser ut som följer:
element { egenskap: värde }


Om vi tillexempel vill sätta färgen i alla våra H1-taggar till blå så blir CSS-koden som nedan:
H1 { color: blue }


För att browsern skall kunna läsa CSS koden korrek måste vi inkludera ovan kod i HTML-dokumentets <HEAD> tagg:


<HTML>
<HEAD>
<STYLE TYPE="text/css">
H1 { color: blue }   
</STYLE>
</HEAD>
<BODY>
<H1>Här är sidans innehåll och den här texten blir blå!</H1>
</BODY>
</HTML>

Att ha en extern CSS fil

Om du sparar raden
H1 { color: blue }
i en fil med filändelsen ".css" kan du anropa den i ett html dokument som nedan:

<HTML>
<HEAD>
<link href="/filnamn.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<H1>Här är sidans innehåll och den här texten blir blå!</H1>
</BODY>
</HTML>

 Om man gör såhär så sparas filnamn.css i surfarens dator och css-koden behöver därför inte laddas hem varje gång användaren byter sida.

Klasser i CSS

Tänk dig att du har en bunt <H1> taggar i ditt dokument men endast vill ge en av dem blå textfärg och kanske tillochmed ge dom andra orange textfärg.
Då måste du på något vis urskilja taggarna så att du kan sätta färgen på endast en av dem, till detta använder man klasser.
Vi gör detta genom att i HTML-dokumentet lägga till attributen class="klassnamn" i H1 taggen.

<H1 class="bla">

 Och för att sedan kunna ge klassen "bla" värden skriver vi i CSS-filen:

.bla { color:blue }

Om vi också beslutar oss för att göra alla dom andra H1 taggarna oranga ändrar vi CSS-filen till

H1 { color:orange }
.bla { color:blue }


Fler CSS guider från webbdesign.info

Externa resurser:
w3c.org ger dig alla andra tags


kommenteraKommentarer    Antal 0    Medelpoäng 0/10

Bli medlem för att kunna skriva kommentarer!
Logga in om du redan är medlem.

Copyright © 2005 webbdesign.info    Cookies    Gratis statistik till hemsida    sitemap Webbdesign sitemap icon
Använd gärna våra RSS feeds:

Artikel Feed
[XML]
Forum Feed
[XML]

Svenska webhosts:
Svenska Webhotell

Använd gärna denna länk för att länka till oss:

Ny översättning:
Swedish affiliate programs

Är du medlem och vill synas här?
Hör av dig i vårt forum