CSS

CSS (Cascading StyleSheets) er ikke en obligatorisk del av faget Multimediejournalistikk. Denne informasjonen er likevel tatt med for at dere skal skjønne hva teknologien går ut på, og at dere eventuelt kan benytte dette i liten skala. På sikt er dette, sammen med HTML, noe det er svært nyttig å sette seg litt inn i.

CSS (Cascading Style Sheets) brukes til å styre hvordan HTML koder blir vist i en webleser. Nordmannen Håkon Wium Lie var svært sentral da CSS ble introdusert i 1994.

Mens HTML brukes til å definere hva slags elementer som ligger på en webside, men skal ikke brukes til å definere utseende og layout. I stedet benytter en CSS. Stilsett er imidlertid ikke støttet likt i alle weblesere. Eldre programmer sliter med å vise CSS korrekt, men moderne weblesere som Chrome, Firefox, Safari og Opera håndterer dette godt. Nyere versjoner av Internet Explorer kommer etter hvert etter.

Denne teknologien er svært velfungerende. Nettstedet http://www.csszengarden.com/ begynner å bli ganske gammelt, men gir en effektfull demontrasjon på hvordan CSS fungerer. Her er den samme HTML-koden stilsatt med ulike stilsett.

Nedenfor er dette synliggjort i form av to eksempler:

Et eksempel

Et annet eksempel

Videoen viser de underliggende HTML-elementene, slik at vi tydelig ser at de er forskjellig stilsatt på de to websidene:

Stilsett kan brukes på tre måter. Siden dette ikke er en sentral del av faget vil vi kun kikke litt på metode 3:

De kan skrives som en separat tekst, som linkes til en webside for å styre utseende.
1. <link REL="stylesheet" TYPE="text/css" MEDIA="screen" href="http://infodesign.no/drstil_2005.css" type="text/css">
Den samme informasjonen kan også skrives i toppen av HTML-koden på en webside. Her er det angitt at linker <a> som befinner seg inne i en overskrift av nivå 2 <h2> ikke skal ha understreking:

1. <style type="text/css">
2. h2 a {text-decoration: none;}
3. </style>
4. Dette vil gjelde for alle linker inne i en <h2>

Det er også mulig å skrive inn CSS-koder som et attributt til en HTML-kode. Her er de samme opplysingene som i pkt 2, men skrevet på en annen måte:

1. <h2><a href=”http://hib.no” style=”text-decoration: none;”>HiB</a></h2>
2. Dette vil kun gjelde for denne ene linken.

Det bør nevnes at metode nummer 1 er svært nyttig. Media-attributtet kan nemlig brukes til å angi alternative stilsett for ulike bruksområder:

- SCREEN
- Visning på skjerm
- PRINT
- Utskrift på papir eller andre ugjennomsiktige materialer.
- PROJECTION
- Utskrift for overhead. (Inndelt i sider, ikke sammenhengende rull.)
- BRAILLE
- For leselist som viser siden i blindeskrift.
- AURAL
- For tekst-til-tale-systemer.
- ALL
- Dette er standardverdien, og angir at stilsettet gjelder alle medier.

Dere kan kikke på HTML 5 - en introduksjon fra Kamikaze Media AS. Dette er mest for å orientere dere, slik at dere kan kjenne igjen noe av dette i andre sammenhenger:

Vi skal her se på noen konkrete bruksområder som viser litt av det en kan gjøre. Igjen: dette er ikke definert som pensum, men til mulig inspirasjon. Hvorvidt publiseringsløsningen du benytter støtter slik bruk av kode i løpende tekst vil variere:

Lage en sort heltrukken ramme rundt et avsnitt:

<p style="border:1px solid black;">Avsnitt med tekst bilder mm... </p>

Avsnitt med tekst bilder mm...

Samme som over, men nå med tykkere, stiplet linje og avstand mellom ramme og tekst:

<p style="border:2px dotted black; padding:10px;">Avsnitt med tekst bilder mm... </p>

Avsnitt med tekst bilder mm...

Fjerne understreking på en peker og gi den en bestemt farge (finn verdier med http://www.color-hex.com/color-wheel/) :

<a href="http://fag.webdokumentar.no" style="text-decoration:none; color:#df2a26;">Kjekt fag :)</a>

Kjekt fag :)

Lage en enkel ramme rundt et bilde: