43 besökare, 8 medlemmar och 6 Studenter är online nu
Loopia

Webdesign och HTML

Information om CSS

Innehåll, struktur och tillgänglighet

CSS (Cascading Style Sheets) är stilmallar som tillåter både den som skapar dokument och den som läser dem att använda sin egen stilmall. I praktiken har CSS använts till att formge dokument när det gäller färg, teckensnitt, justering av text och objekt mm. En CSS-mall kan styra tusentals dokument och det är då enkelt att ändra en layout genom att ändra formateringen i CSS-mallen. CSS har tagit HTML ett steg längre och möjliggjort formateringar och effekter som inte tidigare fanns i HTML standarden.

En av fördelarna med CSS är att flera mallar kan användas och de har då företräde inbördes så att en "huvudmall" med de övergripande formateringarna kan ersättas på en lägre nivå av en "lokal mall" som då gäller före huvudmallen. CSS är ett steg mot att separera innehåll och struktur i dokument. All formatering bör ske i externa mallar vilket gör att mängden kod i själva dokumentet minskar avsevärt och gör att sidorna laddas snabbare i webbläsaren. Då samma mall används för varje dokument behöver inte webbläsaren läsa in formateringsanvisningar på nytt varje gång en ny sida anropas.

En målsättning med CSS är att den som läser sidorna också ska kunna påverka utseendet av dokumentet när sidorna läses i webbläsaren. Vissa grupper har ibland utestängts från att använda många platser på Internet. Syn- och hörselskadade och andra har haft svårigheter att ta del av innehåll på sidorna trots att det finns programvaror för tolkning av innehåll på webbsidor. Tillgänglighet är ett av ledorden när framtidens webbplatser ska utformas. Ett av målen för W3C är att göra webbaserat innehåll tillgängligt på fler plattformar. Genom att strukturera dokumenten på rätt sätt ska alltså både synskadade och hörselskadade kunna ta del av innehållet.

Läs mer om W3C och webbstandards »

CSS levels

CSS finns specificerat i olika "nivåer" där CSS 1 innehåller information om relativt enkel formatering som bakgrundsfärger, bakgrundsbilder, teckensnitt och justering av text. CSS 2 går ett steg längre och ger möjlighet att formge hela dokument med positionerade rektangulära områden (DIV, boxar) som tidigare bara varit möjligt med tabeller (tables). CSS 3 inkluderar ett antal effekter som idag inte har fullt stöd i alla webbläsare men ändå kan användas.

 

CSS i extern mall eller i dokumentet?

När du använder CSS för att formatera en sida kan du infoga CSS-formateringen med tre metoder:

  1. Extern CSS-mall
    En extern CSS-mall kopplas till dokumentet

  2. I dokumentet
    I dokumentets huvud <HEAD>

  3. Direkt i HTML-element
    Anges i det HTML-elementet där CSS-formateringen ska utföras
VIKTIGT!
För att CSS-formateringen ska fungera måste all tidigare HTML-formatering tas bort. En formatering direkt i dokumentet gäller alltid före en formatering i extern CSS-mall. Prioriteringsordningen av formateringen är följande:

  1. HTML-formatering
  2. CSS-formatering direkt i HTML-element
  3. CSS-formatering i dokumentets <HEAD>
  4. CSS-formatering i extern CSS-mall
Formateringen ska börja i omvänd ordning enligt ovan. Börja formateringen i en extern CSS-mall som du kopplar till dina dokument. Vill du sedan ange avvikande format lokalt i ett dokument använder du CSS direkt i dokumentet. Om någon del av dokumentet ska avvika från övrig CSS-formatering anger du detta direkt i HTML-elementet.

 

1. CSS i extern mall

Det här är den vanligaste användningen av CSS där ett externt dokument som innehåller formateringen kopplas till alla de sidor som ska tillämpa formatet. Namnet på CSS-mallen måste ha filtilläget .css och namnet på mallen i exemplet nedan är mall.css

Den här metoden är mest effektiv och bör användas i första hand. Om formateringen ska ändras behöver du bara göra det i ett enda mall-dokument. Här uppfylls målet med att separera innehåll och struktur i dokumenten.

Så här kan koden för sidorna som kopplas till mallen se ut:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>
Sidans namn</title>
<link href="mall.css" rel="stylesheet" type="text/css">

</head>
<body>
<h1>
Rubrik</h1>
</body>
</html>

