Grunderna i CSS3

Det finns tre sätt att lägga till stilsättning via CSS. Man kan ha ett helt separat CSS dokument som man sedan länkar till i HTML dokuementet. Man kan ha stycken av CSS kod i själva HTML dokumentet. Eller så kan man stilsätta ett element via attributet style.

Stilsätta via attributet style går helt enkelt till så att man lägger in CSS kod som värdet i attributet. T.ex: style="background-color:#66FF33;". Detta sätt brukar kallas inline style.

Stilsättning via kodblock i själva HTML dokumentet kan kallas internal style sheet och görs då i <head> elementet. Man skriver då: <style type="text/css"> ... </style> med den CSS kod man vi ha inne i style elementet.

Stilsättning via ett separat dokument brukar kallas external style sheet och fungerar helt enkelt så att man skriver sin CSS kod i ett separat dokument som man sedan länkar in i <head> elementet via <link>. T.ex: <link href="style.css" rel="stylesheet" type="text/css">. CSS dokument bör ha .css som filändelse.

Själva stilsättningen går till på samma sätt med dessa olika sätt. Det som skiljer är vad man ska stilsätta. Om man gör det via inline style så hamnar stilsättningen då på det element man anger den till. Med extern och intern CSS kod så väljs vad som skall stilsättas med selektorer som förklaras senare. I allmänhet är det nästan alltid bättre att sköta stilsättningen via externa CSS dokument. Det finns många anledningar för detta: man kan återanvända koden för olika HTML dokument som vill ha sammma stilsättning på element, man kan snabbt ändra stilen över hela ens sida via att bara ändra i ett fåtal CSS dokument, man kan ha en tydlig verisionshantering av CSS dokumenten o.s.v. Interna style sheets används oftast egentligen utav lathet men det finns tillfällen när det passar och det är när man vet att ett visst HTML kommer ha vissa element med unik stilsättning. Inline style är till för att göra väldigt små ändringar (ett eller två värden).

Redan nu kan man ju se att det kan uppkomma konflikter mellan dessa sätt. Vad händer om jag har lagt en viss stil på t.ex. <h1> via ett externt CSS dokument och sedan ger den en annan stil via style attributet? Jo det funkar så att dom slås ihop (cascade). Så om jag angett en viss font via det externa dokumentet och sedan angett en viss färg via style attributet så kommer båda appliceras. Om de två skulle stå i direkt konflikt med varandra (alltså att båda t.ex. skulle vilja ange färg) så finns det en prioritetsordning som följs. Inline style prioriteras alltid högst. Mellan intern och extern CSS kod så är det det elementet som kommer sist i head elementet som kommer ha högst prioritet. Ofta så anges link elementen ganska tidigt i head så då kommer den interna CSS koden, via style elementet, ha högre prioritet men det är ju inte 100% så om man verkligen vill se till att använda båda dessa så får man se till att lägga elementet i rätt ordning i head.

Elementen i ett HTML dokumentet ärver också viss stilsättning av sitt parent element. Detta betyder att vissa typer av stilsättning appliceras automatiskt på element som ligger inom ett annat element. T.ex. ett <div> element där man sätter style="font-size:20px;" ger då alla de element som ligger inom denna div samma stilsättning. Så ett <p> element inom denna div skulle automatiskt få annan fontstorlek. Detta är extremt trevligt och gör att man kan enkelt sätta viss stil övergripande för hela sektioner av sidan utan att upprepa kod. Som sagt innan så gäller detta bara vissa stilsättningar. Bakgrundsfärg och kantlinjer ärvs t.ex. inte. Om de gjorde det skulle man bli tvungen att ange att dom inte ska ärva vilket skulle ta bort syftet med det hela. I allmänhet är dessa arv ganska klokt valda. Man kan också ange att en viss typ av stilsättning ska ärva genom att ge det värdet inherited. Detta görs då:background-color:inherited;. Vissa tror att just background-color har ett automatiskt arv men så är inte fallet. Standard värdet för background-color är transparent vilket då gör att det ser ut som att elementet faktist ärver färgen men detta är inte sant.

