Hva er CSS:

CSS står for Cascading Style Sheets. På norsk blir dette stilsett. CSS er veldig omfattende, så det du finner her, er bare det grunnleggende. Skal du sette deg grundig inn i CSS, anbefalles linkene i bunnen på denne siden.

CSS drar layouten ut av HTML og inn i en separat fil eller som et STYLE-element i selve HTML-dokumentet. Helt enkelt er CSS regler for hvordan en eller flere sider skal se ut. CSS-standarden ble utviklet av World Wide Web Consortium for å gjøre HTML-dokumentet til en fil som bare skal beskrive informasjon og struktur. På denne måten blir det tilgjengelig på flere plattformer og flere medier. Etter at ulike produsenter har utfylt HTML med sine egne tillegg i HTML-standarden for å påvirke layout, prøver man nå å gjøre CSS til en felles standard for nettopp presentasjonen av innholdet. Du skal nemlig ikke være avhengig av en spesiell nettleser for å se grafikken i HTML-dokumentet.

Fordeler:

Med stilsett kan du definere ting som skrifttype, skriftstørrelse, skriftfarge, bakgrunnsfarger, bakgrunns-bilder, mellomrom mellom linjer og bokstaver, innrykk, marger og plassering av elementer, bare for å nevne noen få muligheter.

Definering av stilsett:

En stilsett regel består av tre deler: selektor, egenskap og egenskapens verdi:

selektor { egenskap: verdi }

Eksempel:

p { color: #0000FF }

Selve deklarasjonen skrives mellom de to bølge-parantesene { og }. Deklarasjonen består av en egenskap for et bestemt HTML-element. Etter egenskapen kommer kolon (:), etterfulgt av et mellomrom. En selektor kan ha mange egenskaper (for eksempel størrelse og farge). Hver egenskap separeres med semikolon (;), inne i den samme deklarasjonen. Hvilke verdier man kan deklarere for en egenskap avhenger av hva slags HTML-element det er snakk om.

Eksempel:

Her deklareres verdien blå for egenskapen farge, for elementet <h1>. Verdien 16pt størrelse for egenskapen tekst for elementet <p>. Verdien rød for egenskapen farge for samme element(<p>).

h1 { color: blue }
p { font-size: 16pt;
color: red;
}

Farger i CSS:

Når det gjelder det å angi farger i CSS, står du en del friere enn i HTML. Ikke bare kan du bruke hexadesimale fargekoder, men du kan også angi fargen som RGB-farge (Red, Green, Blue) eller som en direkte angivelse i form av fargenavn.

• Hexadesimale farger angis slik: color: #0000FF
• RGB-farger angis slik: color: rgb(0, 0, 255)
• "Direkte" farger angis slik: color: blue

Det finnes 143 farger du kan angi direkte med navn, og som støttes i de nyeste webleserne. Men det er bare 16 farger som er standardfarger i CSS i henhold til W3C. Disse er: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white og yellow. Øvrige farger må angis som RGB- eller hexadesimale farger.

Klasser og ID`er:

Med CLASS-selektorer kan man i praksis dele ett HTML-element opp i flere elementer med ulik stil. Da lager man en ekstra utgave av et HTML-element i stilsett-deklarasjonen. Denne selektoren kan man gi et navn man selv velger. Deklarasjonen ser da slik ut:

p.viktig { color: red }

Og denne deklarasjonen brukes slik:

<p class="viktig">viktig</p>

Det er også mulig å deklarere samme stil for alle elementer med samme CLASS, slik:

.viktig { color: red }

ID brukes på samme måten som CLASS. Mens CLASS brukes for mange elementer, brukes hvert ID for ett HTML-element. Denne kan deklareres slik:

p#123 { color: red }

Og denne deklarasjonen brukes på denne måten:

<p id="123">viktig</p>

Pseudo-klassene er forhåndsdefinert i CSS. De aller viktigste av disse har med link-egenskaper å gjøre. Man kan definere fargene på linkene gjennom css, avhengig om de er besøkt, aktive eller ubesøkt. I tillegg har du en annen slik klasse, nemlig "hover". Denne angir fargen på linken når markøren beveger seg over den. Denne klassen fungerer dessverre ikke i alle nettlesere. Særlig Netscape kan overse denne.

a:link { color: black }
a:visited { color: purple }
a:active { color: blue }
a:hover { color: red }

Knytte CSS til HTML:

Stilsettene kan koples til HTML-dokumentet på to måter: I en ekstern css-fil eller som et <style>-element i <head>. En ekstern css-fil lages i en enkel tekstbehandler som f.eks. Notepad, og lagres med filendelsen *.css, for eksempel stil.css. Uansett hvilken løsning du velger, så skrives stilsettene på samme måte. Av rent vedlikeholdsmessige hensyn er kanskje en ekstern css-fil å foretrekke.

Ved å knytte en ekstern css-fil til dokumentet ditt må følgende informasjon på plass i head-elementet:

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

Velger man den andre løsningen, med et style-element i HTML-dokumentet, vil man derimot måtte gjøre følgende:

<style type="text/css">
<!--
Her setter du inn stilsettet ditt
-->
</style>

Eksempel på et komplett stilsett:

body {
background-color : #666666;
background-image: url(bg.gif);
color : #000000;
font-family : Verdana, Arial, Helvetica;
font-size : 10pt;
font-style : normal;
}
b {
color : #000000;
font-family : Verdana, Arial, Helvetica;
font-size : 10pt;
font-style : normal;
}
p {
color : #000000;
font-family : Verdana, Arial, Helvetica;
font-size : 10pt;
font-style : normal;
}
.blue {
color : #000066;
font-family : Verdana, Arial, Helvetica;
font-size : 10pt;
font-style : normal;
}
.orange {
color : #FF6600;
font-family : Verdana, Arial, Helvetica;
font-size : 10pt;
font-style : normal;
}
.red {
color : #CC0000;
font-family : Verdana, Arial, Helvetica;
font-size : 10pt;
font-style : normal;
}
.ramme {
border: 1px solid #222;
padding: 5px;
background-color: ivory;
color : darkred;
font-size : 10pt;
font-style : normal;
}
hr {
color : #000000;
}
h1 {
color : #000000;
font-family : Verdana, Arial, Helvetica;
font-size : 10pt;
font-weight : bold;
}
h2 {
color : #000000;
font-family : Verdana, Arial, Helvetica;
font-size : 10pt;
font-weight : bold;
}
li {
color : #000000;
font-family : Verdana, Arial, Helvetica;
font-size : 10pt;
font-style : normal;
}
ul {
color : #000000;
font-family : Verdana, Arial, Helvetica;
font-size : 10pt;
font-style : normal;
}
ol {
color : #000000;
font-family : Verdana, Arial, Helvetica;
font-size : 10pt;
font-style : normal;
}
a:link {
color : #336600;
text-decoration : none;
}
a:hover {
color : #CC3333;
text-decoration : none;
}
a {
color : #336600;
text-decoration : none;
}
td {
color : #000000;
font-family : Verdana, Arial, Helvetica;
font-size : 10pt;
font-style : normal;
}

Relaterte linker:

• Selve CSS-bibelen ligger her
• W3School. CSS fra starten av
• W3School. Nyttig liste

[ Sjekk HTML ]