CSS-mallen mall.css innehåller formateringen av rubriken <H1> ovan:

h1 { font-size: 24px; }

Du kan koppla flera externa CSS-mallar till samma dokument. Om samma selektorer förekommer i båda mallarna men med olika formatering gäller den mall som angivits senast i radvis ordning. I exemplet nedan gäller alltså mall2.css före mall.css :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>
Sidans namn</title>
<link href="mall.css" rel="stylesheet" type="text/css">
<link href="mall2.css" rel="stylesheet" type="text/css">

</head>
<body>
<h1>
Rubrik</h1>
</body>
</html>

 

2. CSS i dokumentet

CSS-formatering angiven direkt i dokumentet kan användas när vissa sidor ska avvika från huvudmallens formatering. Den här metoden är inte lika effektiv som att använda en extern CSS-mall. Om formateringen ska ändras måste det utföras i varje enskilt dokument som använder formateringen.

Här formateras rubriken <H1> direkt i dokumentet:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sidans namn</title>
<style type="text/css">
<!--
h1 { font-size: 24px; }
-->
</style>

</head>
<body>
<h1>Rubrik</h1>
</body>
</html>

 

3. CSS direkt i elementet som ska formateras

Den här metoden är minst effektiv och här uppfylls inte målet med att separera innehåll och struktur i dokumenten. CSS-formateringen anges i anslutning till de elementsom ska formateras. När formatet ska användas i ett nytt elememnt måste CSS-koden anges på nytt och det innebär att sidorna innehåller mycket kod och tar längre tid att laddas i webbläsaren.

Så här kan koden se ut när rubriken <H1> formateras direkt i elementet:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>
Sidans namn</title>
</head>
<body>
<h1 style="font-size: 24px;">
Rubrik</h1>
</body>
</html>

 

Använda CLASSER som selektorer

Selektorn CLASS kan användas som attribut till alla element och det ger dig möjlighet att använda olika format på samma typ av element.

Om du vill tilldela elementet <P> olika format kan du alltså lägga till attributet CLASS och det class-namn som ska användas:

<p class="textformat1">text här...</p>
<p class="textformat2">annan text här...</p>

Här tillämpas formateringen med CLASS som attribut till <P> i dokumentet:

<body>
<h1>
Text 1</h1>
<p class="textformat1">

För att din webbplats ska vara tillgänglig för besökare måste den ha en unik adress och finnas på en dator som alltid är ansluten till Internet.
</p>

<h1>Text 2</h1>
<p class="textformat2">

Ett seriöst webbhotell ansvarar för brandvägg och virusskydd. Dessutom är det viktigt att de gör regelbundna backuper av din webbplats och att din webbplats finns på fler än en webbserver så att den alltid är tillgänglig även om en webbserver krånglar.
</p>
</body>

Här är classerna angivna i CSS-mallen. Notera den inledande punkten i classnamnet som är viktig och måste finnas med:

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
}
h1 {
font-size: 28px;
}
.textformat1 {
color: #057d08;
}
.textformat2 {
color: #c34781;
}

Här är resultatet i webbläsaren:

Du kan ha flera mallar med class-namn du själv anger som som tex:

.teckensnitt2
.textcolor
.bakgrundsfarg
.kantlinje
.kantlinje2

CLASS kan också användas på angivet område i ett element sk inline element.

Om du bara vill formatera några ord inom <P> kan du omsluta området som ska formateras med <SPAN>.

Här används <SPAN> för att omsluta de delar av texten som ska formateras:

<body>
<h1>
Text 1</h1>
<p>
För att <span class="textformat1">din webbplats</span> ska vara <span class="textformat2">tillgänglig</span> för besökare måste den ha en unik <span class="textformat2">adress</span> och finnas på en dator som alltid är ansluten till Internet. Du kan använda din<span class="textformat2"> egen dator</span> om du har en fast uppkoppling mot Internet med en egen IP-adress. </p>
</body>

Här är resultatet i webbläsaren:

 

Mer om enheter: % - em - px

CSS ger möjlighet att skala text obegränsat och olika enheter för att ange storleken. En vanlig enhet är pixlar som även används för att ange storlek på bildskärmar och därför erbjuder bra kontroll över hur resultatet blir på en bildskärm.

TIPS! Prova att förstora eller förminska texten i denna guide.

