CSS betyder Cascading Style Sheets - också kallad stilmallar. Det är ett dokument man använder som hjälp till att styra utseendet på sina sidor med och det finns 3 nivåer av css - CSS 1, CSS 2 respektive CSS 3. Flertalet brukar använda CSS 1 och 2 som formaterar bland annat text, bakgrunder, länkar, fonter och så vidare. CSS 2 används till placeringar av objekt på sidan. Det vill säga, om man vill ha bestämda positioner i sitt innehåll. Dessa placeras ut med hjälp av X och Y - koordinater. När det gäller CSS 3 så är det relativt nytt. Tänk därför på att många webbläsare än så länge inte stöder css 3.

När du då använder dig av stylesheets är det några viktiga punkter du bör veta eftersom webbläsaren i första hand avläser din html-kod, den så att sägas prioriteras.

I andra hand det som du har kodat med css direkt i html-koden.

I tredje hand om du har en stilmallsformatering i dokumentet, det vill säga du formaterar varje sida för sig med css i head.

Sist gäller den css-mall som du vill koppla till sidorna via en länk.

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:

  1. Vi gör en extern stilmall som styr all formatering av hemsidans alla sidor
  2. Vi placerar in en css-kod - en dokumentmall - i HTML-dokumentets metatagg <head> för att enbart formatera den specifika sidan</head>
  3. Vi skriver 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 eftersom man känner sig mer “hemma” inom css. En lite mer förkortad information angående det här står att läsa i posten om inline-embedded-och-external-css

En dokumentmall

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:

  1. 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 margin:0; padding:0; eftersom du kanske själv vill lägga till detta längre ned i stilmallen.

Det andra du fyller på med är detta:

  1. 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 för scrollbaren är IE - specifik och fungerar inte i Firefox, mozilla och nyare webläsare.

  1. scrollbar-arrow-color: #000000;
  2. scrollbar-track-color: #DDC8A6;
  3. scrollbar-face-color: #DDC8A6;
  4. scrollbar-highlight-color: #DDC8A6;
  5. scrollbar-3dlight-color: #DDC8A6;
  6. scrollbar-darkshadow-color: #DDC8A6;
  7. scrollbar-shadow-color: #DDC8A6;

Det tredje du bygger på med är följande:

  1. p { font-family: arial,Verdana, Helvetica, sans-serif; font-size: 11px; letter-spacing: 1px; color: #000000}
  2. h1 { font: 12pt tahoma,verdana, arial, helvetica; color: #3A4A61; font weight: bold}
  3. h2 { font: 11pt tahoma,verdana, arial, helvetica; color: #3A4A61; font weight: bold}
  4. 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}
  5. a:visited { text-decoration:none; font: 11px tahoma,verdana,helvetica,arial; font-style: normal; font-weight: normal; color:#3A4A61; letter-spacing:1px; cursor:default}
  6. 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}
  7. 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 så du vet vad P respektive h1/h2 är. Det är i alla fall i dessa koder du ändrar teckensnitt, storlek, länkfärg, om du inte vill ha understrukna länkar, och så vidare. 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å höjden mellan bokstäverna 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:

  1. e-resize, w-resize, ne-resize, crosshair, hand, default, auto, n-resize, text, wait

Vill du t ex formatera en lista har du en mer ingående guide om detta här

Det är “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 } - det vill säga selektorerna. Objektet du ska formatera ställer du framför. Som i exemplet här där html är objektet:

  1. html {font: 11px/150% arial,tahoma,Verdana, Helvetica, sans-serif;color:#000;}

Ja, detta var en enkel grund för en extern stilmall till css.

Hur kopplar man den till alla sidor?

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 mallen denna:

  1. <link rel="stylesheet" href="style.css"></link>

Jag vill än en gång poängtera, denna länk läggs in i den vanliga html-koden på de sidor som ska formateras. Inte i css-dokumentet!
Det ser då ut som följande:

  1. <html></html>
  2. <head></head>
  3. <title>UNTITLED</title>
  4. <link rel=stylesheet href=style.css type="text/css"></link>

Att lägga in css-koden på varje webbsida

Skillnaden mellan att lägga css direkt i html-koden och att anropa den från en extern mall är hur du skriver “start”-koden. I detta fall så ska den läggas in på varje 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:

  1. <style type="text/css"></style>
  2. <!--

Vilket ger denna kod:

  1. <html></html>
  2. <head></head>
  3. <title>UNTITLED</title>
  4. <style type="text/css"></style>
  5. <!--

Därefter bygger du på med samma attribut som i den andra css-mallen och avslutar med detta:

  1. -->

Koden i sin helhet ser då ut så här:

  1. <html></html>
  2. <head></head>
  3. <title>UNTITLED</title>
  4. <style type="text/css"></style>
  5. <!--
  6. html {font: 11px/150% arial,tahoma,Verdana, Helvetica, sans-serif;color:#000;}
  7. body { background:#DDC8A6 url('') repeat left top fixed;}
  8. SCROLLBAR ÄR IE SPECIFIKT
  9. scrollbar-arrow-color: #000000;
  10. scrollbar-track-color: #DDC8A6;
  11. scrollbar-face-color: #DDC8A6;
  12. scrollbar-highlight-color: #DDC8A6;
  13. scrollbar-3dlight-color: #DDC8A6;
  14. scrollbar-darkshadow-color: #DDC8A6;
  15. scrollbar-shadow-color: #DDC8A6;
  16. p { font-family: arial,Verdana, Helvetica, sans-serif; font-size: 11px; letter-spacing: 1px; color: #000000}
  17. h1 { font: 12pt tahoma,verdana, arial, helvetica; color: #3A4A61; font weight: bold}
  18. h2 { font: 11pt tahoma,verdana, arial, helvetica; color: #3A4A61; font weight: bold}
  19. 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}
  20. a:visited { text-decoration:none; font: 11px tahoma,verdana,helvetica,arial; font-style: normal; font-weight: normal; color:#3A4A61; letter-spacing:1px; cursor:default}
  21. 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}
  22. a:active { text-decoration:none; font-weight: normal; color:#3A4A61; font-style: normal; letter-spacing:1px; font: 11px tahoma,verdana,helvetica,arial; cursor:default}
  23. -->

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:

  1. <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:

  1. <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.

  1. ">

Självfallet kan du lägga in ett helt nytt divblock i formateringen. Då ändrar du bara till detta:

  1. <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;"></div>

Nu har du ett begränsat område på din sida med din nya font!

Skriv ut!
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...