CSS styrer, hvordan din hjemmeside ser ud. Farver, skrifttyper, afstande og layout er alt sammen CSS. Lær, hvad det er, hvordan det virker, og hvorfor det er vigtigt for dit brand.
Har du nogensinde besøgt to hjemmesider med næsten det samme indhold, som alligevel ser helt forskellige ud? Den ene er poleret, ren og let at læse. Den anden virker rodet, gammeldags og svær at finde rundt i. Indholdet kan være det samme. Det, der gør dem så forskellige, er CSS.
I det forrige kapitel lærte du, at HTML giver en webside dens struktur. Det fortæller browseren, hvad alting er: en overskrift, et afsnit, et billede, en knap. Men HTML har ingen styling i sig selv. Uden CSS ville alle hjemmesider se ud som et almindeligt tekstdokument. CSS er det, der gør strukturen til en visuel oplevelse.
Hvad er CSS?
CSS står for Cascading Style Sheets. Det er et sprog, der styrer, hvordan en webside ser ud. HTML siger "det her er en overskrift", og CSS siger "den overskrift skal være mørkeblå, 32 pixel høj og bruge netop den skrifttype". HTML siger "det her er en knap", og CSS siger "knappen skal være grøn, have runde hjørner og sidde 20 pixel under teksten over den".
Hver visuel beslutning, du ser på en hjemmeside, som farver, skrifttyper, størrelser, afstande, layout, hover-effekter og baggrunde, kommer fra CSS. Det er internettets designlag.
Hvordan virker CSS?
CSS virker ved at pege på HTML-elementer og give dem stilregler. Du fortæller CSS, hvilket element der skal styles, og beskriver så, hvordan det skal se ud. Reglerne står i en separat fil, som browseren henter sammen med HTML'en. Når browseren læser begge filer sammen, bruger den stilene på de rigtige elementer og viser den færdige side.
Ordet "cascading" i navnet handler om, hvordan CSS løser konflikter. Gælder flere stilregler for det samme element, følger CSS en bestemt rækkefølge for at afgøre, hvilken regel der vinder. Mere specifikke regler vinder over mere generelle. Systemet giver designere præcis kontrol over, hvordan hvert element ser ud på hele hjemmesiden.
Typer af CSS
CSS kan skrives på tre forskellige måder. Alle virker, men de passer ikke lige godt til alle situationer.
1. Inline CSS
Inline CSS skrives direkte på ét enkelt HTML-element. Den påvirker kun det ene element og vinder over andre stilarter, der gælder for det. Den er nyttig til hurtige, enkeltstående ændringer, men bliver et problem, når der er mange. Vil du ændre en farve, der bruges på 50 elementer, skal du ændre den 50 steder i stedet for ét.
2. Intern CSS
Intern CSS skrives i et style-tag i selve HTML-filen, som regel øverst på siden. Den gælder kun den ene side. Det er fint til enkelte sider eller små projekter, men på en hel hjemmeside betyder det, at de samme stilarter gentages på hver side. Ændrer du én ting, skal du opdatere hver fil for sig.
3. Ekstern CSS
Ekstern CSS ligger i en separat fil, som er linket til dine HTML-sider. Det er standardmetoden på alle rigtige hjemmesider. Du bestemmer alle dine stilarter ét sted i én fil, og alle sider, der linker til den, arver stilene. Ændrer du en farve eller en skrifttype ét sted, bliver den opdateret alle steder med det samme. Det er renere, hurtigere at loade og meget lettere at vedligeholde. Næsten alle velbyggede hjemmesider bruger ekstern CSS som fundament.
Hvad CSS styrer på din hjemmeside
CSS berører næsten alle visuelle sider af din hjemmeside. Her er de vigtigste områder.
Farver og baggrunde
Hver farve på din hjemmeside, som tekstfarve, baggrundsfarve, knapfarve og kantfarve, bliver sat med CSS. Dine brandfarver bruges ensartet på hele hjemmesiden, når du bestemmer dem én gang i CSS og bruger dem overalt.
Typografi
Den skrifttype, din hjemmeside bruger, størrelsen på overskrifter og brødtekst, afstanden mellem linjer og om tekst er fed eller kursiv er alt sammen CSS. God typografi gør indhold lettere at læse og styrker dit brands identitet.
Layout og afstande
Hvordan kolonner er placeret, hvor meget plads der er mellem afsnit, hvor bredt indholdsområdet er, og hvor sidebjælken står, styrer CSS alt sammen. Layoutreglerne bestemmer hver sides overordnede opbygning ud over det, HTML giver.
Responsiv adfærd
CSS er også det, der får responsivt design til at virke. Media queries i CSS fortæller browseren, at den skal bruge forskellige stilarter alt efter skærmstørrelsen. På en computer kan indholdet stå i tre kolonner. På en telefon lægger CSS kolonnerne oven på hinanden, så alt er der på den mindre skærm.
Animationer og effekter
Hover-effekter på knapper, bløde overgange mellem afsnit og indhold, der toner ind, mens du scroller, er alt sammen CSS. De giver bevægelse og finish til oplevelsen uden at kræve JavaScript.
Hvad det betyder for din hjemmeside som brandejer
Du behøver ikke skrive CSS for at have en veldesignet hjemmeside. Hjemmesidebyggere klarer det for dig. Når du vælger en skabelon, dine brandfarver og dine skrifttyper, laver platformen dine valg om til CSS-regler bag kulisserne. Hver ændring, du laver i den visuelle editor, giver CSS, som browseren læser og bruger.
For dig er det vigtigt, at den CSS, din platform laver, er ren og effektiv. Tung eller oppustet CSS gør dine sider langsommere at loade. Velskrevet CSS holder din hjemmeside hurtig og ensartet på alle sider. WEMASYs hjemmesidebygger laver automatisk optimeret CSS, så dine designvalg slår rent igennem uden at gøre dine sider tungere end nødvendigt. Vil du forstå, hvordan det hænger sammen med ydelsen, så læs hvad er hjemmesidens hastighed, og hvorfor betyder den noget.
Ofte stillede spørgsmål
Skal jeg lære CSS for at bygge en hjemmeside?
Nej. Med en hjemmesidebygger styrer du hjemmesidens udseende i en visuel editor. Platformen skriver CSS'en for dig. Det er nyttigt at kende det grundlæggende i CSS, hvis du vil forstå, hvorfor tingene ser ud, som de gør, men du behøver ikke skrive en eneste linje for at bygge en professionel hjemmeside med WEMASYs hjemmesidebygger.
Hvad er forskellen på CSS og HTML?
HTML bestemmer en websides struktur, altså hvad hvert stykke indhold er. CSS bestemmer, hvordan det ser ud. HTML laver en overskrift. CSS giver overskriften en bestemt farve, størrelse og skrifttype. De arbejder sammen: HTML leverer elementerne, CSS styler dem.
Kan CSS påvirke hjemmesidens hastighed?
Ja. Store, ineffektive CSS-filer gør hver sideindlæsning tungere. CSS, der ikke er optimeret, kan også forhindre browseren i at vise siden, til den har læst alle stilarterne, og det gør, at besøgende ser dit indhold senere. Ren og minimal CSS loader hurtigere. Det er en grund til, at det betyder noget for hjemmesidens hastighed, at du bygger på en platform med god kode.
Hvad er et CSS-framework?
Et CSS-framework er en samling færdigskrevne CSS-regler, som udviklere bruger som udgangspunkt i stedet for at skrive alt fra bunden. Det gør udviklingen hurtigere og giver ensartede, afprøvede stilarter fra start. De fleste hjemmesidebyggere bruger et CSS-framework indeni, så de skabeloner, de laver, allerede er velopbyggede og pålidelige.
Kan du bruge CSS til at få din hjemmeside til at se godt ud både på computer og mobil?
Ja, og det er faktisk en af CSS' vigtigste opgaver. Med media queries bruger CSS forskellige stilarter alt efter skærmstørrelsen. På en bred computerskærm kan indholdet stå i flere kolonner med store billeder. På en telefon lægges de samme kolonner oven på hinanden, skriftstørrelserne justeres, og afstandene bliver mindre, så alt passer til den mindre skærm. Sådan virker responsivt design, og det klares helt med CSS uden at du behøver en separat mobilversion af din hjemmeside.
Hvad sker der, hvis CSS ikke loader på en side?
Hvis CSS-filen ikke loader, bliver siden stadig vist, men uden styling. Du ser almindelig tekst og billeder uden farver, skrifttyper eller layout. Alt står oven på hinanden i den rækkefølge, det har i HTML'en. Det ser ødelagt ud, men indholdet er teknisk set der stadig. Det sker sjældent på velholdte platforme, men det minder om, hvor meget visuelt arbejde CSS stille klarer på hver side.