CSS

Hvad er CSS?

Websider er opbygget i med HTML tags, f.eks. <table> for at lave en tabel, <h1> for at lave en overskrift, <a href=""> for at lave et link, osv. Med andre ord siger HTML noget om din websides indhold.

CSS er vejen til at gøre dine websider smukke. Hvis du forestiller dig, at HTML er strukturen i et hus (fundament, mure, værelser..), så er CSS husets dekoration (maling, kunst, placering af møbler..). Eller tænk på et stykke musik: Teksten svarer til HTML, mens noderne svarer til CSS.

CSS står for Cascading style sheets. En style er en regel som beskriver, hvordan et stykke HTML-kode skal se ud. Et sheet er en samling af disse regler. Denne samling skrives typisk i et dokument for sig selv, men kan også stå i den enkelte HTML-fil.

I et style sheet skriver man f.eks. hvilken størrelse, font og farve overskrifterne <h1> skal have, osv. På den måde adskiller man indhold (HTML) og form/layout (CSS).

CSS har eksisteret i efterhånden en del år, men mens man tidligere blot beskrev de vigtigste elementer, såsom sin tekst, anvendes CSS i dag til at beskrive alt på websiden, bl.a. DIV containere, som er de bokse, en webside består af. Eksempelvis hedder den DIV container, du sidder og læser i lige nu 'mainleft', og i style sheet'et er den beskrevet sådan:

#mainleft {
float: left;
width: 340px;
background-color: #FFFFFF;
padding-right: 15px;
}

CSS-dokumentet indeholder altså informationer om placering, størrelse, baggrundsfarve og margin inde i boksen. Ligeledes er teksten defineret som:

p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: normal;
margin-bottom: 18px;

Denne regel kan så genbruges på al min tekst på hele websitet, og hvis jeg ønsker at skifte font, laver jeg blot min ændring i min style sheet.

Typer af styles

Der er forskellige typer af styles, som anvendes i forskellige sammenhænge: De vigtigste er:

• En Class-style er en style, du kan oprette og tilføje manuelt til en tekst eller en HTML tag. Hvis du f.eks. ønsker at dit firmanavn altid skal stå med blå, kursiv og store bogstaver, så kan du oprette en class style med navnet 'firma' og definere udseendet her. I dette tilfælde:
  
  .firma {
  font-style: italic;
  text-transform: uppercase;
  color: #0000FF;
  
  Du tilføjer så denne style til din tekst i dit HTML-dokument.
  
  Når du vælger at formatere din tekst i DreamWeavers Property Inspector, så opretter Dreamweaver automatisk Class styles.
  
  
• En TAG-style er er style, som redefinerer udseendet af en bestemt tag, dvs. hvis du f.eks. ønsker at alle dine <h1> overskrifter skal have fonten 'georgia', så laver du blot ændringen i denne TAG-style, og det træder igennem på hele dit website.

Med andre ord: hvis du ska bruge formateringer, som skal gælde på hele websitet, anvender du TAG-styles. Hvis du skal have en speciel formatering, som skal gælde i et bestemt afsnit, vælger du i stedet CLASS-styles.

Der er en sidste type styles, som også er væsentlig:

• Advanced styles, også kaldet ID-styles, bruges til at formatere et objekt, som kun fremkommer én gang på en webside. Det kan f.eks. være banneren, eller den boks, du læser i lige nu 'mainright'. De minder lidt om Class-Styles, men kan kun anvendes én gang. De anvendes altid til <DIV> containere, som siderned gerne skulle være opbygget af.

CSS online editor

Jeg har lavet en lille simpel online CSS-editor, hvor du kan skrive indhold, HTML tags og CSS-style, og få det vist, som det vil se ud i en browser ved at klikke på 'Oversæt':

Hvorfor anvende CSS?

De helt store fordele ved at anvende CSS er:

• Flottere design
  Egentlig indeholder HTML nogle basale muligheder for formatering af tekst, baggrundsfarve, osv, men slet ikke i samme omfang som CSS. Med CSS layout kan du opstille din tekst og billeder på samme måde, som i en avis, bog, osv.
  
  
• CSS fylder mindre
  Din formatering skal kun skrives i ét style sheet, og derfor bliver alle dine HTML-sider mindre og hurtigere at downloade
  
  
• Lettere at opdatere dit design
  Da du kun skal ændre formatering og layout i et style sheet, som er linket op på alle dine sider, og du ikke skal rette i hver HTML-side, er det hurtigere og lettere at lave ændringer og eksperimentere med designet.
  
  
• Alle kan lave deltage i web-produktionen
  Da man adskiller indhold (HTML) fra layout (CSS), er det let at lade medarbejdere, osm ikke har sans for et pænt design skrive indholdet på de enkelte sider. Formateringen er jo defineret i CSS-dokumentet, som en webdesigner eller lignende har udarbejdet.

Det lyder jo som om at alt er fryd og gammen ved at anvende CSS. En ulempe er dog, at CSS-formaterede websider kan se forskellige ud, afhængig af hvilken browser, de ses i. Derfor er det vigtigt at checke sine websider i de største browsere, dvs. Internet Explorer, Mozilla Firefox, Safari og Google Chrome.

Skal du kunnne kode for at lære CSS?

Både Ja og Nej...

Dreamweaver indeholder en masse dialogbokse, som lader dig vælge mellem de mange muligheder for formatering. Når du har valgt dem, skriver DreamWeaver selv koden i et CSS-dokument.

Hvis du skal arbejde seriøst med CSS webdesign, skal du dog selv lære at skrive dine CSS-regler, da det giver langt større overblik og mange flere muligheder for formatering end de indbyggede dialogbokse i DreamWeaver gør.

Et godt råd: som begynder kan du du anvende DreamWeavers indbyggede menuer til formatering, men gør dig selv den tjeneste at følge med i dit CSS-dokument. på den måde kan du løbende se, hvordan CSS-koden skrives, og løbende overtage det skrive-arbejde, du før lod DreamWeaver om. CSS-kodning er langt lettere end rigtige objekt-orienterede programmeringssprog.