Stilsett og klasser

CSS syntaksen består av tre deler: en selektor, en egenskap(property) og en verdi:

Selektoren kan være en html-tag

body {color: black}

p{
  text-align: center;
  color: black;
  font-family: arial
}

h1,h2,h3,h4,h5,h6 
{
  color: green
}

Selektoren kan være klassifikasjon eller "class selector"

Man kan definere to typer klassifikasjoner i Style Sheet.

1. Klassifikasjon knyttet til en selektor/HTML-element
2. Klassifikasjon som selektor uten HTML-elemet

p.right {text-align: right}
p.center {text-align: center

For å bruke disse må man benytte class attributtet i HTML dokumentet

<p class="right">
  Denne paragrafen er høyrejustert.
</p>

<p class="center">
  Denne paragrafen er sentrert. 
</p>

Man kan også benytte flere enn en klassifikasjon

<p class="center bold">
  Denne paragrafen er sentrert og fet. Den benytter to
  stilklassifikasjoner. 
</p>

test9.html

Hvis man unngår tag-navnet og bruker klassifikasjonen som eneste selektor, får man en generell klassifikasjon som kan brukes av alle HTML-elementer.

.center {text-align: center}

I koden nedenfor bruker både h1- og p-elementet klassifikasjonen ".center". Det betyr at begge vil følge reglene definert i ".center" selektoren.

<h1 class="center">
  Denne tittelen vil være sentrert.
</h1>

<p class="center">
   Denne paragrafen vil også være sentrert.  
</p> 

Start IKKE et klassifikasjonsnavn med et tall. Det fungerer ikke i alle browsere.

test10.html

Hvordan kan man huske alle properties/egenskaper med tilhørende verdier?

• ved å bruke dem
• ved å slå opp i en referanseoversikt, http://www.w3schools.com/css/css_reference.asp

Bruk av id Selector

Man kan også definere stiler for HTML elementer med id selector. Den fungerer helt likt som class, men id er prinsipielt beregnet til å identifisere et bestemt element. Derfor bør hver id-klassifikasjon kun benyttes en gang i et dokument, mens en class-klassifikasjon kan brukes mange ganger.

id selektoren er definert som #.

Følgende stilregel vil endre fargen til elementet som har et id attributt med verdi "green"

#green {color: green}

Følgende stilregel vil endre verdiene for en pargraf med et id attributt med verdi "para1"

p#para1
{
  text-align: center;
  color: red
}

test11.html

Start IKKE et id-navn med et tall. Det fungerer ikke i alle browsere.

CSS kommentarer

Kommentarer i css starter med "/*", og slutter med "*/"

/* Dette er en kommentar */
p
{
  text-align: center;
  /* Dette er en ny kommentar */
  color: black;
  font-family: arial
}

<div> og <span>

Hvis du har bruk for nøytrale container koder kan man bruke <div> og <span>

<div> brukes til selvstendige avsnitt og genererer et linjeskift

<span> brukes f.eks. når det dreier seg om en tekststreng som er en del av en større tekst.

H<span style="vertical-align:sub">2</span>O

<p>Man kan bruke <span style="background-color: rgb(250,0,255)> span</span>
  inne i en paragraf for å markere</p>

test12.html, test13.html

<div style="text-transform:uppercase">Januar, Februar </div>

<div style="letter-spacing: 20px">

test14.html

Plassering av elementer

Stilsett brukes ofte til å plassere elemenet på en side.

Eks den gule boksen

.gulboks{
  position: absolute;
  color: maroon;
  background-color: yellow;
  top: 20px;
  left: 40px;
  z-index: 0;
  width: 300px;
  height: 150px;
  padding: 30px;
  font-size: 20px;
}

test15.html

Flere bokser

.sortboks{
    position: absolute;
    color: white;
    background-color: black;
    top: 110px;
    left: 150px;
    z-index: 3;
    width: 250px;
    height: 65px;
    padding: 10px;
    text-align: center;
    font-size: 20px;
  }

 .oransjeboks{
    position: absolute;
    color: black;
    background-color: orange;
    top: 160px;
    left: 310px;
    z-index: 6;
    width: 130px;
    height: 40px;
    padding: 5px;
  }

test16.html

Nå kan vi nok til å lage en hjemmeside med Style Sheet

test17.html, test17.css