10 grundläggande lektioner i CSS
Postad: 7 juni 2009 | CSS-guider | 5 CommentsDu har säkert hört talas om CSS. Du kanske till viss del redan använder css? När man bygger en hemsida använder man programspråket HTML – Hyper Text Markup Language, men HTML är endast stommen i ditt bygge.
Hur denna stomme sedan ska se ut och placeras är det din CSS som sköter om. Därför är det viktigt att veta att HTML är strukturen på en hemsida medan CSS är presentationen. Det är inte bra att blanda dessa två programspråk. Behöver du ändock göra det så lägger du in dina CSS-koder i speciella kodavsnitt.
Välkommen till första lektionen!
En introduktion till CSS
Inline, embedded och external css
Vi gör en stilmall – steg för steg guide
En introduktion till CSS. Vad är CSS?
Det finns 3 nivåer – CSS 1, CSS 2 respektive CSS 3.
Flertalet brukar använda CSS 1 och 2 som bland annat formaterar text, bakgrunder, länkar, fonter och så vidare. CSS 2 används till placeringar av objekt på sidan, om man vill ha bestämda positioner i sitt innehåll. Dessa placeras ut med hjälp av X och Y – koordinater.
När du använder dig av stylesheets är det några viktiga punkter du bör veta, dels i vilken ordning som webbläsaren läser in din css och dels hur webbläsaren därefter prioriterar dina csskoder.
Det första som händer när du får en besökare till din hemsida är att besökarens webbläsare gör en snabb avsökning om hur du har byggt upp hemsidan. Ditt doctype refererar då till de olika regler som rör programspråket (X)HTML med sina specifika cssvärden.
Är fel doctype angivet eller om det helt enkelt saknas ett doctype så går webbläsaren in i något som kallas för quirks mode. Det betyder att varje webbläsare renderar HTML koderna utifrån deras grundinställningar – likaså att bakåtkompatibiliteten varierar.
Med andra ord så får webbläsaren ”gissa” sig till hur sidan är tänkt att presenteras vilket innebär att utseendet på din hemsida kan särskilja sig ganska rejält mellan de olika webbläsarna.
HTML-koder som inte definierats med CSS får därför automatiskt varje webbläsare att gå in i defaultläget quirksmode.
Inläsning av ett webbdokument
Först kontrollerar webbläsaren om det förekommer någon CSS, och den gör det enligt punkterna i följande schema:
- Har du ingen stilmall används webbläsarens grundläge
- Har du däremot en extern, länkad, stilmall prioriteras denna (external style)
- Har du dessutom csskoder inskrivna i sidans <head> på varje dokument prioriteras dessa (internal embeded style)
- Förekommer det därutöver csskoder i HTML-koderna, dvs inline style, prioriteras dessa
Du bör således vara aktsam på att ordningen för din css prioriteras baklänges. De csskoder som skrivs direkt in i html-koden har en högre priorietet trots att du kanske använder css kodavsnitt i <head> eller en extern stilmall.
Det finns dock ett undantag från denna regel och det är att om du lägger in koden/länken till din externa stilmall absolut sist i din <head> precis innan </head> så prioriteras denna före eventuella css kodavsnitt i <head> – sektorn.
Sedan – hur en webbläsare avsöker koderna är därför inte riktigt samma sak som hur den prioriterar koderna.
Enkelt förklarat kan man säga att webbläsaren läser först in koderna uppifrån och ned för att få en uppfattning om strukturen. Därefter värderas koderna utifrån de regler som styrs av ditt doctype om hur sidan är tänkt att presenteras.
Att börja med CSS
Vi ska nu titta lite närmare på CSS. Här har vi tre olika sätt att använda oss av:
- göra en extern stilmall som styr all formatering av hemsidans alla sidor
- placera en inbäddad css-kod i HTML-dokumentets metatagg för att enbart formatera den specifika sidan
- skriva in en css-kod direkt i HTML-koden för att formatera en begränsad del av dokumentet
Vad man väljer är helt efter tycke och smak. Har man en stor hemsida med mycket text, eller där man tycker att man vill ha lite speciella ”effekter” är en css-mall mycket behändig att ha.
Fördelen är att man bara har ett dokument att ändra i, sedan kan man också skapa sig sina egna effekter allt efter man känner sig mer hemma inom css.
Inline, embedded och external css – tre sätt att använda css
Flertalet har med all säkerhet stött på dessa tre uttryck – inline, embedded och external. Dock är osäkerheten hög för vad detta egentligen innebär. På vilket vis dessa kan ta sitt uttryck ska vi nu gå igenom.
Inline css handlar egentligen om att skriva in sina cssvärden direkt i htmlkoden i ett webbdokument. Kika på följande kodning:
<p style="margin: 20px;font-size:1em; font-color:#666;font-family:arial, verdana;">här kommer texten</p>
Som Du ser så går det utmärkt att göra detta förutsatt att du använder attributet style och inom detta anger din css utan klamrar.
Embedded css betyder att din css ska vara inbäddad i dokumentet och det gör du genom att infoga din css i dokumentets head. Ge akt på att du även här definierar din css med style-attributet men att du därefter skriver din css-syntax med klamrar.
<style type="text/css">
<!--
<p {
margin: 20px;
font-size:1em;
font-color:#666;
font-family:arial, verdana;}
-->
</p></style>
External css är all css som ligger utanför själva layouten men som kopplas till webb-dokumentet via en länk i head. Den ser ut så här i doctype för XHTML:
<link href="stylel.css" rel="stylesheet" type="text/css" media="screen" />
Och i doctype för HTML så här:
<link href="stylel.css" rel="stylesheet" type="text/css" media="screen"/>
Vilket alternativ är att föredra?
Inline css styr i detta fall endast det specifika stycket vilket innebär att du för varje stycke måste infoga ditt inlineelement om du vill att texten på alla dina stycken ska se likadan ut. Det innebär också om du gör om din sida och vill ändra på texten så måste du göra det precis överallt.
Det tar mycket tid och arbete i anspråk. Därför är detta alternativ endast att föredra om det är något enskilt stycke du vill lyfta fram.
Embedded css styr hela den specifika sidan – men inte mer. Det innebär att du måste infoga koden i varje sidhuvud på varenda sida. Å andra sidan kan du med detta alternativ förändra en av sidorna men inte de andra – om du vill det.
External css är det bästa alternativet av dem alla eftersom denna finns belägen utanför själva dokumentet. Du skapar en extern stilmall med all css du kommer att behöva för din hemsida, du slipper dessutom ha en massa css i varje dokument och har således delat på presentation och struktur redan här.
Sen slipper du ju en massa merarbete eftersom det enbart är i din stilmall du gör dina ändringar som styr hela siten.
Vi gör en stilmall steg för steg
När du skapar en extern css-mall börjar du med att öppna upp dina anteckningar eller det du nu använder. Skapa ett nytt dokument som du t ex döper till style.css.
OBS! Det är viktigt att du har rätt filändelse i dokumentet. Alla css-dokument ska ha filändelsen .css. Det första du skriver in är detta:
html {font: 11px/150% arial,tahoma,Verdana, Helvetica, sans-serif;color:#000;}
Denna första kod berättar vilket typsnitt du vill använda på texten samt hur stor denna skall vara. Den säger också att du ska ha 150% mellan raderna vilket motsvara ett och ett halvt radavstånd.
Här kan du också ange om du inte vill att sidan automatiskt ska formatera padding eller marginaler eftersom du kanske själv vill lägga till detta längre ned i stilmallen.
Det andra du fyller på med är detta:
body {background:#DDC8A6 url('') repeat left top fixed;}
Dessa koder formaterar i tur och ordning, din bakgrundsfärg – #DDC8A6, din bakgrundsbild – url(’bgimage.gif’). Att den ska upprepas med början från vänstra översta hörnet- repeat left top – fixed – talar om att den ska vara fixerad.
Sist har vi formateringen av din rull-list. Där byter du till de färger du vill ha.
OBS! Formateringen av scrollbaren är IE-specifik och fungerar inte i Firefox, mozilla och nyare webläsare.
scrollbar-arrow-color: #000000; scrollbar-track-color: #DDC8A6; scrollbar-face-color: #DDC8A6; scrollbar-highlight-color: #DDC8A6; scrollbar-3dlight-color: #DDC8A6; scrollbar-darkshadow-color: #DDC8A6; scrollbar-shadow-color: #DDC8A6;
Rubriker länkar och paragrafer
Det tredje du bygger på med är följande:
p { font-family: arial,Verdana, Helvetica, sans-serif; font-size: 11px; letter-spacing: 1px; color: #000000}
h1 { font: 12pt tahoma,verdana, arial, helvetica; color: #3A4A61; font weight: bold}
h2 { font: 11pt tahoma,verdana, arial, helvetica; color: #3A4A61; font weight: bold}
a:link { text-decoration: none; font: 11px tahoma,verdana,helvetica,sans-serif; font-style: normal; font-weight: normal; color:#3A4A61; letter-spacing:1px; cursor:default}
a:visited { text-decoration:none; font: 11px tahoma,verdana,helvetica,arial; font-style: normal; font-weight: normal; color:#3A4A61; letter-spacing:1px; cursor:default}
a:hover { font weight: normal; text-decoration: none; background:#B9B0AD; font-style: normal; color:#000000; letter-spacing:1px; font: 11px tahoma,verdana,helvetica,arial; cursor:default}
a:active { text-decoration:none; font-weight: normal; color:#3A4A61; font-style: normal; letter-spacing:1px; font: 11px tahoma,verdana,helvetica,arial; cursor:default}
Jag utgår nu från att Du har läst lite om HTML-språkets vanliga attribut och definitioner. Om inte kan du hitta information och det på sidorna vanliga html-attribut och vanliga html-definitioner.
Letter-spacing
Letter-spacing betyder avstånd mellan varje bokstav. I detta fall är de satta till 1 pixel. Här kan du också ange points (pt) om du vill. Vill du dessutom ändra på avståndet (höjden) mellan baslinjerna använder du attributet line-height och anger dess värde i pixlar eller points (pt).
Cursorn, dvs markören, ändrar en del utseende på. Det finns olika stilar, några exempel är:
e-resize, w-resize, ne-resize, crosshair, hand, default, auto, n-resize, text, wait
Det är ”krokodil-klamrarna” som håller ihop hela dokumentet med sina koder. Skulle du själv vilja lägga till något ska alla formateringar ske mellan dessa klamrar { respektive }. Selektorn (objektet) du ska formatera ställer du alltid först.
Här är html selektorn (objektet):
html {font: 11px/150% arial,tahoma,Verdana, Helvetica, sans-serif;color:#000;}
Detta var en kort enkel grund för hur man gör en extern stilmall. Men hur kopplar man den till alla sidor?
Koppla stilmallen till htmldokumentet
Jo, nu kommer det som är viktigt. På varje sida som du vill att css-mallen ska formatera måste du i <head> lägga till en länk som kallar på din css-mall. Vi säger att vi valde att döpa den till style.css. Då blir länken som anropar stilmallen denna:
<link rel="stylesheet" href="style.css" media="screen"/>
Jag vill än en gång poängtera, denna länk läggs in i <head> som en vanlig html-kod på de html-sidor som ska formateras. Inte i css-dokumentet!
Det ser då ut som följande:
<head> <title>UNTITLED</title> <link rel=stylesheet href=style.css type="text/css" media="screen"/> </head>
Lägg in css-koden på varje webbsida
Skillnaden mellan att lägga css direkt i html-koden mot att anropa den från en extern mall är som tidigare beskrivet hur du skriver ”start-koden”. I detta fall så ska den läggas in på varje html-sida som ska formateras, men inte alla, och de som ska formateras kanske inte ska se likadana ut.
Det du då behöver börja med är att skriva in detta i head:
<style type="text/css"> <!-- </style>
Vilket ger denna kod:
<html> <head> <title>UNTITLED</title> <style type="text/css"> <!-- </style> </head> </html>
Därefter bygger du på med samma attribut som i den andra css-mallen och avslutar med detta:
-->
Koden i sin helhet ser då ut så här:
<html>
<head>
<title>UNTITLED</title>
<style type="text/css">
<!--
html {font: 11px/150% arial,tahoma,Verdana, Helvetica, sans-serif;color:#000;}
body { background:#DDC8A6 url('') repeat left top fixed;}
SCROLLBAR ÄR IE SPECIFIKT
scrollbar-arrow-color: #000000;
scrollbar-track-color: #DDC8A6;
scrollbar-face-color: #DDC8A6;
scrollbar-highlight-color: #DDC8A6;
scrollbar-3dlight-color: #DDC8A6;
scrollbar-darkshadow-color: #DDC8A6;
scrollbar-shadow-color: #DDC8A6;
p { font-family: arial,Verdana, Helvetica, sans-serif; font-size: 11px; letter-spacing: 1px; color: #000000}
h1 { font: 12pt tahoma,verdana, arial, helvetica; color: #3A4A61; font weight: bold}
h2 { font: 11pt tahoma,verdana, arial, helvetica; color: #3A4A61; font weight: bold}
a:link { text-decoration: none; font: 11px tahoma,verdana,helvetica,sans-serif; font-style: normal; font-weight: normal; color:#3A4A61; letter-spacing:1px; cursor:default}
a:visited { text-decoration:none; font: 11px tahoma,verdana,helvetica,arial; font-style: normal; font-weight: normal; color:#3A4A61; letter-spacing:1px; cursor:default}
a:hover { font weight: normal; text-decoration: none; background:#B9B0AD; font-style: normal; color:#000000; letter-spacing:1px; font: 11px tahoma,verdana,helvetica,arial; cursor:default}
a:active { text-decoration:none; font-weight: normal; color:#3A4A61; font-style: normal; letter-spacing:1px; font: 11px tahoma,verdana,helvetica,arial; cursor:default}
-->
</style>
</head>
</html>
En del väljer att ha flera css-mallar kopplade till sina sidor . Det går alldeles utmärkt. Glöm då bara inte att döpa dessa mallar olika, ex style1.css – style2.css osv. Du kan även dela stilmallen som många av proffsen gör.
CSS är en kraftfull hjälp som kan göra hemsidorna mycket attraktiva och originella när man väl lärt sig att hantera och förstå grunderna.
CSS-koden direkt i html-koden
Här behöver du inte lägga in css-koden i head utan du lägger in den i html-koden som berör det specifika området. Låt oss anta att du i ett enskilt stycke vill förändra både fonten och färgen. De attribut du då skriver in är:
<p style="font-family:arial,tahoma; font-size:10 px; color:#000000; letter-spacing: 2px; line-height:15 px;"></p>
Vi ser här att vi börjar med vanliga metataggar i html-kod:
<p style="
När vi sedan specificerar innehållet blir det annorlunda.
I css skriver man inte ihop orden utan man delar dem, ex font-family. Specificeringen av objekten, eller grupperna som en del väljer att kalla dem, sker med ett semikolon ;
I varje grupp angivs innehållet efter semikolon.
Eftersom vi lägger in hela koden med dess attribut i själva html-koden avslutas den därför också med html-kodens slutattribut.
">
Självfallet kan du lägga in ett helt nytt divblock i formateringen. Då ändrar du bara till detta:
<div style="float:left; width:100px; height:100px; padding:10px 10px; font-family:arial,tahoma; font-size:10 px; color:#000; letter-spacing: 2px; line-height:15 px;">Här kommer allt innehåll</div>
Nu har du ett begränsat område på din sida med din nya font!
Välkommen till lektion 2 om funktion och syntax.