Kortkurs i HTML, som bakgrunn for JavaScript i IT2

 

 

 

CSS

Cascading Style Sheets (CSS, gjennomgående stilark) er et språk som brukes til å definere utseende på filer skrevet i HTML. Prinsippet er at HTML-dokumentet utelukkende skal beskrive struktur og semantikk, 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. !split

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.

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

1
2
3
4
5
<head>
    <meta charset="UTF-8">
    <link> rel="stylesheet" type="text/css" href="stilark.css">
    <title>Diveksempel</title>
</head>

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 attributt. Skall man sette samme stil på mange elementer kan man bruke class attributten.

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

1
2
3
4
<div id="minBoks">
    <h1 class="divheading">Jeg ligger i en div!</h1>
    <h1 class="divheading">Jeg ligger og i en div!!</h1>
</div>

Man kan ganske enkelt få en div til å se ut på mange forskjellige måter ved hjelp av CSS. I koden under ser du hvordan man endrer utseendet til diven med id "minBoks" og class "divheading" ved hjelp av CSS-koder.

Her er utseende til nettsiden bestemt av kodene i stilarket stilark.css.

Merk den noe forskjellige syntaksen på class, som bruker . mellom element navnet og klasse navnet, og id som bruker #. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
#minDiv{
 text-align: center;
	width: 200px;
	height: 150px;
	background-color: #aa5555;
	border-color: brown;
	border-width: 6px;
	border-style: solid;
	border-radius: 0px 40px;
	box-shadow: 10px 10px 5px #888888;
}

h1.divheading {
  color: Green;
}

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