Och nu till hur man väljer exakt vad som skall stilsättas via selektorer. En selektor är helt enkelt hur man väljer ut ett element och kan ta flera olika former. Man kan enkelt välja att stilsätta ett element rakt av och då får alla element av denna typ den stilsättningen. Detta görs helt enkelt genom att skriva så här: header{...} med själva stilsättningen mellan { och }. Det går att ange mer än ett element för samma stilsättning genom att separera namnen med ett ",": header, div{...} skulle sätta stilen på både header och div elementet. Man kan också ange att man vill stilsätta alla element med ett visst attribut: [title]{..} lägger till stilsättningen till alla element som har title attributet. Man kan också välja beroende på värdet av attributet: [title=HTML]{...} väljer alla element som har ett title attribut med värdet "HTML". Det går också att göra det lite mer generellt genom att välja alla attribut där värdet innehåller något specifikt: [title~=HTML]{...}. Det finns två stycken attribut som används väldigt ofta för CSS och de är id och class. Id är till för att identifiera specifika element och ett HTML dokument ska inte innehålla två stycken element med samma id värde. Om så är fallet så använder man class. Alltså, id används för att identifiera ett specifikt element och class används för att identifiera en grupp av element. Värdet av dessa attribut är något man själv hittar på. För att hitta ett id attribut gör man:#main_article och för class:.articles. Så id identifieras med ett "#" och class med ett ".". Det går också att kombinera vissa att dessa sätt. Man kan t.ex. ange att en class bara ska gälla för en viss tag:article.articles. Detta kan göras med id också. Detta medför att man blanda lite mellan dom om man ska ha viss övergripande stilsättning och sedan mer specifik för vissa element. Så t.ex. om jag skulle vilja ha samma färg på alla element med class="friday" så skriver jag .friday{color:red;}. Men jag kan senare också ange att paragrafer med denna klass ska ha en viss fontstorlek: p.friday{font-size:20px;}. Detta betyder då att text inom ett <p> element som har attributet class med värdet "friday" blir rött och med storleken 20 pixlar. Det går också att välja ut ett elements barn via några selektorer. Om jag t.ex. skulle skriva: p:nth-child(2){...} så skulle stilsättningen hamna på alla <p> element som är det andra barnet av ett element. Alltså inte ett specifikt element utan alla element på sidan och barnet är inte det andra <p> barnet utan det andra barnet av alla. Det går att göra det lite mer specifikt genom att ange att det är just det andra barnet av en viss typ: p:nth-of-type(2){...}. Det går att ange lite mer avancerade saker än bara en enkel siffra för child selektorer. Man kan t.ex. välja varje ojämnt barn element genom att ange p:nth-of-type(odd){...}. Detta gör då att vart annat element (startar med första elementet som blir indexerat som 1) får denna stilsättning. Det går självklart att ange even och få varje jämnt element. Man kan också ange en liten matematiskt formel för om man vill ha t.ex. vart fjärde element: p:nth-of-type(4n+0){...}. 4 är då hur lång cykeln skall vara, n representerar att det är en räknare och +0 anger offset (om man anger 1 så förskjuts allt med 1). Förutom dessa så kan man också välja sista eller första barn: p:last-child{...} p:first-of-type{...}. Man kan också välja de som är ensamt barn: p:only-child{...}.

Man kan ange stilsättningen storlek på flera sätt. Dessa sätt brukar delas in i två delar och dessa är absoluta och relativa enheter. Absoluta är alltid samma storlek medans relativa ändras beroende på olika saker. De absoluta är: in (för inches), cm (för centimeter), mm (för milimeter), pt (för point som är 1/72 av en inch) och pc (för pica som är 12 points). De relative är delade i två läger också genom att två av dem gäller för fonts medan de två sista är generella. De för fonts är: em som är storleken för den använda fonten (så 1em är nuvarande storlek medan 2em är dubbla storleken) och ex som är höjden på fontens gemena X. De andra relative är px som står för pixlar, alltså antalet pixlar och % som helt enkelt står för procent. Anger man % så menar man ett procenttal av ett elements förälder.

Nu när man har grunderna klara för sig så är det bra att veta hur man strukturerar upp ett CSS dokument. Detta är väldigt enkelt och nedan kommer exempel på hur man kan stilsätta element.

				
					div.example{
						min-height:10px;
						width:100%;
						border:1px solid;
						background-color:#000099;
					}
					div.example:nth-of-type(odd){
						background-color:#FFFFFF;
					}
					div#container{
						border:1px solid #000000;
					}

Detta ger följande resultat:

Div 1

Div 2

Div 3

Div 4

Div 5

Själva HTML koden är bara 6st <div> element där det första har id="container" och de följande 5 har class="example". Som kanske börjar bli uppenbart så kan man göra väldigt mycket med CSS och det är oftast bara en fråga om att hitta en bra stil.

Hur man strukturerar upp ett CSS dokument finns det mer än ett alternativ av men det är bäst att bara göra det så logiskt som möjligt. Lägg de block som kommer vara nära varandra på själva sidan nära varandra i CSS dokumentet så det blir mindre bläddra när man ändrar saker. Och som med all kod så hjälper det enormt mycket att se till att välja namn som gör det enkelt att förstå innebörden snabbt.