HTML med CSS

Å definere og sette opp et CSS stilark er ikke så vanskelig når man først forstår hensikt og virkemåte. Bruk gjerne eksempler fra andre nettsider!

En CSS-fil inneholder ikke fullverdig HTML-kode, kun tekstkoder for tags lik den du ser nedenfor i eksemplet. Formatet er ASCII og derfor kan du skrive og/eller endre innholdet med f.eks. Windows Notisblokk. Viktig å huske er at du alltid må lagre med .css endelse for å definere det som et stilark.

Men for å sikre deg at det blir riktig i startfasen, kan du skaffe en CSS-editor. Det finnes flere av dem på nettet. For å definere det mest grunnleggende kan du også bruke apasjes online CSS Generator.

I første omgang definerer vi den gamle <p> taggen (som indikerer et avsnitt), overskrift-taggene <h1>, <h2> og <h3>, selve hoveddokumentet som finnes i <body>, samt noe som kalles en "class", som skal brukes i linken vår (Er i avsnittet .litentekst) Mer om hva dette betyr lenger ned på siden:

Nedenfor ser du innholdet i en enkel CSS eksempelfil (kalt: test.css) som vil bli brukt til å demonstrere hvordan det hele fungerer:

p {
font-size: 1.0em;
font-family: arial, garamond, "times new roman";
}

h1 {
font-weight: bold;
font-size: x-large;
font-family: verdana, arial;
}

h2 {
font-weight: normal;
font-size: large;
font-family: verdana, arial;
}

h3 {
font-weight: bold;
font-size: medium;
font-family: arial, geramond;
}

body {
font-size: medium;
background: #ffffd7; color: #000000;
font-family: arial, garamond, "times new roman";
}

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

Vi repeterer litt: Skal du lage en CSS fil i en tekstbehandler må det være uten tekstformatering, og den lagres med et navn og med endelse .css

» Slik så vårt html dokument ut i nettleseren uten CSS!
» Slik blir det samme dokumentet i nettleseren med CSS filen koblet til!
» Slik ser kildekoden ut i HTML dokumentet med CSS koblet til!

Konklusjon og forklaring

Kanskje ikke de helt store forandringer med og uten CSS i eksemplet ovenfor, men det er jo fordi det ikke er definert så mange stiler. Vi konstaterer at bakgrunnsfarge, overskriftene og det siste avsnittet med liten tekst er forandret med CSS.

Bokstaver/ord i CSS-filen påvirker tags med samme navn i HTML-filen. Det som står mellom klammene er temmelig selvforklarende. For eksempel betyr:

p {
font-size: 1.0em;
font-family: arial, garamond, "times new roman";
}

at all tekst som omgis av <p> og </p> vil ha skrift av middels stor størrelse
(font-size : medium;), og at skriften vises med fonten Arial som førstevalg. Er ikke Arial installert på brukerens maskin er andrevalg Geramond, etterfulgt av standarden "Times New Roman", her satt mellom gåseøyer fordi navnet består av flere ord.

Taggene for overskrift er forandret, dvs <h1> og <h2>. Her er fonten Verdana førstevalg, og fordi den defineres i CSS-filen, slipper man å tenke på å bruke <font> -taggen og dens attributter hver gang en overskrift er nødvendig i HTML-filen.

I body-taggen er en beige farge valgt ved å sette background: #FFFFD7; Bakgrunnsfargen på alle sidene dine endres ved å forandre på bare denne ene verdien.

Det som virkelig gjør CSS spesielt er muligheten til å forandre HTML-tags av hjertens lyst.

For å få HTML siden til å vise det som defineres i stilarket, legger man til et klasseattributt! CLASS henter frem det definerte, og et eksempel er: <p class="litentekst">

Klasser brukes sammen med attributtet CLASS i HTML. CLASS kan legges inn i mange ulike tags, og vil forandre egenskapen deres. Nedenfor er en definisjon av en klasse:

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

For eksempel vil denne klassen egne seg godt til å forandre all tekst i et avsnitt.

Nedenfor ser du hvordan du bruker CLASS på denne måten når det skal innlemmes i ditt HTML dokument. Merk at mens du må ha et punktum foran klasse-definisjonen i CSS-filen, skal du droppe punktumet når du henviser til klassen i en HTML-tag. Slik forandres et avsnitt i et HTML dokument:

<p class="litentekst">
Et style sheet er kort fortalt en fil som bestemmer utseendet på en HTML-fil.
Style sheet-filer slutter på .CSS (forkortelse for "Cascading Style Sheets").
</P>

Skulle du ha hatt stor fet tekst, ville det sett slik ut:

.minstoretekst {
font-size : xx-large;
font-family : Verdana, Arial;
font-style : bold;
font-weight : normal;
}

Og med klassen definert i HTML dokumentet som:

<p class="minstoretekst">
tekst her.........
</P>

Når du skriver CSS velger du selv navn til attributter og tags, men det er kanskje anbefalt å bruke klassenavn som gir forståelse av hva klassen gjør emd et objektivt navn!

For eksempel vil et klassenavn som class"highlight" være bedre enn class"red-font" siden du kanskje vil endre den røde fargen til gul i ettertid. Grunnen til at eksempler settes med engelske verdier er at html ikke støtter særnorske tegn som æ, ø og å, så bruker du norske navn må du huske å utelate disse.

Neste side: Flere eksempler på CSS

SØK ressurser

HJELP til Hjemmesiden

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