Snabbkommandot i Chrome, Firefox och Internet Explorer är CTRL+plus eller CTRL+minus, återställ till standardstorlek igen med CTRL+0

Klicka här för provsida med olika enheter Öppnas i nytt fönster (Open in new window)

Textstorlekar kan anges i följande enheter:

px - pixlar (pixels) - samma enhet som bildskärmars upplösning
pt - Punkter (point) - 1 pt är lika med 1/72 inch
in
- tum (inch)
cm - centimeter
mm - millimeter
p - picas - 1 pc är lika med 12 punkter
em
- em - relativ till andra element
ex
- exs - en ex är x-höjden på ett tecken
% - Procent - relativ till andra element

Enheterna pt, pica och ems har traditionellt använts i typografin och trycksaker.

TIPS! Fler exempel och information om enheter finns i guiden CSS-positionering »

 

Teckensnitt och teckenfärg

Tillämpa CSS-formateringen i en extern mall eller direkt i dokumentet.

OBS! Du måste ta bort all eventuell tidigare HTML-formatering för att CSS-formateringen ska gälla. Läs mer i avsnittet ovan: CSS med olika metoder »

För att använda samma teckensnitt och storlek på all text i ett dokument kan innehållet i CSS-mallen se ut så här:

body {
font-size: 16px;
}
p {
font-size: 16px;
}
td {
font-size: 16px;
}
li {
font-size: 16px;
}

Notera att formateringen anges för flera element för att även texten som finns i tabellceller <TD>, stycketext <P> och listor <LI> ska formateras.

Det kan fungera att bara ange textstorleken inom <BODY> men vissa webbläsare använder då inte formateringen i tabellceller eller listor. Att ange samma formatering för de element du använder på din sida är en metod att säkerställa att formateringen verkligen fungerar i de flesta webbläsare.

För att ange teckenfärg på all text i hela dokumentet <BODY> kan koden se ut så här:

body {
font-family: Verdana;
font-size: 16px;
color: #003366;
}

 

Rubriker <H>

Ett effektiv metod att enkelt byta formatering av Rubrikerna i dokument är att koppla dem till de vanliga märkena för Heading dvs H1-H6.

Du kan då kan du formatera "brödtexten" enligt avsnittet om teckensnitt ovan men ha olika storlekar på rubrikerna genom att tilldela märkena <H1> till <H6> egna storlekar och teckensnitt.

Så här kan CSS-koden se ut:

h1, h2, h3 {
font-family: Verdana;
}
h1 {
font-size: 30px;
font-weight: normal;
letter-spacing: 2px;
}
h2 {
font-size: 26px;
font-weight: normal;
letter-spacing: 1px;
}
h3 {
font-size: 22px
}

 

Bakgrundsfärg

Även bakgrundsfärgen kan du ange i din CSS-mall vilket gör det enkelt att byta färg på alla sidor. Både teckensnitt och bakgrundsfärg för hela sidan anges i märket <BODY>.

Så här kan CSS-koden se ut:

body {
background-color: #000;
font-family: Verdana;
font-size: 16px;
color: #999
}

Klicka här för att se exemplet Öppnas i nytt fönster (Open in new window)

 

Bakgrundsbild

För att ange vilken bakgrundsbild som skall användas gör du på samma sätt som med bakgrundsfärg.

Så här kan CSS-koden se ut:

body {
background-image
: url(bakgrundsbild.jpg);
}

Klicka här för att se exemplet Öppnas i nytt fönster (Open in new window)

 

CSS ger fler möjligheter att bestämma bakgrundsbildens position, egenskaper och upprepning.

Bakgrundsbild som inte upprepas

body {
background-image: url(bakgrundsbild.gif);
background-repeat: no-repeat;
}

Klicka här för att se exemplet Öppnas i nytt fönster (Open in new window)

 

Bakgrundsbild som är fixerad och endast upprepas åt höger (ej nedåt):

body {
background-image: url(bakgrundsbild.gif);
background-repeat: repeat-x;
background-attachment: fixed;

}

Klicka här för att se exemplet Öppnas i nytt fönster (Open in new window)

 

Bakgrundsbild som är fixerad och inte upprepas.
Bilden är centrerad både horisontellt och vertikalt:

body { background-image: url(bakgrundsbild.gif);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;

}

Klicka här för att se exemplet Öppnas i nytt fönster (Open in new window)

 

Bakgrundsbild som bara upprepas nedåt (ej åt höger):

