TalentWeek 2022

4 Styling og CSS

Du har nok opdaget, at standard HTML ikke ligefrem er en fryd for øjet. Det ligner faktisk noget fra 1990'erne! Det er egentlig ikke så underligt, for HTML er et gammelt sprog, der både blev udviklet og vandt popularitet i netop 1990'erne. Siden er der sket rigtig meget med WWW, og styling er blevet en vigtig del af alle hjemmesider. Det skal vi selvfølgelig også se nærmere på, så de hjemmesider, du laver, ser godt ud i browseren!

4.1 Style attributen

Den letteste måde at style et HTML-element på er med style attributten.

HTML<!DOCTYPE html>

<html>

	<head>
		<meta charset="utf-8">
		<title>Mit første HTML-dokument</title>
	</head>
	
	<body>

		<h1 style="color: blue; background: grey; text-align: center;">Min blå, centrerede overskrift med grå baggrund</h1>
		<p style="color: red; font-family: 'Brush Script MT'; font-size: 30px;">Her er en spændende rød tekst, skrevet med skrifttypen Brush Script MT, som er 30 pixels høj.</p>
		<p>En helt almindelig paragraf til sammenligning</p>

	</body>

</html>

Bemærk, at style-attributten kan tage flere værdier, så længe de er adskilt af semikolon.

Selvom farverne i eksemplet ovenfor er utroligt flotte, så er det et stort arbejde at style hvert eneste element i sit HTML-dokument. Nogle properties nedarves fra parent-elementer til deres children-elementer. Det gælder for eksempel color, og det kan udnyttes på følgende måde:

HTML<!DOCTYPE html>

<html>

	<head>
		<meta charset="utf-8">
		<title>Mit første HTML-dokument</title>
	</head>

	<body style="font-family: 'Brush Script MT'; color: red;">

	<h1 style="text-align: center;">Min overskrift</h1>
	<p>Den efterfølgende tekst. Både tekst og overskrift har arvet style fra sin forælder.</p>

	</body>

</html>

4.2 Style tagget

Man kan komme langt med at style de enkelte elementer, men vi løber ind i to problemer:

Koden bliver hurtigt lang og uoverskuelig, og hvis man beslutter sig for, at ændre noget systematisk, for eksempel farven på alle overskrifter, skal man foretage den samme ændring mange gange på mange forskellige HTML-elementer.
Indtil nu har vi stået på, at HTML kun bruges til at definere, hvad hvert element er, og ikke hvordan elementet ser ud. Med indførelsen af style attributten skrider den konvention, og det bliver uklart, hvad der er markup, og hvad der er styling.

Løsningen på begge problemer er at bruge CSS, som står for Cascading Style Sheets. CSS er et sprog i sin egen ret, som udelukkende bruges til styling af HTML-dokumenter. Som vi skal se nu, så giver CSS os en masse smarte og effektive måder at style vores HTML-dokument på.

CSS er metainformation om HTML-dokumentet, og derfor hører det til i HTML-dokumentets <head></head>-element. For at fortælle browseren, at der er tale om styling med CSS bruges <style></style>-elementet.

HTML + CSS<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8">
		<title>Mit første HTML-dokument</title>
		<style>
			p {
				color: blue;
				font-family: 'Times New Roman';
				font-size: 50px;
				margin-left: 100px;
				width: 300px; 
				height: 200px;
				border: 3px solid;
				border-color: red;
			}
		</style>
	</head>

	<body>
		<p>Denne tekst er stylet ved hjælp af CSS</p>
	</body>
</html>

Øvelse 5

Eksperimenter dig frem med koden ovenfor. Prøv for eksempel at svare på følgende spørgsmål:

Kan du gøre den røde kasse til et kvadrat?
Kan du få teksten til at stå på én linje men centreret?
Kan du skubbe kassen helt ud i højre side af skærmen?

Lad os bryde CSS koden ovenfor ned, så vi forstår alle delene.

CSS
<selector> {
	<property1>: <value1>;
	<property2>: <value2>;
	<property3>: <value3>;
}

<selector> angiver hvilken type af elementer, der skal påvirkes af den efterfølgende styling. Alle elementer af den type bliver påvirket. <property> angiver navnet på den egenskab, der skal styles, og <value> angiver den værdi som egenskaben skal have. Sammenlign selv med eksemplet ovenfor.

