Eksempler på CSS
Det er lurt å se hvordan andre gjør ting, men det er ingenting i veien for at du koder dine tags på din egen måte, slik at du forstår din egen kode og kan gå inn i CSS filen og redigere hurtig.
Vi vil at lenker som muspekeren er over skal ha en lyseblå farge og skifte til rødt (Defineres med a-taggene), og at bakgrunnen skal ha en annen farge (i body).
Vi legger til link elementene i CSS filen med følgende kode:
a {
font-weight: bold; color: blue;
text-decoration: none
}
a:visited {
font-weight: bold; color: #0099ff;
text-decoration: none
}
a:active {
font-weight: bold;
color: #0099ff;
text-decoration: none
}
a:hover {
font-weight: bold;
color: red
}
» Se hvordan hele CSS koden da blir!
Utseendet til <a> taggene avhenger av om du har besøkt den eller ei, om den er aktiv og om muspekeren ligger over den. Derfor trengs det fire ulike definisjoner.
Dette betyr at alle lenker er uthevet med fet skrift (bold), at de har blå farge før du klikker på dem og - ikke minst - at de ikke er understreket. Det er det text-decoration som bestemmer.
» Se hvordan den ferdige HTML filen blir med full CSS kode!
Konklusjon og forklaring
Det ble jo litt forandring, der målet var og vise litt grunnleggende CSS. Tenk deg hva som ellers kan gjøres med CSS på det beste. Du kan tilrettelegge hele komplette websider layout-messig, ved å styre bilde plasseringer, tekst utforming, menyer, osv. Tabeller til utforming skal være unødvendig.
Det er mulig å drive klassedefinisjoner langt i CSS, men vi går ikke nærmere inn på det her. Fra eksempel-siden vil du finne pekere til sider som tar for seg CSS i detalj.
Neste side: Sammendrag av CSS kurs
SØK ressurser
HJELP til Hjemmesiden
Nyttige ressurser til ditt Hjemmesideprosjekt, alltid tilgjengelig. Klikk for å vise tilgjengelige ressurser.