body {
background-image: url(bakgrundsbild.gif);
background-repeat: repeat-y;
}

Klicka här för att se exemplet Öppnas i nytt fönster (Open in new window)

 

 

A HREF - länkar (pseudo-classes)

Pseudo-classes är en benämning på information som kan användas i CSS selektorer men inte finns som HTML-kod. Det är egentligen en form av "fiktiva taggar" som gör det möjligt att tex ange egenskaper för länkar.

HTML använder elementet <A HREF> men det finns inga attribut som anger om en länk har använts (besökts). Däremot finns det funktioner i webbläsaren som tilldelar länkarna egenskaper om de besökts eller ej. Genom att använda pseudo-classes till <A HREF> kan du själv bestämma egenskaperna med CSS.

Selektorerna som används för länkar <A HREF> är:

a:link = länk
a:visited = länk som användaren klickat på
a:active = länk som välj (klickas på) av användaren
a:hover = länk som muspekaren förs över (hovras över)

 

Ta bort understrykning i länk

Att ta bort understrykningen i länkar är något som används i menyer där man ju kan anta och förstå att alla menyval är länkade. Om du vill ta bort understrykningen på länkar i övrigt bör du se till att de har en färg eller annat kännetecken som gör att dina besökare förstår att det är klickbara länkar.

Koden nedan tar bort understrykning på länkar, besökta länkar och aktiva länkar:

a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:active { text-decoration: none; }

 

Länkar - egen färg

Det kan vara en bra ha med i planeringen att dina besökare letar efter det typiska länkutseendet (blå och understruken) och kan missa dina länkar om de inte är utmärkande på något annat sätt.

Genom att ta bort understrykning och ändra färg på länkarna kan du få dina länkade texter passa in bättre i din övriga layout. Koden nedan ändrar färg på länkar och besökta länkar och ger understrykning vid hovring:

a:link {
color: #a812ae;
text-decoration: none;
}
a:visited {
color: #a812ae;
}
a:hover {
text-decoration: underline;
}

Klicka här för att se exemplet Öppnas i nytt fönster (Open in new window)

 

Länkar - hover (OnMouseOver)

OnMouseOver (rollover, hover) är läget när du för muspekaren över en länkad text. Med CSS kan du tilldela text och bildlänkar olika OnMouseOver-effekter. Exemplet nedan tar bort understrykningen av länkar men visar understrykning vid OnMouseOver.

Koden kan se ut så här:

a:link { text-decoration: none;}
a:visited { text-decoration: none; }
a:hover {
text-decoration: underline; }

OBS! Selektorn a:hover måste placeras efter a:link och a:visited
Om du använder bakgrundsfärg som hover-effekt kommer den annars inte att synas.

Det finns flera hover-effekter och du ser några exempel nedan.

