Välkommen till whr.se, recensioner av webbhotell. I denna avdelning publicerar vi guider och artiklar runt webbteknik, programmering och marknadsföring på Internet bland annat.

Grundkurs i CSS

När du bygger en hemsida formas stommen av HTML och hur den ska se ut och placeras definieras av CSS. Det brukar förklaras som att HTML är strukturen och CSS presentationen. Dessa två är båda programspråk som berättar för webbläsaren vad denna ska visa.

Men vad är då CSS?

CSS står för ”Cascading Style Sheets”, men kallas också för stilmallar, och är till för att styra hela utseendet och layouten på en sida. CSS definierar hur HTML ska visas. Du bestämmer med hjälp av CSS hur din text ska se ut och var den ska ligga, hur menyn ska bete sig och vilken färg den ska ha. Om du har bilder på sidan kan du göra dem klickbara eller lägga dem prydligt på rad i högermarginalen. CSS är helt enkelt ett verktyg för att skapa layouten på din hemsida.

CSS finns i tre nivåer; mest används dock nivå ett och två då alla webbläsare inte stödjer den tredje nivån. De två nivåerna som används finns till för att forma texten, bakgrunden, länkarna och fonterna samt placera bilder och texten osv.

Hur används CSS?

CSS kan användas på tre olika sätt. Vilket sätt du väljer att använda dig av är upp till dig.

Användningsområde 1: Du kan göra en extern stilmall, external CSS, vilken får styra all formatering på alla hemsidans sidor. Denna CSS-mall ligger helt utanför dokumentet där HTML-koderna finns och kopplas endast samman med hjälp av en länk i ”head”-delen. Detta alternativ är ofta det mest praktiska om hemsidan är stor eller om du vill leka med specialeffekter. Du har endast ett dokument att ändra i och inte behöver gå in i varje specifik sida för att göra uppdateringar och justeringar.

Användningsområde 2: Du använder dig av en inbäddad CSS-kod, även kallad embedded, i varje specifikt HTML-dokuments ”head”-del. Vid kodningen använder du dig här av attributet style och skriver koden utan klamrar. Detta sätt att använda sig av CSS är bra om dina sidor ska se olika ut.

Användningsområde 3: Du kan även skriva in CSS-koden direkt bland HTML-koderna för att forma en viss del av dokumentet. Denna typ av CSS-kodning kallas för inline och fungerar utmärkt så länge du vid varje kodning använder dig av attributet style och skriver CSS-koden utan klamrar.

Hur skapas CSS?

Det går att skapa en extern stilmall i de flesta program och t.ex. Anteckningar fungerar utmärkt. Detta dokument kan du sedan döpa till förslagsvis ”style.css”, namnet är fritt men filändelsen måste vara ”.css”. Om du ska använda dig av embedded eller inline-metoderna skriver du direkt i HTML-dokumentet.

Sedan är det bara att sätta igång. De första koderna brukar oftast behandla bakgrund, vad texten ska ha för typsnitt, vilken storlek den ska vara i, om det ska vara något radavstånd o.s.v.

Ett exempel på en extern kodning, då koden ligger i ett separat dokument kan se ut så här:
”hr {color:green;}
p {margin-left:25px;}
body {background-color:#000000;}”

I det här fallet betyder ”hr {color:green;}” att texten blir grön, ” p {margin-left:25px;}” att texten hamnar 25 pixlar in från vänstra sidan och ”body {background-color:#000000;}” betyder att bakgrunden blir svart. Vi hade också kunna haft med vilken storlek texten skulle vara i (kan anges i bl.a. pixlar, procent eller em) eller huruvida olika texter på sidan ska vara i olika färger m.m.

Det är också möjligt att enbart färglägga en av sidans kanter eller att skapa en större marginal i botten på texten. Det viktiga att komma ihåg här är att de olika kommandona bör vara medsols, d.v.s. topp – höger – nederkant – vänster. För dig som just har börjat med CSS är detta något av en överkurs, men det kan vara kul att känna till dessa möjligheter eftersom du lättare kan utveckla dina kunskaper då.

Olika begrepp, namn på färger och liknande går enkelt att hitta på Internet. Det finns också många specifika och avancerade guider som ger dig konkret hjälp kring olika problem som kan uppstå. Använd gärna w3cschools för vidare referens.

Publicerad 2010-06-01. Kategori Bygga hemsida.


Skriv en kommentar eller en fråga

This blog is kept spam free by WP-SpamFree.