Lær CSS på 5 minutter - En tutorial til begyndere
En hurtig vejledning om Internets designsprog.

CSS (Cascading Style Sheets) er det, der får websider til at se godt ud og præsentable. Det er en væsentlig del af moderne webudvikling og en must-have færdighed for enhver webdesigner og udvikler.
I denne artikel giver jeg dig en hurtig introduktion, der hjælper dig med at komme i gang med CSS.
Vi har også lanceret et gratis CSS-kursus i fuld længde på Scrimba. Klik her for at tjekke det ud.
Jeg antager, at du har en grundlæggende forståelse af HTML, men bortset fra at der ikke er nogen forudsætninger for denne tutorial.
Kom godt i gang
Lad os starte med at lære, hvordan vi kan inkludere CSS i vores projekter. Der er typisk tre måder, vi gør det på.
1. Integreret CSS
For det første kan vi inkludere CSS direkte i vores HTML-elementer. Til dette bruger vi style
attributten, og derefter leverer vi egenskaber til den.
Hello world!
Her giver vi det egenskaben color
og sætter værdien til blue
, hvilket resulterer i følgende:

Vi kan også indstille flere egenskaber inde i style
tagget, hvis vi ville. Jeg vil dog ikke fortsætte ned ad denne sti, da tingene begynder at blive rodet, hvis vores HTML er rodet med masser af CSS inde i den.
Dette er grunden til, at den anden metode til at inkludere CSS blev introduceret.
2. Intern CSS
Den anden måde at inkludere CSS er at bruge style
elementet i head
sektionen af HTML-dokumentet. Dette kaldes intern styling.
h1 { color: blue; }
I stilelementet kan vi give stylingen til vores HTML-elementer ved at vælge elementet (elementerne) og give stylingattributter. Ligesom vi anvendte color
ejendommen på h1
elementet ovenfor.
3. Ekstern CSS
Den tredje og mest anbefalede måde at inkludere CSS på er at bruge et eksternt typografiark. Vi opretter et typografiark med en .css
udvidelse og inkluderer dets link i HTML-dokumentet, sådan:
I koden ovenfor har vi inkluderet linket til style.css
filen ved hjælp af link
elementet. Vi skriver derefter alle vores CSS i et separat stilark kaldet style.css
så det er let håndterbart.
h1 { color: blue; }
Dette typografiark kan også importeres til andre HTML
filer, så dette er fantastisk til genanvendelighed.
CSS-vælgere
Som vi diskuterede tidligere, er CSS et designsprog, der bruges til at style HTML-elementer. Og for at style elementer skal du først vælge dem. Du har allerede set et glimt af, hvordan dette fungerer, men lad os dykke lidt dybere ned i CSS-vælgerne og se på tre forskellige måder, du kan vælge HTML-elementer på.
1. Element
Den første måde at vælge et HTML-element er ved blot at bruge navnet, hvilket er det, vi gjorde ovenfor. Lad os se, hvordan det fungerer:
h1 { font-size: 20px; } p { color: green; } div { margin: 10px; }
Eksemplet ovenfor er næsten selvforklarende. Vi vælger forskellige elementer som h1
, p
, div
og give dem forskellige stil attributter. De font-size
kontrollerer størrelsen af teksten, color
sætter tekst farve, og margin
tilføjer afstand omkring elementet.
2. Klasse
En anden måde at vælge HTML-elementer er ved hjælp af klasseattributten. I HTML kan vi tildele forskellige klasser til vores elementer. Hvert element kan have flere klasser, og hver klasse kan også anvendes på flere elementer.
Lad os se det i aktion:
This is heading
.container { margin: 10px; }
I koden ovenfor har vi tildelt klassen container
til div-elementet. I stilarket vælger vi vores klasse ved hjælp af .className
format og giver det en 10px
margin.
3. ID
Ligesom klasser kan vi også bruge ID'er til at vælge HTML-elementer og anvende styling på dem. Den eneste forskel mellem klasse og ID er, at et ID kun kan tildeles et HTML-element.
This is a paragraph
#para1 { color: green; font-size: 16px; }
Eksemplet ovenfor viser, hvordan vi tildeler et ID til afsnitselementet og senere bruger ID-vælgeren i typografiarket til at vælge afsnittet og anvende typografien på det.
Skrifttyper og farver
CSS provides us with literally hundreds of options for playing around with fonts and colors and making our HTML elements look pretty. We can choose from two types of font family names:
1. Generic Family: a group of font families with a similar look (like ‘Serif’ or ‘Monospace’)
2. Font Family: a specific font family (like ‘Times New Roman’ or ‘Arial’)
For colors, we can use predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
CSS is Coooooool!!!!
.container { width: 500px; height: 100px; background-color: lightcyan; text-align: center; } .heading1 { font-family: 'Courier New'; color: tomato; }

As you can see in the above example, we have a div element with the class of container
. Inside this div, there is an h1
tag with some text inside it.
In the stylesheet, we select the container class and set its width
, height
, background-color
, and text-align
.
Endelig vælger vi .heading1
klassen - som anvendes på h1
koden - og giver den attributterne for font-family
og color
.
Konklusion
Du føler dig måske lidt overvældet af alle disse oplysninger, men rolig.
Se bare vores gratis introduktion til CSS-kursus om Scrimba, så bliver du en webdesign-ninja på mindre end en time.
Tak for læsningen! Mit navn er Per Borgen, jeg er medstifter af Scrimba - den nemmeste måde at lære at kode på. Du bør tjekke vores responsive webdesign bootcamp, hvis du vil lære at opbygge et moderne websted på et professionelt niveau.
