STARTSIDAN - ANSLAGSTAVLA - ACTIVE X - ABC-KOM IGÅNG - CGI - DIVERSE - FAQ - FORMULÄR - FRAMES - GRAFIK - DHTML - HTML4 - HTML - JAVA - JAVASCRIPT - LISTOR - LÄNKAR - SITEMAP - SÖK - TABELLER - TEXT - ANNICA TIGER - TIGER-LÄNKAR - TIPS - STYLE SHEETS - CSS - WAP - WEB-DESIGN - XHTML - XML

Style Sheets - CSS

Allmänt om Style Sheets
Mer om attributen
Dela in i klasser
Metod 1 - en extern fil
Metod 2 - inbäddat
Metod 3 - enstaka element
Blanda metoder
Exempel
Länkar

Allmänt om Style Sheets
CSS (Cascading Style Sheets) är som en typ av formatmallar som beskriver hur de olika elementen ska presenteras. Du "stajlar" dina dokument, jämför med Word´s formatmallar. Till exempel blir du inte bunden av standard storlekarna på rubrikerna (H1). Du kan ange dina egna önskemål angående storlek och färg m.m.

När du jobbar med formatmallar är det viktigt att du skriver ut alla sluttaggar, även de som ej är obligatoriska - annars kan du få oönskat resultat då vissa element ärver egenskaper från det element de befinner sig i, man talar om boxar i Style Sheets - varje element består av en eller flera boxar (överkurs för de intresserade, se länkar längst ned för fördjupning). I din formatmall anger du vilka element som ska formateras, samt talar om hur.

Du bör vara medveten om att det ibland fortfarande är dålig support hos en del browsers för detta (bl.a Netscape), så ta tillfället i akt att försök kika på resultatet i alla fall med de två största *giganterna*, Microsoft Internet Exlorer (MSIE) samt Netscape. MSIE 3.* och uppåt samt Netscape 4.* och uppåt stödjer Style Sheets. Tyvärr kan det skilja sig i tolkningen av CSS i Netscape Netscape 6.* och tidigare versioner. Netscape 7.* och Mozilla har bättre stöd. Lägg därtill att många saker bara fungerar i MSIE. Det bör du vara medveten om och känna till. Många exempel längst ned på sidan fungerar bara i MSIE.

Ett exempel på hur du skriver:
p { font-family: Times; color: blue }
Det är viktigt att allt skrivs rätt med mellanslag, komma, semikolon, kolon och "måsvingarna" åt rätt håll.

I exemplet ovan ser du att först skriver du det som ska ändras, här p sedan en måsvinge. Attributet (egenskapen), här font-family följs av ett kolon, mellanslag sedan värdet som här är Times. Efter detta kommer ett separerande semikolon och ett mellanslag. Sedan kommer nästa attribut, kolon, mellanslag och värdet. Eftersom inget ytterligare följer blir det inget ytterligare semikolon utan en avslutande måsvinge.

Du kan lista fler element som ska ha lika egenskaper, i detta fall anges att i varje stycke (p) och varje tabellcell (td) ska fonten ha storleken 15pt (punkter),
p,td { font-size: 15pt }

I exemplet nedan kan du se att styckets (p) blå färg *ärvs* av elementet b (fetstil)
<p style="color: blue">blå <b>boldad</b> text</p>
I exemplet under bryts detta via att man *stajlar* även b i annan färg
<p style="color: blue">blå <b style="color: red"> röd boldad</b> text</p>

blå boldad text

blå röd boldad text


Mer om attributen (egenskaperna)
Du har en tabell med exempel på olika attributen (inte alla men de mest användbara) och en del av dess värden, klicka här! En fullständig lista finner du hos http://www.w3.org/ för level 1 CSS1. En lista för level 2 CSS2 hittar du här! Många bra länkar och tips finner du här! Vill du validera din kod? Kika här! Det vanligaste användningsområdet är att formatera text, med formatmallar finns många möjligheter att påverka layouten på sidan, mer än med vanlig HTML - som inte är något "layoutspråk" direkt ;) utan ett enkelt markeringsspråk.

Att ange hur fonterna ska se ut gör du bl.a via font-family, font-style font-weight och font-size. Observera i exemplet nedan att varje nytt attribut separeras med ett semikolon (;) och tänk på att det kan bli oavsiktliga radbrytningar i exempelkoden.

p { font-family: Times, serif; font-size: 12pt; line-height: 20pt; font-weight: bold; font-style: italic }

Istället för att sitta och skriva alla olika font-attribut som i exemplet ovan finns en genväg. Observera 12pt/20pt, font-size före eventuell line-height. Genvägen innebär lite mindre att skriva.
p { font: 12pt/20pt Times, serif bold italic }

