Bedre webdesign med CSS

Skrevet av: GratisGuide.net

Med dagens nettlesere er det ingen sak å lage flotte, fargerike hjemmesider. Det som raskt kan bli et problem er vedlikehold av nettstedet. Endres utseendet på nettstedet, for eksempel bakgrunnsfarge, kan det være at tekst og lenker også må endre farge. Har du lagt inn tekst med farge kan det bli en omfattende jobb å endre dette.

CSS - Cascading Style Sheets, stilark - kan brukes til plassering av objekter på en side, til styring av størrelse og form, tilrettelegging for høytlesende nettlesere for blinde og mye mer.

Benytter du CSS vil jobben kunne bli mye enklere. Både selve design av hjemmesidene og vedlikehold av dem. Denne artikkelen skal forsøke å gi deg en innføring i CSS og hvordan du kan bruke det. Du bør ha kjennskap til HTML og kunne engelsk for å kunne ha fullt utbytte av artikkelen.

Oppdatering

Etter at denne artikkelen ble skrevet har vi lagt til en CSS-generator til Kodeservice, for deg som heller vil at CSS-skjemaene skal lages på enklest mulig måte.

Kode-eksempler

I denne artikkelen viser vi kode-eksempler, og disse har vi fargelagt for at det skal være litt enklere for deg å lese. Kode-eksemplene vises i to bokser; en for hvordan koden vises i en nettleser; på hvit bakgrunn, og under denne hvordan den underliggende koden ser ut; vist på grå bakgrunn.

Hva er CSS

CSS er en standard utarbeidet av World Wide Web Consortium (W3C), en organisasjon som har utarbeidet en rekke standarder du nok allerede har vært borte i, blant annet HTML.

Hvordan kan jeg benytte CSS

Du kan ta i bruk CSS på flere måter på ditt nettsted:

I et HTML-merke, med STYLE=""-attributten.
I en <STYLE></STYLE>-merke inne i <HEAD></HEAD>-merket.
I et separat stilark lenket til en hjemmeside med <LINK>-merket.

Eksempel på bruk av stiler

La oss si at du har et stykke tekst der du ønsker å fremheve enkelte ord og uttrykk. Disse har du valgt å fremheve med halvfet skrift:

Forklaringer til begrep som CSS og HTML finner du her.

Forklaringer til begrep som <STRONG>CSS</STRONG> og <STRONG>HTML</STRONG> finner du her.

Her er ordene fremhevet (gjort halvfete) med HTML-merket <STRONG>.

Om du så velger å også benytte en annen farge på teksten, ville du kanskje valgt følgende:

Forklaringer til begrep som CSS og HTML finner du her.

Forklaringer til begrep som <SPAN STYLE="font-weight: bold; color: green">CSS</SPAN> og <SPAN STYLE="font-weight: bold; color: green">HTML</SPAN> finner du her.

<SPAN></SPAN>-beholderen er ypperlig til bruk med CSS. Her har vi benyttet style=""-attributten til <SPAN> for å angi CSS-formattering. font-weight: bold angir at teksten i beholderen skal være halvfet, og color: green angir at tekstfargen skal være grønn.

Med ett ble formatteringen enklere å se. Problemet er at formatteringen gjentas. Er det 20 ord på en side som skal fremheves må den samme formatteringen også gjentas 20 ganger. Og skal den endres, må den også endres 20 ganger.

CSS for en enkelt side

Der kommer <STYLE></STYLE>-beholderen inn i bildet. Plassert i <HEAD></HEAD>-beholderen lar den deg angi CSS-formattering for alle HTML-merker, og du kan angi klasser med formattering også.

Med utgangspunkt i eksempelet over kan vi lage en CSS-klasse. Teksten som blir tildelt denne klassen skal ha samme egenskaper som over. Vi lager følgende:

Forklaring på koden

Vi har startet med hjemmesidens hode, startet med <HEAD>. De tre prikkene angir hva som ellers måtte være i denne beholderen fra før av. <STYLE></STYLE>-beholderen skal alltid plasseres i hode-delen.

Stilarket starter med <STYLE> og type-attributten skal alltid settes til text/css. Eldre nettlesere kan forsøke å vise innholdet i stilarket som vanlig tekst. Det kan derfor være lurt å angi innholdet som kommentarer med -merket. Nettlesere som tolker beholderen korrekt ignorerer kommentarangivelsen.

Her har vi tildelt egenskaper til en klasse vi har kalt uthev. I et stilark angis klasser alltid med ledende punktum etterfulgt av navnet, uten mellomrom. Egenskaper settes mellom krøllklammer { }. Flere egenskaper skilles med semikolon ;. Egenskaper angis med små bokstaver fulgt av kolon og verdien for egenskapen. Mellomrom og linjeskift ignoreres, det vil si at du kan formattere stilarket slik det passer deg.

I vårt eksempel har vi satt verdier til to egenskaper:
font-weight: bold Egenskapen font-weight har fått verdien bold; halvfet.
color: green Egenskapen color har fått verdien green, standardverdien grønn.

Opphavsrett

Ønsker du å gjengi denne artikkelen eller noe fra den må du gjerne gjøre det, men ikke glem kildereferanse. For å lenke til denne artikkelen kan du bruke URL-en http://www.gratisguide.net/artikler/html/bedre-webdesign-med-css.html.

Fortsett til side 2 | Tilbake til Artikler / HTML