Ideen er nu, at hvert HTML-element kan styles ved hjælp af sin selector. Vil man for eksempel gerne have at overskrifter med <h1> er røde, overskrifter med <h2> er blå og brødtekst med <p> er grøn, kan det opnås på følgende måde.

CSS<style>
	h1 {
		color: red;
	}

	h2 {
		color: blue;
	}

	p {
		color: green;
	}
</style>

4.3 Properties

I dette afsnit vil vi se nærmere på udvalgte properties. Der findes et hav af forskellige properties, og vi vil kun kigge på enkelte af dem. Lad os begynde med at liste dem, vi har set i forbindelse med tekst.

color angiver tekstens farve og tager værdier såsom blue eller #c1d4f0 (color hex).
font-family angiver tekstens skrifttype og tager værdier såsom 'Times New Roman' eller 'Verdana'.
font-size angiver tekstens størrelse og tager værdier såsom 20px, 3em eller 2cm.

Alle HTML-elementer kommer desuden med følgende properties:

padding
border
margin
width
height

Som alle tager værdier såsom 20px, 3em, 2cm eller auto. Værdien auto overlader det til browseren at bestemme den pågældende property. Nedenstående figur forklarer, hvordan disse properties er relaterede til hinanden.

Det er korrekt, at alle HTML-elementer har width og height properties, men vi kan kun styre disse for elementer, der vises som block-elementer. Block-elementer er de HTML-elementer, der begynder en ny linje, og for eksempel er <p></p> og < h1></h1> block-elementer. Omvendt kaldes HTML-elementer, der ikke begynder en ny linje, for inline-elementer. Eksempler på inline-elementer er <a></a> og <b></b>. Inline-elmenter har samme width og height som deres indhold (typisk tekst).

4.4 Selectors

CSS er et stærkt redskab til styling, men indtil videre har vi kun kigget på at ændre style for alle HTML-elementer af samme type på en gang. Der er flere muligheder for at vælge de HTML-elementer, som man gerne vil style. Den selector vi allerede har set kaldes the element selector.

The element selector vælger alle elementer med et specifikt navn, for eksempel p eller h1.
The class selector vælger alle elementer med en specifik værdi af class-attributen, for eksempel alle elementer med class="minStyle".
The universal selector vælger alle HTML-elementerne i dokumentet og angivet med *.

The class selector spiller en særligt interessant rolle. Den giver mulighed for at give forskellige HTML-elementer samme style ved hjælp af class-attributen. Lad os se et eksempel.

<!DOCTYPE html>
<html>
	<head>
		<style>
			* {
				font-family: 'Arial';
			}

			h2 {
				color: blue;
			}

			.myClass {
				color: red;
			}
		</style>
	</head>
	<body>
		<h1 class="myClass">Overskrift h1 med style fra .myClass selectoren</h1>
		<h2>Overskrift h2 med style fra h2 selectoren</h2>
		<p>Al tekst får sin skrifttype fra universal selectoren</p>
	</body>
</html>

Øvelse 6

Tag udgangspunkt i koden ovenfor, og besvar følgende spørgsmål ved at redigere din egen kode:

Kan et element godt få styling af flere forskellige selectors?
Kan et element have flere end én class?
Hvad sker der, hvis to forskellige selectors giver ét element to forskellige værdier til den samme property?

4.5 Divisioner

Det bliver lettere at style sit HTML-dokument, hvis man deler det op i mindre dele og tager stilling til hver del for sig. Det kan man gøre ved at inddele sit dokument i divisions med tagget <div></div>, give hver division en class og til sidst passende styling med class selectors.

Lad os for eksempel forestille os, at vores HTML-dokument skal være en hjemmeside, der består af tre dele:

En menu i toppen af siden, som skal have en mørk farve, men tekstfarven skal være lys (så man kan læse den)
En sektion i midten, hvor sidens indhold skal være. Det er grimt, når indholdet på siden er helt ude til venstre, så vi vil gerne have lige margin i begge sider.
En lille bar i bunden, hvor vi kan indsætte kontaktoplysninger.

Det kan laves ved hjælp af <div></div>-elementer. Husk at man kan tænke på alle HTML-elementer som bokse med width, height, margin, border og padding. Her kommer et forslag til en side der opfylder ovenstående.

Øvelse 7

Inden du trykker på "preview"-knappen i eksemplet nedenfor, skal du læse koden og forsøge at visualisere, hvad du forventer at se. Her får du lidt hjælp: Vi har brugt facebooks farveskema til at give farver til de forskellige sektioner. Farverne er som følger:

#f7f7f7 er en let grå.
#3b5998 er facebooks karakteristiske blå farve.
#dfe3ee er den meget lyse blå farve, som facebook bruger til tekst på mørk baggrund.

HTML + CSS<!DOCTYPE html>

<html>	
	<head>
		<meta charset="utf-8">
		<title>Mit første HTML-dokument</title>
		<style type="text/css">

			body {
				background: #f7f7f7;
				margin: 0;
				padding: 1cm;
			}

			.topMenu {
				background: #3b5998;
				padding: 1cm;
				color: #dfe3ee;
				font-size: 20px;
				height: 20px;
				text-align: center;
				width: 100%;
				margin: auto;
			}

			.content {
				background: white;
				padding: 1cm;
				width: 60%;
				margin: auto;
				height: 1000px;
			}

			.footer {
				background: #3b5998;
				color: #dfe3ee;
				padding: 1cm;
				height: 100px;
				text-align: center;
				width: 100%;
				margin: auto;
			}

			a {
				border: 1px solid #dfe3ee;
				padding:0.5cm;
				color: #dfe3ee;
				margin: 0.5cm;
			}
			
		</style>
	</head>
	<body>
		
		<div class="topMenu">
			<a href="#">Forsiden</a>
			<a href="#">Kontakt</a>
			<a href="#">Shop</a>
			<a href="#">Job</a>
		</div>

		<div class="content">
			<h1>Velkommen til min side</h1>
			<p>Det er dejligt at du har lyst til at læse med.</p>
		</div>

		<div class="footer">
			<p>Anders Friis</p>
			<p>af@talentcamp.dk</p>
			<p>22 16 55 90</p>
		</div>
</html>

Ved hjælp af <style></style>-elementet kan vi let lave alt det styling, som vi før lavede på de enkelte elementer. Tilmed er koden mere overskuelig, når styling foregår i <head></head>, mens class atributten angiver, hvad der er tænkt med hvert element.

4.6 Stylesheets

Selvom det gjorde koden mere letlæselig at rykke stylingen til <head></head>, så skal vi tage et sidste skridt i den retning, som samtidig også definitivt adskiller HTML og CSS fra hinanden. Vi skal nemlig udskille CSS-koden i sin egen fil. Det gøres ved at lave en CSS-fil og kopiere indholdet af <style></style> dertil og derefter linke til CSS-filen i HTML-dokumentets <head></head>. Det kan gøres således:

HTML (index.html)<html>	
	<head>
		<link rel="stylesheet" href="myStylesheet.css">
	</head>
	<body>
		
		<div class="topMenu">
			<a href="#">Forsiden</a>
			<a href="#">Kontakt</a>
			<a href="#">Shop</a>
			<a href="#">Job</a>
		</div>

		<div class="content">
			<h1>Velkommen til min side</h1>
			<p>Det er dejligt at du har lyst til at læse med.</p>
		</div>

		<div class="footer">
			<p>Anders Friis</p>
			<p>af@talentcamp.dk</p>
			<p>22 16 55 90</p>
		</div>
</html>

CCS (myStylesheet.css)body {
	background: #f7f7f7;
	margin: 0;
	padding: 1cm;
}

.topMenu {
	background: #3b5998;
	padding: 1cm;
	color: #dfe3ee;
	font-size: 20px;
	height: 20px;
	text-align: center;
	width: 100%;
	margin: auto;
}

.content {
	background: white;
	padding: 1cm;
	width: 60%;
	margin: auto;
	height: 1000px;
}

.footer {
	background: #3b5998;
	color: #dfe3ee;
	padding: 1cm;
	height: 100px;
	text-align: center;
	width: 100%;
	margin: auto;
}

a {
	border: 1px solid #dfe3ee;
	padding:0.5cm;
	color: #dfe3ee;
	margin: 0.5cm;
}

<link>-elementet har kun et start-tag og gør det muligt at linke til andre filer fra vores HTML-dokument. rel atributten angiver hvilken relation HTML-dokumentet har til den linkede fil, og href atributten angiver filens placeringen.

Udover at gøre koden lettere at læse, så giver eksterne CSS-filer også den fordel, at det er let at dele sin styling med andre. Man kan fx gøre sin CSS-fil tilgængelig på WWW, og så kan andre linke direkte til den i deres HTML-dokumenter.