Sammendrag av CSS kurs

Den beste måten å lære CSS på, eller andre ting, er gjennom praksis. Last gjerne ned CSS eksempel filen og eksprimenter litt med kodene, så kommer det av seg selv etter hvert.

» Ferdig CSS eksempel fil, test.css (Høyreklikk, og velg lagre mål som..)

Vi repeterer litt..

Vi har gjennom CSS seksjonssidene forandret tekst og stil med Cascading Style Sheet, filer som har en .css endelse, og som linkes til HTML dokumentet. Når man bruker css på denne måten, kalles det eksternt stylesheet. Slik linkes det til CSS filen fra HTML filen:

Det er mulig å droppe den eksterne CSS-fila og legge kommandoene direkte i en alminnelig HTML-fil. Da omgir du kommandoene med <STYLE> taggen. Dette gjøres i begynnelsen på dokumentet, mellom HEAD taggene. Slik:

Denne stilsettingen kalles embedded stylesheet. Ideen om å skille form og innhold er der fremdeles, men du mister den største fordelen med stylesheets, nemlig at du kan forandre mange hjemmesider med noen få tastetrykk i et eneste enkelt dokument.

En annen direkte stilsetting kan også benyttes, som et attributt direkte på selve elementet! F.eks. om du vil ha en unik stil bare i et enkelt avsnitt, kan du legge attributtet STYLE til direkte i elementet P, slik:

Dette er den tredje måten å benytte css på, kalt Inline CSS. I dette tilfellet fargesetter du et tekstavsnitt med grønn skrift, i forhold til hva øvrige interne og eksterne css er definert som. Du kan ha et eksternt stilsett som har satt P taggen til blå, men bruker du dette i HTML dokumentet overskrives det eksterne stilsettet.

Andre ting verdt å merke seg er at om du ønsker å sette kommentarer eller en huskelapp inne i en css fil, er det litt annerledes en i et HTML dokument.

Dette gjøres ved implenteringen backslash etterfulgt av stjerne, selve huskelappen, og avsluttes med stjerne backslash:

/* Usynlig huskelapp mellom her. Se også eksempel under: */

p {
font-size: 1.0em; /* Kommentar for å huske ting */
font-family: arial, garamond, "times new roman"; /* Bruk gåseøyne ved fonter som innehiolder flere ord i navnet */
}

h1 {
font-weight: bold;
font-size: x-large;
font-family: verdana, arial; /* Oppgi alltid flere font alternativer, adskill med komma og mellomrom */
}

body {
font-size: medium;
background: #ffffd7; color: black; /* Engelsk navn på farge kan brukes, og hex navn, med # foran */
font-family: arial, garamond, "times new roman";
}

.litentekst {
font-weight: normal;
font-size: xx-small;
font-style: italic;
font-family: verdana, arial;
}

Konklusjon og forklaring

Som du skjønner finnes det ubehagelig mange måter å definere tekst, innhold og stiler på med CSS. Noe veldig mye lenger i å forklare CSS skal vi heller ikke gjøre, det finnes massevis av sider på web som tar for seg den biten likevel.

Nyttige og lærerike linker innen CSS finner du under:

w3schools.com - Et av verdens beste nettportaler hvor du kan "utdanne" deg i all form for HTML, også CSS. Bare på engelsk, men driftes faktisk av nordmenn.
w3.org - W3C (World Wide Web Consortium) er den viktige organisasjonen som utvikler spesifikasjoner, veiledninger og standarder for hele internett.
htmlhelp.com/ - WDG er en gruppe med web utviklings eksperter som gir tips, veiledning, og fremmer bruk av standardisert html koding.
csszengarden.com En kjent prosjektside innen css, som viser hva css virkelig kan gjøre med web design (Norsk utgave)
alistapart.com - Nettsted for webdesignere, med fokus på standard-basert design. På denne siden får du hjelp til å overvinne frykten for CSS
lonniebest.com/FormatCSS/ - Et online verktøy for å reorganisere CSS kode hvis koden f.eks. er uoversiktlig.
norskwebforum.no - Diskusjonsforum for webutvikling med mange registrerte brukere, med bla tema med CSS.
westciv.com - Har gode CSS-tips og går gjennom CSS fra A til Z
9am.dk - Dansk kvalitetsside generelt om HTML, XHTML, XML, CSS, ASP og JavaScripts. Meget Grunnleggende. Linken fører deg rett til CSS veiledning.

Neste side: Repeter hele kurset

SØK ressurser

HJELP til Hjemmesiden

Nyttige ressurser til ditt Hjemmesideprosjekt, alltid tilgjengelig. Klikk for å vise tilgjengelige ressurser.