Hur man skapar CSS

Hur man lägger till en stiltabell

När en stiltabell läses in, formaterar webbläsaren HTML-dokumentet baserat på den. Det finns tre sätt att lägga till en stiltabell:

Externa stiltabeller

När stilar behöver tillämpas på många sidor, är externa stiltabeller ett idealiskt val. När du använder externa stiltabeller kan du ändra hela webbplatsens utseende genom att ändra en enda fil. Varje sida länkar till stiltabellen via <link>-taggen i (dokumentets) huvud:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

Webbläsaren läser in stildeklarationer från filen mystyle.css och formaterar dokumentet baserat på det.

Externa stiltabeller kan redigeras i alla textredigerare. Filen får inte innehålla några html-taggar. Stiltabellen bör sparas med .css-utökningen. Här är ett exempel på en stiltabellfil:

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

Lämna ingen blanksteg mellan egenskapsvärdet och enheten. Om du använder "margin-left: 20 px" istället för "margin-left: 20px", fungerar det endast i IE 6, men inte i Mozilla/Firefox eller Netscape.

Intern stiltabell

När ett enskilt dokument behöver speciella stilar, bör du använda en intern stiltabell. Du kan använda <style>-taggen för att definiera en intern stiltabell i dokumentets huvud, som så här:

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

Inline-stil

Eftersom det kombineras med utseende och innehåll, förloras många fördelar med CSS-tabellen när inline-stil används. Använd detta metod försiktigt, till exempel när stilen endast behöver tillämpas en gång på ett element.

För att använda inline-stil, måste du använda style-egenskapen inom relevanta taggar. Style-egenskapen kan innehålla alla CSS-egenskaper. Detta exempel visar hur du ändrar textens färg och vänster sidomarg:

<p> style="color: sienna; margin-left: 20px">
Detta är en paragraf
</p>

Flera stilar

Om vissa egenskaper definieras av samma val i olika stilmärkningar, kommer egenskapsvärdet att härledas från den mer specifika stilmärkningen.

Till exempel har den externa stilmärkningen tre egenskaper för h3-val:

h3 {
  color: röd;
  text-align: vänster;
  font-size: 8pt;
  }

och den interna stilmärkningen har två egenskaper för h3-val:

h3 {
  text-align: höger; 
  font-size: 20pt;
  }

Om sidan med den interna stilmärkningen också är länkad till den externa stilmärkningen, är stilen som h3 får:

color: röd; 
text-align: höger; 
font-size: 20pt;

Färgattribut kommer att ärva från den externa stilmärkningen, medan textarrangemang (text-alignment) och fontstorlek (font-size) kommer att ersättas av regler i den interna stilmärkningen.