När du ska ange font-family kan du ange flera teckensnitts-alternativ separerade med ett komma. Ta med ett alternativ för säkerhets skull på slutet som de flesta har på sin dator. Har typsnittet två ord i namnet utan bindestreck använd citationstecken.
p { font-family: "Courier New", Arial, sans-serif }

Texten i sig kan du formatera bl.a via textegenskaperna text-decoration, word-spacing, letter-spacing, text-align och text-indent. Koden nedan ska ge styckena (p) understruken text, raka marginaler och indrag första raden varje nytt stycke samt ta bort understrykningen på länkar (a).

p { text-decoration: underline; text-align: justify; text-indent: 2cm }
a { text-decoration: none }

Med Style Sheets kan du ge varje element en bakgrundsbild, förgrund- och bakgrundsfärg via bl.a color, background-color, background-image, background-repeat och background-position. Färger anges bl.a via de 16 vanligaste färgerna, se nedan samt hexadecimalt #ff00ff - här utan de sedvanliga komma-tecknen.

black silver  gray lime
maroon red purple  fuchsia
green white olive yellow 
navy blue teal aqua

Koden nedan ger länken grön färg på texten samt boxen som a representerar får en gul bakgrund.
a {color: green; background-color: #ffff00 }

En bakgrundsbild på sidan kodar du in via:
body { background-image: url(bild.gif) }
Observera att sökvägen till filen anges inom paranteserna ( ) samt att du här utelämnar de komma-tecken som du vid det här laget nog är ganska van att omge en url (adress) med. Vill du ge bakgrunden en egenskap som t.ex att den ska enbart visas en gång och inte återupprepas *tijlas* som vanligt skriver du som nedan. Tänk på att det kan bli oavsiktliga radbrytningar i exempelkoden.
body { background-image: url(bild.gif); background-repeat: no-repeat background-color: blue }
Även här finns en genväg om man har flera saker som ska förändra bakgrunden:
body { background: url(bild.gif) no-repeat blue }

Du kan ange elementets marginaler och placering, dess boxegenskaper. Detta görs bl.a via margin-top, margin-right, margin-bottom, margin-left, border-width, border-color och float m.m.

body { margin-top: 5px; margin-right: 10px; margin-bottom: 15px; margin-left: 20px }

Det finns en genväg att skriva ut denna kod ovan. Ordningen är top - right - bottom - left när det gäller marginalerna.
body { margin: 5px 10px 15px 20px }
body { margin: 10px } - alla marginaler 10 pixlar
body { margin: 10px 20px } - parvis top-bottom samt left-right

När det gäller marginaler och text-indent (indrag) kan man använda negativa tal för att få till speciella effekter.
body { margin-right: 15%; margin-left: 15% }
p { text-indent: -20px }

Dela in i klasser
Du kan ha olika stilar på ex. rubrik 1 <h1>. Då delar du in dem i olika klasser. Sedan när du ska använda dem på web-sidan så talar du bara om vilken klass du vill använda av h1.

H1 { font-size: 20pt; color: red }
H1.a { font-size: 15pt; color: blue }
H1.b { font-size: 10pt; color: green}

<h1> Röd 20pt</h1>

<h1 class=a>Blå 15pt</h1>

<h1 class=b>Grön 10pt</h1>

Du kan även skapa en speciell klass du kan tilldela flera element. Du döper klassen med ett namn fast före detta namn sätter du en punkt. Glöm ej denna punkt (.).
.namnet { font-size: 10pt; color: blue }
Sedan formaterar du dina element genom att anropa klassen.

<h1 class=namnet>Rubrik med blå text, 10pt</h1>

<p class=namnet>Stycke med blå text, 10pt</p>

Det finns något som kallas pseudoklasser. En länk (a) kan visas på tre olika sätt enligt html, för att separera dem och ange hur de ska formateras anges ett kolon-tecken (:) efter a samt *läge*.
A:link är detsamma som en "oklickad" länk
A:visited är en länk som du redan klickat på en gång
A:active är en aktiv länk
A:hover - populärt i Explorer, färgar länken när musen förs över den

a:link { color: blue }
a:visited {color: green }
A:hover { color: red }
a:active {color: yellow }

Metod 1 - en extern fil
Man kan skapa en extern "mall" som gäller en eller flera sidor samtidigt, en .css fil. Sedan länkas till denna .css-fil i de dokument den ska gälla. Jättebra om man har flera sidor som man vill "stajla" samtidigt. Så här länkar du till din .css fil om den ligger i samma mapp som ditt dokument. Väljer du att lägga filen någon annanstans i din katalogstruktur se till att du anger korrekt sökväg, se Html och Filnamn/sökvägar.Du "anropar" din .css fil som nedan inom dokuments head-taggar.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>min hemsida</title>
<link rel=stylesheet href="egenmall.css" type="text/css">
</head>

Du skriver filen i en text-editor och sparar den som en .css-fil, här i exemplet egenmall.css. Sedan länkar du till denna mallfil (som exemplet ovan visar) från varje dokument som ska formateras enligt den formatmall som ligger sparad i filen. Den ska se ut som nedan, alltså ingen html-formatering alls.

body { background-color: red }
h1 { font: 30pt "Courier New"; color: green }
h1.a { font: 20pt Arial; color: blue }
p { font: 10pt Arial; color: black}

Metod 2 - inbäddat
Ska du bara göra en formatmall till endast en sida kan du lägga den inom head (i huvudet på ditt dokument). du kodar alltså in din mall i själva dokumentet. Glöm inte att lägga själva style sheets informationen som en dold kommentar, annars kan äldre browsers visa hela koden då den inte förstår och kan tolka Style Sheets.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Min hemsida</title>
<style type="text/css">
<!--
body { background-color: yellow }
p { color: blue }
h1 { font-size: 45pt }
-->
</style>
</head>
<body> Här kommer ditt dokument.
</body>
</html>

Metod 3 - enstaka element
Man kan "stajla" del av dokument. Enklast kanske att börja med det om man är nybörjare. Din "stajling" kodas inom den tagg du vill förändra,
<p style="color: blue">Stycke med blå text</p>
Observera att du i metod 3 har komma-tecken runt attributet/värdet du angett efter style, skulle du behöva citera något inom strängen använd ett enkelt citat-tecken då ('). Glöm ej att ange sluttaggarna! Vill man "stajla" bara en rubrik kan det kanske se ut så här, se exemplet nedan:
<h2 style="font-family: 'Courier New', helvetica; color: blue">

<h2>Detta är en vanlig rubrik</h2>

Detta är en *stajlad* rubrik

Vill du bara ändra ett ord eller några ord, kan du använda <span style="color: red">Några röda ord</span>
Några röda ord jag formaterat som ovan.

Span används till att formatera text i element, du kan alltså omge ett eller flera stycken element som ovan, glöm ej sluttaggen. Men är det mer än text du vill förändra samt att det också ska sträcka sig över flera element kan du använda div.

<div style="font-size: 8pt; color: blue; line-height: 10pt">
<p> Se exemplet nedan.
<ul>
<li>listpunkt 1</li>
<li>listpunkt 2</li>
</ul>
<p> nytt stycke inom div
</div>

Texten i stycket blir blå och 8 pt.
Radhöjden satt till 10 pt.

Detta stycke blir likadant som stycket ovanför listan,
även denna rad.

Blanda metoder
Du kan blanda de olika metoderna, det som är angivet närmast elementet i html-dokumentet överskrider. Har du en mall i en .css fil är du inte bunden vid den jämnt och ständigt, du kan även om du har sökvägen till en mall som du anropar överskrida den lokalt i dokumentet både med metod 2 och 3. Se mer om detta under Exempel nedan.

Exempel på"stajling"
När du kikar på exemplen nedan så kommer inte allt att funka, beroende på vad du har för browser. Vill påpeka igen att stödet är ibland dåligt för Style Sheets, så när du gör din hemsida kontrollera den i både Netscape och MSIE eller gör två varianter av hemsidan. Du kan sedan omdirigera besökaren beoende på vilken browser han har, ett bra javascript hittar du under avsnittet Active X. Detta har bara varit en kort introduktion inom ämnet och egentligen skulle en hel separat guide kunna skrivas om detta, men följ gärna länkarna längre ned samt kika på exemplen här under.

Länkar
Här nedan listar jag några användbara länkar.

© Annica Tiger a_t@tele2.se

Besök gärna min blog

Mina andra sidor ser ni nedan.

www.tiger.se, www.atiger.se, www.tiger.pp.se, www.atiger.pp.se, www.atiger.nu och www.nodaddy.se.


STARTSIDAN - ANSLAGSTAVLA - ACTIVE X - ABC-KOM IGÅNG - CGI - DIVERSE - FAQ - FORMULÄR - FRAMES - GRAFIK - DHTML - HTML4 - HTML - JAVA - JAVASCRIPT - LISTOR - LÄNKAR - SITEMAP - SÖK - TABELLER - TEXT - ANNICA TIGER - TIGER-LÄNKAR - TIPS - STYLE SHEETS - CSS - WAP - WEB-DESIGN - XHTML - XML