CSS

Cascading Style Sheets (CSS, gjennomgående stilark) er et språk som brukes til å definere utseende på filer skrevet i HTML eller XML. Prinsippet er at HTML- eller XML-dokumentet utelukkende skal beskrive struktur ogsemantikk, mens oppsett, farger og annen stilinformasjon skal beskrives ved hjelp av CSS. Stilinformasjonen kan integreres i selve dokumentet eller skilles ut som en egen fil med endelsen .css. Et ubegrenset antall dokumenter kan peke til og styres av samme .css-fil, noe som er styrken i CSS: Ved å endre på en fil, kan man endre fargebruk, bakgrunnsbilder osv. i alle dokumenter som peker til CSS-filen. (Fra Wikipediaartikkel om CSS)

Når man skal endre mye på utseendet til en HTML-side er CSS et fantastisk verktøy. Man kan endre på utseende til innholdet direkte i HTML-fila ved å bruke attributter, men HTML-dokumentet blir fort komplisert og uoversiktelig når man koder utseendet her. Ved å skille ut alt som har med utseende og design i et eget CSS-dokument kan man på en ryddig måte få HTML-siden til å se ut slik man selv vil.

 

Stilarket

Når man lager et eksternt CSS-dokument, eller stilark som det også kalles, gjøres dette ved å lenke til stilarket fra HTML-dokumentet. Se bildet under.

Skjermbilde 2013-09-09 kl. 11.06.12

Koden for å knytte CSS-filen til HTML-filen legges i head-taggen

For at stilarket skal vite hvor de ulike stilene skal gjelde kan man gi enkeltelementer en egen id, slik at man enkelt kan nå disse fra stilarket. I bildet under har en div fått "minBoks" som id.

En div med id-attributt som for å knytte den til CSS-fila.

En div med id-attributt som for å knytte den til CSS-fila.

Man kan ganske enkelt får en div til å se ut på mange forskjellige måter ved hjelp av CSS. I bildet under ser du hvordan man endrer utseendet til divén med id "minBoks" ved hjelp av CSS-koder.

Her er utseende til nettsiden bestemt av kodene i stilarket

Her er utseende til nettsiden bestemt av kodene i stilarket

 

Prøv selv!
Her kan du endre på CSS-kodene selv. JS Bin

Det finnes en mengde CSS-kommandoer, og det anbefales å slå opp for å finnes informasjon om det man ønsker. Et fint sted kan være referanselisten til W3Schools