CSS står for Cascading Style Sheets og er det språket vi bruker for å style websider.
CSS skrives litt annerledes enn html. Du starter med å si hva du skal style altså hvilket element, derreter skriver du regler for elementet mellom open bracket { og closeing bracket }
p
{
color: red;
font-size: 22px;
}
Her har vi elementet p som står for paragraph. Reglene for p altså alle avsnittene har nå rød tektsfarge og har en tekststørrelse på 22 piksler.
NB! Husk å slutt alle reglene med ;
Vi begynner med å sette bakgrunnsfargen på hjemmesiden vår. Det er da vanlig og bruke elementet body for å utføre dette. Vi bruker da background og skriver deretter fargen vi ønsker.
body
{
background: lightblue;
}
Nå skal vi sette tekststørrelsen og teksttypen på alle elementer. Dette gjør vi ved å velge elementet html slik at all skrift på websiden vår vil ha samme teksttype.
Vi bruker font-family for å bestemme teksttypen og vi setter den til Arial (som er en teksttype). Vi bruker også font-size til å sette tekststørrelsen til 18 piksler.
html
{
font-family: Arial;
font-size: 18px;
}
a står for anchor og er praktisk talt en link. Vi skal endre utseende til alle linkene på siden vår. Vi begynner med å sette tekstfargen til rød da bruker vi color og setter den til rød. Deretter fjerner vi standard utseende til linken ved å sette text-decoration til none.
a:hover gir en regel for hva som skal skje med linken når vi peker på linken. Vi legger til en text-decoration som gjør slik at linkene får en understrek når vi peker på dem.
a
{
color: red;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
Nå skal vi endre på overskriftene våre. vi setter font-size til alle h1 taggene til 40 piksler. Deretter gjør vi alle h2 taggene blå ved å skrive color: blue; og vi gjør alle h3 taggene grønne ved å skrive color: green;
h1
{
font-size: 40px;
}
h2
{
color: blue;
}
h3
{
color: green;
}
Nå vil vi ha en border rundt alle bildene våre. For å få til dette bruker vi border bak kolon skriver vi først tykkelsen deretter om den skal være solid (hel) eller striplede og til slutt hvilken farge den skal være.
Koden under vil gjøre at alle bildene får en border på 5 piksler som er svart.
img
{
border: 5px solid black;
}
