I gang med CSS

Velkommen til min lille tutorial omkring CSS. I Artiklen, vil jeg gennemgå de forskellige fordele ved CSS, hvad det er, og hvorfor det er bedre at bruge til forskel fra at kode i ren HTML.

Forskellen på CSS og HTML er at HTML er et "struktur" sprog, der bestemmer hvordan siden er opbygget, mht. tabeller, tekst, links, m.m. Du kan dog også give de forskellige tekster farver, definere forskellige værdier for dem, men med CSS er det meget lettere!

CSS, der står for Cascading Style Sheets, er et layout sprog. Layout i den forstand at du ved hjælp af CSS, kan bestemme farver, størrelse, positioner, dekoration, baggrund, m.m. på de forskellige ting, alt efter hvad attributter du giver dem.
Det andet gode ved CSS er; Hvis du nu er webmaster for 50 HTML dokumenter, og du har en baggrund der er sort. Chefen er pissebesværlig, og vil nu have en hvid baggrund istedet for. Istedet for at du så manuelt skal gå igennem alle dine 50 HTML dokumenter, for at ændre baggrunden, kan du gøre det centralt fra dit CSS dokument!

Hele hemmeligheden, ligger i Head Sektionen af dit HTML dokument. For at include dit CSS dokument, kræver det at du har en henvisning i Head Sektionen af dit dokument. Denne henvisning kunne meget vel være den du skulle bruge;

<link rel="stylesheet" type="text/css" href="mystyle/css.css">

Definationen for hvor dit CSS dokument ligger er "Href="mystyle/css.css"". Mystyle, er den mappe dit CSS dokument ligger i, og css.css er det din layout fil hedder. Det skal dog nævnes at du ikke behøver at have dit CSS dokument liggende i en anden mappe, du kan sagtens linke til den fra samme mappe, så skal du dog huske bare at skrive "Href="css.css".

Okay, for at lave dit eget CSS dokument, kræver det at du har et simpelt lille program der hedder Notepad, du kan også bruge Stones Text Editor, Homesite, eller lign. programmer, men jeg foreslår at du til at starter med at bruge Notepad. Fordelen ved Notepad er at, hvis du dummer dig, kræver det at du sætter dig in i kodeopbygningen, for at kunne finde fejlen, men hvis du bruger et andet program, finder det fejlen for dig med det samme, og derved, lærer du måske ikke lige så hurtigt.

Start nu dit program, og lad os komme i gang!
I toppen af dit dokument, kunne du passende skrive det samme som der står her;

body {
background-color: #000000;
}

Dette vil give en baggrundsfarve der er sort. For nu at være i stand til at læse teksten der står på siden, vil vi blive nødt til at definere farven for teksten, da den som stanard altid vil være sort. Det gør vi på følgende måde;

body {
background-color: #000000;
color: #FFFFFF;
}

Dette vil nu give en hvid tekst farve, og stadig holde baggrunden sort.

Okay, nu skal vi lære hvordan du definere farver, baggrund og text-decoration. For at give dine overskrifter en speciel farve, du kan ændre fra CSS scriptet skal du tilføje dette til dit CSS dokument;

h1 {
color: #FF0000;
}

Dette vil give en rød overskrift, og hvis du vil lave det samme med andre overskrifter, h2, h3, h4, h5 og h6, laver du det samme, dog kan du ændre farvekoden FF0000 til noget andet.
Nu har du så en rød overskrift på sort baggrund, men vil egentlig hellere have en hvid baggrund. Det gøres på Følgende måde;

h1 {
color: #FF0000;
background-color: #FFFFFF;
}

Du kan også definere hvor stor baggrund på ordet du vil have hvidt, men det ordnes ved hjælp af noget der hedder Padding, og det vil vi kigge på, på et senere tidspunkt.
Når du nu kigger hele dit CSS dokument igennem, skulle det meget gerne se således ud;

body {
background-color: #000000;
color: #FFFFFF;
}

h1 {
color: #FF0000;
background-color: #FFFFF;
}

Og allerede her, kan det stærkt anbefales, at man laver noget afstand fra siden og ud af, for lettere at skelne mellem de forskellige koder, så du lettere kan se, hvornår du kommer til et nyt afsnit.

Dette er et spørgsmål, jeg tit er blevet stillet, og et problem mange har stået over for. For CSS er indrettet på den måde, at hvis du skriver nogen bogstaver med stort, og den kigger efter billedefilen, men ikke kan fidne den, er det tit fordi, at man har startet sit sti navn med STORT, hvor billedefilen, måske starter med SMÅT.

Men nok om det, lad os komme i gang... Hvis du ligger inde med et billede, som du meget gerne vil have til at være som din baggrund, skriver du dette;

body
{
background-image: url("dit-billede-her.jpg");
}

Men hvis du har et billede på internettet du hellere vil bruge som baggrund, skal du skrive dette i stedet;

body
{
background-image: url("http://www.adresse.her/billedet.jpg");
}

Og som du nok har opdaget nu, blev dit baggrundsbillede gentaget over det hele! Det er standard, medmindre andet bliver angivet. Men hvis vi gerne vil have dette ændret, har vi nogle andre værdier vi kan angive;

background-repeat: repeat-x - Billedet gentages horisontalt  
background-repeat: repeat-y - Billedet gentages vertikalt 
background-repeat: repeat - Billedet gentages både horisontalt og vertikalt  
background-repeat: no-repeat - Billedet gentages ikke

Det vil så sige, at hvis vi ikke ønsker vores billede skal gentages på nogen måde, skal dette tilføjes til dit CSS dokument;

body
{
background-image: url("dit-billede-her.jpg");
background-repeat: no-repeat;
}

Du har nu muligheden for at placere dit billede hvor du har lyst til. Dette kan gøres ved hjælp af background-position, så du ikke som standard, har det placeret i øverste venstre hjørne. Du kan til dette bruge;
pix
Procent (%)
cm
Et eksempel kunne være dette;

body
{
background-image: url("dit-billede-her.jpg");
background-repeat: no-repeat;
background-position: center center;
}

Dette vil så placere billedet midt på siden, men vil automatisk scrolle med siden. Hvis man derimod ønsker at billedet skal sidde "fast", så det ikke bevæger sig når siden scrolles op eller ned, har du en ny mulighed der hedder background-attachment. Med denne funktion, kan du bestemme hvorvidt billedet scroller med, eller er låst. De to funktioner der styrer dette, hedder henholdsvis;

background-attachment - ulåst
background-attachment: fixed - låst

I kode eksempel vil det se således ud;

{
background-image: url("dit-billede-her.jpg");
background-repeat: no-repeat;
background-position: center center;
background-attachment; fixed;
}

Dette vil resultere i at dit baggrundsbillede IKKE flytter sig, men derimod holder sin plads bagerst. Det skal dog lige nævnes at hvis du vælger et billede med mange forskellige lyse og mørke farver, bør du vælge en farve, der kan læses, mht. tekst. Nåh, det må være nok for denne gang. Næste gang vil vi kigge på de forskellige muligheder for sammenskrivning, de forskellige fonte, tekst dekorationer, pseudo classes i forbindelse med link, m.m.