Förord

CSS står för Cascading Style Sheet. Det säger väl kanske inte gemene man så mycket. Men vad är det egentligen? Enkelt sagt är det en sida kod som ändrar på din hemsidas utseende. Denna sida kod kan länkas till fler sidor. Detta låter webdesigners att separera deras sidas innehåll från layouten och utseendet. Detta är bra för det skapar en ren, lättläst, och lättuppdaterad kod. Tillsammans med ett dynamiskt språk såsom någon utav Microsofts .NET språk eller det gratis alternativet PHP, så kan det bli riktigt kraftfullt. Du undrar säkert fortfarande varför? Detta och hur man lägger till CSS på din egna sidor och grundstrukturen.

Innehåll

  » Varför ska jag lära mig CSS?
  » Hur ska jag få det att funka?
  » Jaha, vad ska du då skriva i din css fil?
  » Olika typer av Selectors
  » Element Selectors
  » ID/Klass Selectors
  » Ärvande Selector

Varför ska jag lära mig CSS?

Detta svar är enkelt, för att separera din sidas innehåll från layout-koden. Varför nu detta? Jo det finns flera skäl renare kod, lättare uppdatering, möjlighet att ändra layouten genom att endast ändra några rader, plus mycket mer. För att göra det enkelt att första så kör vi med ett exempel.

Låt oss säga att du har en sida om frukter. På din sida har du listat upp olika fruktsorter. Och du har samlat länge så du har över tusen olika frukter uppräknade på din sida! Vi säger att dessa frukter länkar till någon annans informationssida om just denna frukten. Du kommer plötsligt på att du vill ändra färgen på alla dessa länkar till grön och ta bort alla understrecken. Att manuellt sitta och ändra dessa länkar kan ni ju tänka er själva hur lång tid det kommer att ta. Om du nu använder CSS så räcker det med några få textrader.


a {
color: green;
text-decoration:none;
}

Så? Nu ser det väl bättre ut?

Hur ska jag få det att funka?

Nej vänta lite, vi måste första länka till CSS dokumentet.


berättar för webbläsare att det är någon typ av länkning på gång.
rel=”stylsheet” säger till vad det är för typ av länkning. I detta fallet ett stylesheet.
type=”text/css” talar om vad det är för typ av stylesheet. Vår är textbaserad Cascading Stylesheet.
Och slutligen talar href=”minstyle.css” var css-dokumentet ligger sparat. Det var väl inte så svårt? Skriv in den koden i sektionen av alla de dokument som du vill ska bli transformade av din CSS-kod.

Jaha, vad ska du då skriva i din css fil?

Låt oss börja med den grundläggande strukturen av CSS.
Vi använder oss av det andra exemplet, det om den gröna färgen.

a {
color: green;
text-decoration:none;
}


a är selector, och det är precis vad den gör. Den markerar vad det är för element som ska det ska ändras egenskaper för. Och egenskapen i detta exempel är color. Alla egenskaper har ett eller fler attribut. I det här fallet är green ett attribut.

I detta exempel har vi ”markerat” alla taggar och ändrat till grön färg och tagit bort alla understreck. Klammerparenteserna finns i alla ”kodblock”. Semikolonet skall stå i slutet av varje sats. Det är viktigt för CSS är inte lika snällt som HTML. Din kod måste vara så gott som perfekt annars kommer den troligtvis inte att funka alls som det var tänkt.

Olika typer av Selectors

Det finns flera stycken olika selectors. Du kan markera och ändra ungefär allting i ditt HTML-dokument med CSS.

Baserna:
- Element
- ID/Klasser
- Ärvande

Element Selectors

Element Selectors är de lättaste selectors att förstå. De ändrar på html element. Nästan alla html-element kan bli selected med element selectors. Syntaxen är rätt enkel:

a {
color: green;
}
p {
color: blue;
}


Det var två exempel av element selectors. Den första gör så att alla -taggar blir gröna. Den andra färgar alla

-taggar blå.

ID/Klass Selectors

Du kommer använda dessa ofta. De markerar något HTML-element med just den specifika ID eller klassen. Till exempel låt oss säga att du har en grupp länkar som du vill styla på ett speciellt sätt. Men du har även en annan grupp länkar som du vill styla på ett annat sätt.

Du använder då element selectors för du skapar nämligen 2 stycken separata stilar. Det du använder nu är klasser. Markera upp dina länkar med klass attribut, då det kan se ut så här:
Index
Då ska CSS koden se ut så här:


.stil_1 {
color: yellow;
}


Punkten talar om för webbläsaren att du markerar en class med namnet stil_1. Klasser används av flera element. Du kan alltså ha flera elemnt med samma klass. Men ID’s kan endast ett element per sida ha. Låt oss säga att du har en logobild på toppen av din sida. Du vill att det ska finnas en margin på 5 pixlar, lägg bara till detta ID attribut på img.taggen:

Och lägg till detta i CSS-koden:

#header {
margin: 5px;
}


# talar om för webbläsaren att det är ett ID. Denna selector kommer att markera det ID som är samma som header. Kom ihåg att du bara kan använda ett ID en gång per sida.

Ärvande Selector


a img {
border: none;
}

Denna kod säger till att alla img(images) inte ska ha nån ram. a säger att denna transformering endast ska ske i de bilder som finns inom -taggar. Du kan göra nästintill oändligt många steg här. CSS kommer att fortsätta ju fler taggar du säger att den ska transformera. Här är ett lite extremt exempel:

.html body div p a img {
border: none;
}

Det där eliminerar bildramarna till de som är länkar, ligger i en

-tagg som ligger i

-taggar. Det är lite onödigt att använda men kan vara bra att testa. Det enklast sätter är just det att testa sig fram!

Detta är min första artikel så all typ av kritik är mycket välkommen. Om du har frågor angående CSS så tveka inte att fråga!