CSS - farger og fonter

Farger, fonter (bokstavtype) og fontstørrelse (bokstavstørrelse) er eksempler på attributter på html-elementene. 

Her er eksempel på å gi en farget bakgrunn bak teksten, lagt inn som CSS:

I stedet for å ha en farget bakgrunn bak teksten kan du også velge å ha en ramme rundt. Det angis som border. Skal du ha en ramme rundt som er 2 piksler tykk og fargen rød vil den angis som

border:2px solid red

Bredden kan også angis til noen faste størrelser ved hjelp av border-width - som kan ha verdiene thin, medium eller thick. Du kan velge om du skal ha alle sider eller bare noen, f.eks. velge kun border-left - som gir kant på venstre side.

I tillegg til tykkelse og farge kan Border-style f.eks. ha følgende typer verdier:

  • dotted - stiplet (prikker)
  • dashed - stiplet (linje)
  • solid - heltrukket linje
  • double - doble linjer
  • none - ingen linje
  • border-radius - kan lage avrundede hjørner (jo høyere tall jo mer avrundet. En vanlig ramme er 2px, og avrundet ligger mellom 5 og 12 px)

Det finnes også noen som angir 3D-effekter o.l. Bruk denne lenka for å teste hvordan disse ser ut på nettsiden.

Skal du ha farget tekst angis det som color, f.eks. hvis vi ønsket å ha overskriften i bildet over som hvit tekst på blå bakgrunn ville vi skrevet:

De mest brukte attributter som angår bakgrunnseffekter for html-elementene er:

  • background-color - bakgrunnsfarge
  • background-image - bakgrunnsbilde, enten ved å laste bilde opp på nettside og lenke til det eller ved å angi en URL for bilder på andre nettsider
  • background-repeat - at bakgrunn skal gjentas eller ikke for å fylle ut siden
  • background-attachment - om bakgrunnen skal stå fast eller scrolle med resten av siden
  • background-position - plasserer bakgrunnen på siden (posisjon)

Når det gjelder background-image kan man også velge at det skal være mer transparent. Først og fremst gjøres det ved å sette opacity-attributt på, og hvor verdien kan være fra 0.0 til 1.0 - og hvor 1.0 er standard. For eldre nettlesere (IE8 eller tidligere) må man angi filter for å gjøre bildet transparent: alpha(opacity=x) - og hvor x kan ha en verdi mellom 1 og 100, og jo lavere verdi, jo mer transparent blir bildet. Koden alt="Forest" angir at dersom bildet ikke kan vises, f.eks. ved bruk av leselist for blinde så skal bildet beskrives som Forest (Skog). Dette er i tråd med universell utforming.