ITpro.no: En innføring i CSS

CSS er et format for å skrive såkalte stilark. CSS brukes for å lage design til flere typer dokumenter. I denne guiden tar vi en kikk på hvordan CSS skrives og brukes, samt hvordan det brukes sammen med (X)HTML-standarden. Det er en fordel med grunnleggende forståelse av HTML før du begynner med CSS.

Keep things simple!

Etterhvert som du få mer og mer draget på det å bruke CSS, blir stilarkene dine lengre og lengre, og til slutt glemmer du hva som er hva. Hvordan i all verden skal du klare å holde styr på alt sammen? Vel, det også er nokså enkelt, og vi starter med å bruke kommentarer. La oss se på det:

/* Dette er den kommentar */
body {
background-color : black;
}
/* Enda en kommentar, men
denne går over flere linjer
Kult! */
a {
color : red;
}

Okey, jeg mener ikke at du skal legge inn en kommentar for hver stilregel du lager, men hold oversikt og et ryddig stilark. Del opp stilarket i seksjoner, og kommentér inn titler som "header", "content", "footer" osv. Om du lager et ryddig stilark gjør du det mye enklere for deg selv når du skal redigere stilarket ved neste redesign av nettstedet ditt.

En annen viktig ting å passe på, er å sette classes og ID's som har en mening. Ikke gi en ID navnet blue_header – rett og slett fordi en gang i fremtiden har den kanskje blitt rød. Sett derfor id som main_header. Et annet eksempel er en klasse som heter big_text. Den vil en gang i fremtiden være en liten, rød tekst. Kall den da heller important_text eller andre beskrivende navn. Navngi reglene kort og lett forstålig uansett hvilke regler du lager. Og for all del – ikke gå helt bananas med navnene som å kalle det for little_cute_image_down_the_bottom_of_the_page.

Sammenslåing – optimalisering av CSS

Jo mer du skriver, og jo flere regler du lager blir ditt stilark veldig langt. Det er nå vi skal begynne å optimalisere CSS-koden. Dette er ikke spesielt vanskelig, og gjør stilarket mer oversiktlig.

/* Ikke optimalisert kode*/
body {
    background-color : black;
}
body {
    font-size : 1.5em;
}
/* Optimalisert kode*/
body {
    font-size : 1.5em;
    background-color : black;
}

I eksemplet over ser du to koder som gjør akkurat det samme. Saken er at du kan legge inn flere regler i det samme elementet. Tegnet ; betyr at du lukker én regel og kan starte på en ny. Vi kan også slå sammen forskjellige elementer som skal ha samme egenskap og verdi. Det ser du i eksemplet under.

/* Ikke optimalisert*/
h1 {
    margin : 10px;
}
h2 {
    margin : 10px;
}
/* Optimalisert*/
h1 ,
h2 {
    margin : 10px;
}

Som vi ser, så har både h1- og h2-taggene samme regel for margin : 10px, så da kan vi kombinere de sammen ved å bruke et kommategn. Du trenger ikke å plassere de på forskjellige linjer, men det er gjort her for oversiktens skyld. Vi tar et siste eksempel på optimalisering av CSS-kode:

/* Ikke optimalisert*/
h1 {
    margin-top : 10px;
    margin-right : 15px;
    margin-bottom : 10px;
    margin-left : 15px;
}
/* Optimalisert*/
h1 ,
h2 {
    margin : 10px 15px 10px 15px;
/* Eller*/
h1 ,
h2 {
    margin : 10px 15px;
}

I eksemplet med den første optimaliserte koden, har vi kuttet kraftig ned på koden. Vi beholder kun margin som egenskap, men setter på fire verdier. Verdiene setter vi i klokkens retning, nemlig top-right-bottom-left. I det andre eksemplet har vi kuttet ned enda mer, og her er det bottom-top og left-right som gjelder.

Avansert velging av regler

Til nå har vi lært hvordan vi kan bruke forskjellige typer elementer, f.eks body, id og class for å velge hva vi skal lage en stilregel for. Nå skal vi litt dypere og bruke mer avanserte regler. La oss si at du har mange sider på din hjemmeside, og skal sette en stil som gjelder for alle linkene i en meny som har id="menu". Så, hvordan gjør man det uten å legge til classes for hver link på alle sidene? Vi skal lage en etterfølgende kombinator.

#menu a {
border : 1px dotted #990000;
}

Ser du hva vi har gjort her? Først har vi valgt elementet menu med dens id. Deretter har vi valgt a. Dette resulterer i at stilarket setter regelen for alle linker i menyen. Vi har også en annen kombinator som fungere omtrent på samme måte:

#menu > a {
font-weight : bolder;
}

Denne er nesten lik forrige eksempel, bortsett fra at vi har lagt inn en > . Det betyr at hvis elementet er en link må a-taggen være i en meny som har ID'en #menu.

Bruk av avstander i CSS

Det siste vi skal ta for oss i denne CSS-guiden, er bruk av avstander sammen med CSS.
Det finnes 9 forskjellige avstandsmetoder: %, in, cm, mm, em, ex, pt, pc og px.

in, cm, mm, pt og pc er alle basert på inch eller millimeter. Du kan bruke disse, men det er ikke anbefalt. Rett og slett fordi en inch på en datamaskin er forskjellig til en annen datamaskin.

Dermed står vi igjen med %, px, em og ex. Disse bør du bruke – og vit når du skal bruke hvem.

Prosenttegnet bruker du til å sette en prosentandel av elementene. For eksempel om jeg har en div som er 90px bred, med en annen div som er 60% bred, vil den være 54px bred. Dette er mest brukt til å lage fleksible oppsett. Du kan blant annet sette menyen til å være 20 %, slik at innholdet blir 80 %.
px er det samme som en dott på skjermen din. Dette er trolig den måleenheten du kommer til å bruke mest. Du bruker den til å sette kantlinjer, bredde, høyde, padding, marger osv. Dette er fordi én piksel er én piksel på alle datamaskiner og i alle nettlesere. Men husk at alle ikke har en 1280×1024-skjerm. Ikke gjør nettsiden din for bred.

em er en veldig nyttig måleenhet. Den er lik høyden på skriften som brukes. Normalt er dette 16px.
ex er en mer sjelden enhet. Denne enheten er lik en halv em.