a:hover { color: #CC6600; }
a:hover { background-color: #99CCFF; }

a:hover { text-decoration: underline overline; }

a:hover { font-style: italic; }
a:hover { background-image: url(egen_bild.gif); }
a:hover { letter-spacing: 5px}

a:hover { cursor: help; }
a:hover { cursor: e-resize}
a:hover { color: #FFFFFF; background-color: #006699; }

Klicka här för att se alla exemplen ovan Öppnas i nytt fönster (Open in new window)

 

Radavstånd

Du kan styra radavståndet i hela din text eller endast i vissa stycken genom att använda CSS-kod. Det kan vara bättre att ha luft i texten och ha ett normalstort teckensnitt än att förstora teckensnittet för att fylla ut en sida. När du använder avståndsangivelser i CSS så kan du använda olika måttenheter för att ange avstånden. Vanliga mått är:

points (pt), pixels (px), inch (in), centimeter (cm), millimeter (mm), pica (pc), procent (%)

Class-namnet i exemplet nedan är .linespacing och koden kan se ut så här:

.linespacing { line-height: 20px; }

Tillämpa classen på ett stycke <P> eller tabellcell <TD>

<body>
<p class="linespacing">texten i ett stycke...</p>
</body>

Om du bara vill formatera några ord inom <P> kan du omluta området som ska formateras med <SPAN>. Exemplet nedan formaterar endast den text som omsluts av <span>:

<body>
<p>texten i ett stycke men bara ett <span class="linespacing">par tre textrader som formaterats med CSS-mallen för radavståndet</span> och de andra raderna är oformaterade...</p>
</body>

Nedan visas några exempel där radavstånd tillämpas:

normalt radavstånd 20 pixlar
  .linespacing {line-height: 20px}

Du kan styra radavståndet i hela din text eller i vissa stycken genom att använda CSS-kod. Det är ju oftast bättre att ha luft i texten och ha ett normalstort teckensnitt än att förstora teckensnittet för att fylla upp en sida. När du använder avståndsangivelser i CSS så kan du använda olika måttenheter för att ange avstånden. Vanliga mått är: points (pt), pixels (px), inch (in), centimeter (cm), millimeter (mm), pica (pc), procent (%).

 

Du kan styra radavståndet i hela din text eller i vissa stycken genom att använda CSS-kod. Det är ju oftast bättre att ha luft i texten och ha ett normalstort teckensnitt än att förstora teckensnittet för att fylla upp en sida. När du använder avståndsangivelser i CSS så kan du använda olika måttenheter för att ange avstånden. Vanliga mått är: points (pt), pixels (px), inch (in), centimeter (cm), millimeter (mm), pica (pc), procent (%).

200 % 20 punkter
.linespacing {line-height: 200%} .linespacing {line-height: 20pt}

Du kan styra radavståndet i hela din text eller i vissa stycken genom att använda CSS-kod. Det är ju oftast bättre att ha luft i texten och ha ett normalstort teckensnitt än att förstora teckensnittet för att fylla upp en sida. När du använder avståndsangivelser i CSS så kan du använda olika måttenheter för att ange avstånden. Vanliga mått är: points (pt), pixels (px), inch (in), centimeter (cm), millimeter (mm), pica (pc), procent (%).

Du kan styra radavståndet i hela din text eller i vissa stycken genom att använda CSS-kod. Det är ju oftast bättre att ha luft i texten och ha ett normalstort teckensnitt än att förstora teckensnittet för att fylla upp en sida. När du använder avståndsangivelser i CSS så kan du använda olika måttenheter för att ange avstånden. Vanliga mått är: points (pt), pixels (px), inch (in), centimeter (cm), millimeter (mm), pica (pc), procent (%).

 

Justering av text

Justering av text höger, vänster, centrerad eller marginaljustering. Du kan även ange avstånd mellan orden eller bokstäverna.

Class-namnet i exemplet nedan är .justering och koden kan se ut så här:

.justering { text-align: justify; }

(För tillämpning av formateringen se ovan » )

full justering (marginaljustering) första radens indrag
.justering {text-align: justify;} .justering {text-indent: 20px;}

Full justering av texten används ofta i tidningsartiklar eller ordbehandling i kolumner och kallas i CSS för "justify". För bästa resultat ska egentligen vissa ord avstavas men ännu finns ingen bra metod för detta varken i HTML eller i CSS. Naturligtvis kan du också ange vänsterjustering (left), högerjustering (right), och centrering (center) på samma sätt som i HTML men fördelen är ju att du kan ändra all justering i en extern CSS-mall.

 

Första radens indrag i en text är också en formatering som används i tidningsartiklar och ordbehandling.

Varje nytt stycke börjar då med indragen text och det passar bra att samtidigt formatera avståndet mellan stycken <P> och radavstånd för att få full kontroll över textflödet.

Här är formateringen tillämpad på stycken <P> och varje nytt stycke inleds med det angivna indraget.

avstånd mellan ord avstånd mellan bokstäver
.justering {word-spacing: 10px;} .justering {letter-spacing: 3px;}

Avstånd mellan ord är (liksom avstånd mellan bokstäver) kanske inte är den mest använda formateringen men du kanske har användning av den ändå? Avstånden mellan orden kan anges med olika mått som tex: points (pt), pixels (px), inch (in), centimeter (cm), millimeter (mm), pica (pc), procent (%).

Avstånd mellan bokstäver är (liksom avstånd mellan ord) kanske inte är den mest använda formateringen men du kanske har användning av den ändå? Avstånden mellan bokstäverna kan anges med olika mått som tex: points (pt), pixels (px), inch (in), centimeter (cm), millimeter (mm), pica (pc), procent (%).

 

Listor - punktlistor och numrerade listor

Punktlistor <UL> eller numrerade listor <OL> kan formateras med CSS. Förutom att formatera hela listan han du formatera varje listelement <LI>.

CSS-kod till punktlista med cirkel som symbol:

ul { list-style-type: circle; }

Formaterar alla punktlistor <UL> i dokumentet:

  • Punkt 1
  • Punkt 2
  • Punkt 3

CSS-kod till punktlista med punkt som symbol:

ul { list-style-type: disc; }

Formaterar alla punktlistor <UL> i dokumentet:

  • Punkt 1
  • Punkt 2
  • Punkt 3

CSS-kod till punktlista med rektangel som symbol:

ul { list-style-type: square; }

Formaterar alla punktlistor <UL> i dokumentet:

  • Punkt 1
  • Punkt 2
  • Punkt 3

 

För att få olika format för punktlistor i samma dokument använder du en class som selektor:

.punktlista {list-style-type: circle}

...tillämpa classen på de listområden <UL> som ska ha formateringen:

<ul class="punktlista">
<li>punkt 1</li>
<li>punkt 2</li>
<li>punkt 3</li>

 

Egna bilder i punktlista

Egna bilder kan användas som symbol i punktlistorna:

  • Punkt 1
  • Punkt 2
  • Punkt 3
  • Punkt 1
  • Punkt 2
  • Punkt 3
  • Punkt 1
  • Punkt 2
  • Punkt 3

CSS-kod till punktlista med bild som symbol:

ul { list-style-image: url(din_bild.gif); }

För att få olika format för punktlistor i samma dokument använder du en class som selektor:

.bildpunktlista { list-style-image: url(din_bild.gif); }

...tillämpa classen på de listområden <UL> som ska ha formateringen:

<ul class="bildpunktlista">
<li>punkt 1</li>
<li>punkt 2</li>
<li>punkt 3</li>

 

Numrerad lista

Numrerade listor <OL> formateras enligt samma pricip som punktlistorna ovan. De olika egenskaper du kan använda ser du i exemplen nedan:

ol { list-style-type: lower-roman; }
  1. Punkt 1
  2. Punkt 2
  3. Punkt 3
ol { list-style-type: upper-roman; }
  1. Punkt 1
  2. Punkt 2
  3. Punkt 3
ol { list-style-type: lower-alpha; }
  1. Punkt 1
  2. Punkt 2
  3. Punkt 3
ol { list-style-type: upper-alpha; }
  1. Punkt 1
  2. Punkt 2
  3. Punkt 3
ol { list-style-type: decimal; }
  1. Punkt 1
  2. Punkt 2
  3. Punkt 3

 

Text, bakgrundsfärg

Med hjälp av CSS kan du få en färgad bakgrund på enstaka bokstäver, ord eller hela rader.

I den här texten har ett ord färgad bakgrund. CSS-koden som använder class-selektor ser ut så här:

.text_bakgrundsfarg { background-color: #FFCC00; }

Tillämpa formateringen på del av text genom att omsluta området med <SPAN>:

<span class="text_bakgrundsfarg">din text här...</span>

Tillämpa formateringen på ett element:

<p class="text_bakgrundsfarg">ett helt textstycke som formaterats...</p>

Du kan formatera tex rubriker <H1> till <H7>:

h1 { background-color: #CCFF33; }
h2
{
background-color: #FFFF99; }
h3 {
background-color: #CCCCCC; }

Om du vill använda flera olika färger skapar du en egen class för varje färg:

Om du vill att olika delar av texten skall ha olika färg på bakgrunden så kan du tex använda en mall för varje färg du vill ha.

Då kan du namnge dem efter den färg de ger:

.blue { background-color: #99CCFF; }
.green {
background-color: #99FF99; }
.red {
background-color: #FF6666; }
.yellow {
background-color: #FFFF99; }

Tillämpa formateringen på del av text genom att omsluta området med <SPAN>:

<p>
Om du vill att <span class="blue"> olika delar av texten </span> skall ha <span class="green"> olika färg på bakgrunden </span> så kan du tex använda
<span class="red"> en mall för varje färg </span>  du vill ha. Då kan du namnge dem <span class="yellow"> efter den färg de ger: </span>
</p>

 

Kantlinjer i tabeller mm

Kantlinjer som endast ska synas runt tabellen och inte runt cellerna går att få utan CSS men då måste du oftast använda en tabell i en annan tabell - nästlade tabeller. Med CSS kan du ange kantlinjen direkt i önskad del av tabellen och dessutom ange typ av kantlinje.

OBS! När du använder CSS för kantlinje i tabell måste du ta bort den HTML-formaterade tabellkantlinjen för att CSS-formateringen ska gälla.

Ange border="0" för tabellen:

<table border="0" cellpadding="5" cellspacing="0">
<tr>
<td>
cell1</td>
<td>
cell2</td>
</tr>
</table>

 

Tabellen nedan har en kantlinje som består av punkter (dotted):

Cell1 Cell2
Cell3 Cell4

Använd ett eget class-namn:

.kantlinje { border: 1px dotted #003366; }

Tillämpa formateringen på tabellen:

<table class="kantlinje" border="0">
<tr>
<td>Cell1</td>
<td>Cell2</td>
</tr>
<tr>
<td>Cell3</td>
<td>Cell4</td>
</tr>
</table>

 

Cellerna nedan har en kantlinje som består av punkter (dotted):

Cell1 Cell2
Cell3 Cell4

Tillämpa formateringen på tabellcellerna <TD>:

<table border="0" cellpadding="5" cellspacing="3">
<tr>
<td
class="kantlinje">Cell1</td>
<td
class="kantlinje">Cell2</td>
</tr>
<tr>
<td
class="kantlinje">Cell3</td>
<td
class="kantlinje">Cell4</td>
</tr>
</table>

 

Tabellen nedan har kantlinje över och under:

Cell1 Cell2
Cell3 Cell4
Cell5 Cell6

Använd ett eget class-namn:

.kantlinje {
border-top: 1px dotted #003366;
border-bottom: 1px dotted #003366;

}

 

Cellerna nedan har kantlinje i underkant:

Cell1 Cell2
Cell3 Cell4
Cell5 Cell6
Cell7 Cell8
Cell9 Cell10

Använd ett eget class-namn:

.kantlinje { border-bottom: 1px dotted #003366; }

Tillämpa formateringen på tabellcellerna:

<table border="0" cellpadding="5" cellspacing="1">
<tr align="center">
<td
class="kantlinje">Cell1</td>
<td
class="kantlinje">Cell2</td>
</tr>
<tr align="center">
<td
class="kantlinje">Cell3</td>
<td
class="kantlinje">Cell4</td>
</tr>
</table>

 

Fler exempel på kantlinjetyper:

border: 1px dashed #003366 border: 1px solid #003366

border: 3px double #003366}

border: 5px groove #CCCC66

 

Kantlinjer kan du tillämpa på andra element än tabeller.

Du kan ha kantlinjer på stycken <P> eller rubriker <H1-6> och andra områden med <DIV> <SPAN>:

Det här är ett stycke <P> som har samma kantlinje som tabellerna ovan. Som du ser så sträcker sig kantlinjen från kant till kant i hela styckets längd...

Tillämpa classen direkt i stycket <P>:

<p class="kantlinje">Det här är ett stycke...</p>

 

 

<DIV> för att omsluta flera element

<DIV> kan liknas vid en typ av "box" och kan omsluta flera element så kan du ge dem samma egenskaper.

Om du vill tillämpa en formatering på flera märken samtidigt kan du omsluta området med <DIV>

Läs mer om DIV-boxar i guiden CSS layout »

 

Sidbrytning

Vid längre texter som är uppdelad i avsnitt eller kapitel som ska skrivas ut på egna sidor kan du använda CSS för att ange avsnittsbrytningar. Du kan ange att brytningar ska ske före eller efter vissa element som tex:
<P> <H> <TR> <LI>

OBS! Fungerar inte tillsammans med <BR> och <HR>. Du kan inte heller ange sidbrytningar inom positionerade objekt.

Då du förmodligen inte vill ha en sidbrytning efter varje stycke eller rubrik passar det bättre att ange en egen anpassad mall och sedan tillämpa den på just det stycke eller den rubrik du vill ha brytning före/efter:

.sidbrytning { page-break-after: always; }

page-break-after: always
ger sidbrytning efter det område eller märke du tillämpat mallen på.

page-break-before: always
ger sidbrytning före det område eller märke du tillämpat mallen på.

Tillämpa mallen på det märke eller område du vill ha på egna sidor vid utskrift. I exemplet är den tillämpad på ett stycke <P>:

<p class="sidbrytning">Det här är ett stycke med sidbrytning efter stycket...</p>

Klicka här för att se exempel på sidbrytning Öppnas i nytt fönster (Open in new window)