Hvordan virker stilsett filen?

Stilsettfilen eller CSS forteller hvordan tekst og bilde skal se ut,  men ikke noe tekst skal plasseres inni denne filen.

Igrunn er CSS ganske enkelt å forstå, bare du kan de 30 mest brukte kommandoene så klarer du igrunn å få til en bra design. La oss se på noen eksempel:

.entry{
border: 1px solid #000;
}

Ok, det var ikke så vanskelig? tja, kanskje litt. Hvis du ser på første linjen så står det “.entry{“  denne sier hvor koden som er under skal brukes til.  “.entry” er definert i malen til å være innlegget. Med så langt ? ikke.. ok… Se for deg bloggen din. Se for deg at du gir navn til alle delene av den. La oss si at vi kaller header på siden din for ja.. “#header”.. og la oss si at vi kaller sidemenyen for “#side”.. ok.. med så langt?

Det CSS ( eller stilsettfilen ) nå kan si er at:

“Yo! #side gå å kast på deg en blåfarge!!”   og selvfølgelig er #side så flink og snill at den forandrer bakgrunnen sin til blå… men, joda det er dette CSS ( eller stilsettfilen ) sier, men den bruker kanskje ikke “Yo!”. men den vil si det på en litt annen måtte, for at bakgrunnsfargen på sidemenyen ( som vi nå har døpt #side ) skal bli blå må CSS koden se slik ut:

#side{
background: blue;
}

Her ser du, på  første linje roper vi ut navet på hva vi vil koden skal forandre. Andre linje sier at bakgrunnsfargen skal forandre seg. Og det som står bak : er hva den skal bli satt til,  “blue” . Det er også et ; tegn på slutten av linjen. Denne trenges for å sifra når linjen slutter og en ny skal begynne. Tredje linjen avslutter vi koden til #side det gjøres med en }.

Hvis har forstått dette, så er du kommet langt. Nå skal du ikke ha problemer med å tyde noen CSS koder, bare tenk på reglen over? jo, det er igrunn rett. Men ting kan bli ganske avansert.. feks

#side h4{
color: #000000;
font-size: 16px;
}

Oi, du fikk utrolig merkelig utrykk.. Send gjerne inn et bilde til bloggen :) men selv om du kanskje ikke forstår dette så kan det jo hende du klarer å forstå dette med litt hjelp.

Første linjen “#side h4{“  hva kan dette bety ? Helt rett det er en CSS kode :P nærmere bestemt hvem koden skal “virke på”. Du ser det er mellomrom mellom dem, dette betyr at det er blitt “gitt navn” til noe inni #side. Så denne koden vil virke på “h4″ som er inni #side. I dette tilfellet overskriftene  “kategorier”, “arkiv”, “Siste innlegg” osv.  “color” vil forandre fargen på teksten og “font-size” sier hvilken størrelse den vil få.

Vanskeligere en dette var det ikke :)

De mest brukte CSS kodene er:

color – Forandrer fargen på teksten

font-size – skrift størrelsen

height – Hvor stort noe skal være

width – hvor bredd noe skal være

background – bakgrunnen

border – ramme rundt noe, feks border: 1px solid #000000; vil gi den en svart ramme

padding – flytt teksten inn fra kanten, feks: padding: 5px;

margin – flytter noe bort bra noe

float – sier hvor noe skal være feks float: left; vil plassere noe til venstre

text-align – hvordan teksten skal være. Kan være left, right eller center.

display – Feks vil display: none;   gjøre det usynlig.

Tror jeg stopper her, de fleste kodene er ganske selvforklarende.Kan du engelsk så kan du gjette deg til hva de betyr :)

Hvor går veien videre? prøv deg frem er mitt forslag. Jeg kan skrive side opp og side ned om CSS hva som virker og hva som ikke vil virke, men så lenge ingen spørrer om det vil jeg ikke skrive noe mer her.

Men klarte du å forstå dette? ja? nei? legg igjen en kommentar, så kan jeg forklare det bedre hvis det er ønskelig.