CSS for begyndere: Simpel kodning på dit site

Har du en hjemmeside eller en webshop, så ved du, at det er en proces, der aldrig rigtig stopper – der er altid noget, der kan forbedres eller som kræver en opdatering.

Og du kender det højst sandsynligt: Af en eller anden årsag har du brug for at ændre farven på et link eller en knap, eller måske har du en sektion, der ikke længere er relevant at have på din side, som du skal gemme og fjerne. Altså relative små ændringer.

Du har nu 2 muligheder.

1. Du kan ringe til din webudvikler, som kan fikse det for dig.
2. Du kan klare ærterne selv. (Jo, du kan godt, ven!)

Vi står naturligvis altid klar til at hjælpe dig, hvis du ønsker det – kun ét opkald væk. Men med blot en lille forståelse for kodesproget CSS, vil du snildt kunne klare mindre visuelle ændringer på dit website, uden at du behøver at tage fat i en udvikler. Det kan både spare dig kostbar tid, hvis dine ændringer er tidsfølsomme, og ikke mindst skåne din pengepung en smule.

I dette indlæg giver vi dig en kort men konkret forklaring på, hvordan du, som ikke har den store erfaring med webudvikling, kan lave CSS ændringer – blot ved at vide hvor du skal indsætte koden, og hvordan du finder frem til, hvad du skal skrive for at opnå de ønskede ændringer. Velkommen til CSS for nybegyndere!

 

Hvad er CSS?

CSS står for “Cascading Style Sheets” og er det kodesprog, du skal bruge, hvis du ønsker at ændre dit layout eller styling af elementer på din hjemmeside eller webshop. CSS hjælper dig altså med dit visuelle udtryk på dit site, og du kan bestemme præcis, hvilke skrifttyper, størrelser, farver, kanter, marginer, baggrundsbilleder og -farver mv. indholdet på din hjemmeside/webshop skal have.

CSS som udviklingssprog er nemmere at komme i gang med end så mange andre. Og det kan være et enormt værdifuldt værktøj, som du meget hurtigt og nemt kan få en god forståelse for.

Der findes 3 forskellige måder at skrive CSS på:

1. Du kan skrive det på det element, du ønsker at style. Dette kaldes ’inline styling’.
2. Du kan have et eksternt dokument (stylesheet), som bliver hentet ind på dit site. Det er typisk sådan, at udviklere arbejder med CSS.
3. Du kan åbne et ’style tag’ i toppen af din HTML eller bruge en integreret ’CSS-sektion’ i det system, din hjemmeside eller webshop er lavet i (CMS).

 

Det lyder lidt kompliceret, vi ved det. Men vi har alle intentioner om at gøre det mere menneskeligt. Til at starte med kan du glemme alt om mulighed 1 og 2, for i dette indlæg vil vi dykke ned i mulighed 3 – dette er typisk den nemmeste metode at arbejde med for almindelige hjemmeside- eller webshopejere.

Og lad os bare tage det fra begyndelsen.

 

Hvad er et style tag?

Et style tag bruges til at definere, hvilken style et element eller tekst, skal have. Inde i dit tag, specificerer du, hvordan de forskellige elementer på dit site skal fremstå for brugerne.

Helt lavpraktisk skal du kun bruge et åbent og lukket style tag for at skrive CSS. Det er herimellem, at du koder, hvordan din styling skal være. Inde i dette style tag tillader systemet, at du skriver CSS.

Se eksemplet på et style tag herunder:

 

 

Bemærk, at nogle systemer har et dertil egnet område, hvori man skriver CSS. De har blot gjort det nemt for brugeren og har sat style tagget uden om stykket brugeren skriver i, for at gøre det nemmere at forstå.

 

Hvordan skriver jeg CSS?

Hvis du skal lære at kode ved hjælp af CSS på dit site, så behøver der ikke at være langt fra tanke til handling.

I al sin enkelthed handler CSS nemlig blot om 2 ting (sådan cirka):

1. Du skal definere, hvilket HTML-element du forsøger at ramme – altså hvilke elementer på dit site, du vil style. Dette kaldes at vælge en ’selector’.
   En selector kan være selve HTML-elementet, en HTML-klasse eller et HTML-ID.
   A. For at definere et HTML-element skal du blot skrive elementets navn som selector. Dette kunne f.eks. være ‘h1’.
   B. For at ramme en klasse skal du skrive klassens navn med et punktum foran. Dette kunne f.eks. være ‘.className’.
   C. For at ramme et ID skal du skrive ID’ets navn med en havelåge (hashtag) foran. Dette kunne f.eks. være ‘#idName’.
2. Du skal definere, hvilken styling du ønsker på elementet. Dette kaldes en ’declaration’.

 

Okay, for ikke at negligere vores dygtige udviklerhold her i biksen, så lad os lige fastslå, at der naturligvis er mere til CSS end overstående. Men i første omgang er dette, hvad du behøver at vide for at kunne lave hurtige ændringer på dit site.

Nedenfor har vi lavet et eksempel, hvori vi fanger alle H1’ere, altså dine overskrifter, på din side og gør dem 24 pixels store samt grønne.

 

 

Som det ses i eksemplet, vælger vi først elementet (selector) H1.

Herefter åbner vi kodestykke ved at lave tuborgklammer, altså { }.

Inde i disse tuborgklammer definerer vi den styling, som vi ønsker elementet skal have, altså font-size: 24px; og color: green;.

Bemærk, at vi lukker hver deklaration af med et semikolon. Hvis man ikke gør dette, vil stylingen fejle.

 

Hvad er en declaration?

En declaration i CSS er blot måden at fortælle systemet, hvilken ’property’/’egenskab’ CSS-værdien har, og dernæst hvilken værdi, den har. Groft sagt hvilken styling, der skal være.

For at forstå konceptet lidt nemmere, kan du se eksemplet herunder:

 

 

Bemærk, at vi blot har skrevet overstående på én linje, for at gøre det mere læsbart. Normalvis ville det stå over flere linjer, som det første eksempel vi præsenterede dig for.

 

Men hvordan finder jeg så properties/egenskaber og deres værdier?

Selv som erfaren udvikler, hænder det, at man bliver nødt til at finde hjælp til en bestemt property eller værdi. Dette er fordi, at der findes hundredvis af forskellige properties, som alle har forskellige værdier.

Derfor er det vigtigt at vide, hvor du skal lede, når du skal finde ud af, hvordan du styler dine elementer. Men bare rolig, vi har dig.

Første anbefaling er at blive god til at google. Google er i langt de fleste tilfælde din ven, og det kan være så simpelt som at søge på følgende: ”CSS how to change color on text”.

Det første resultat på Google viser et eksempel på ”color” property’en, og ud fra det er det blot et spørgsmål om at finde farven, man ønsker at bruge. Eksemplet kommer fra w3schools, som i øvrigt er et glimrende sted at lede efter CSS properties, hvis du mangler inspiration. De har alle properties listet i venstre side, og her kan du se, om du kan finde noget, som matcher dine behov.

Og herfra handler det blot om at øve sig og prøve at ændre farver, størrelser og hvad du nu ellers kan finde på. Hvis CSS er noget man brænder for, findes der hunrendevis af kurser online, hvor man kan styrke sine kompetencer – YouTube er altid klar med en hjælpende hånd.

Og hvis det ser helt sort ud, har vi også en masse dygtige udviklere, der kan klare sagen for dig.