Skapa en webbplats på rätt sätt, från grunden

"Pragmatisk.se är ett projekt finansierat av Internetstiftelsen. Projektets syfte är att ge ramar till ämnet webbdesign, och specifikt gymnasiekursen webbdesign. I ett antal steg kommer du följa en process som är konkret och enkelt utformad från start till slut, successivt lär du dig de delar som krävs för att ta fram en god webbplats från grunden."

Inledning

Projektets specifika syfte är att ge ramar till gymnasiekursen webbdesign, en slags kvalitetssäkring av innehållet som används i kurserna. Det är tänkt som lika mycket stöd för elever som lärare.

Namnet Pragmatisk hämtades från filosofin pragmatism som i Wikipedia beskrivs så som; "Ett påståendes mening, en idé, metod, teori eller hypotes verifieras enligt pragmatismen i dess konkreta konsekvenser, dess tillämpbarhet, funktion och användbarhet."

Innhållet är konkret och avskalat för att vara en introduktion till just HTML och CSS, två viktiga grunder för att arbeta med att utveckla webbplatser. Stor vikt har lagts för att förmedla förståelse för hur innehåll och design hänger samman.

Pragmatisk.se består av två delar, denna sidan med steg-för-steg och en referens-wiki med "säkrat" innehåll vilket innebär att funktioner som är föråldrade inte finns med (enligt W3C HTML5 utkast).

Går du i skolan?

Webbstjärnans logotyp Webbstjärnan är en tävling i webbpublicering för svenska grundskole- och gymnasieelever. De gör webbplatser av valfritt skolarbete och första priset är 20 000 kronor. Det är .SE som står bakom tävlingen.

Hjälp till

Du är en del av det här projektet, best-practice och nya direktiv från standarder pågår ständigt, har du kunskapen och viljan kan du göra viktiga avtryck.

Fyll på, korrigera och se över Wikin
Påverka innehållet i steg-för-steg-delen
Nyttja och sprid den här resursen!

Författare

Projektet genomfördes av Duva tillsammans med Lidköpings kommun, med stöd från Internetfonden och sponsorer.

Robert Lidberg, steg-för-steg
Anders Olofsson, Wiki
Rasmus Johansson, Wiki

Innehållsförteckning

Programmeringspråk för utseende, CSS

Förberedelser

Det krävs inga speciella programvaror för att börja bygga en webbplats, ett textredigeringsprogram och en webbläsare räcker gott.

Välj den webbläsare och textredigerare som passar dig. Var uppmärksam på om du har en gammal webbläsare som exempelvis Internet Explorer 6 eller 7, byt eller uppgradera då.

Textredigerare

För Windows

Anteckningar som finns med i Windows
Notepad++, Notepad2

För Mac

Textredigerare som finns med i Mac OS X
TextMate, Smultron eller Coda

Webbläsare

En webbplats två beståndsdelar

Det finns två övergripande beståndsdelar i en webbplats, innehåll och utseende. Skillnaden mellan de båda är viktiga att förstå.

Innehåll

Med innehåll menas själva datan, det är rubriker, brödtext, listor, bilder etc. Innehållet är alltid det primära i en webbplats, anpassa inte innehållet efter utseendet, utan tvärtom.

Som exempel är text där viktiga delar är fetmarkerade inte utseende, utan har en funktion att betona något viktigt i innehållet.

Programmeringspråket för innehållet är HTML

Utseende

Utseende är som en slags mask du lägger på innehållet för att strukturera innehållet visuellt, du styr val av teckensnitt för rubriker, färg på länkar bakgrundsbild och struktur.

Som exempel är kursiv text, som inte har som funktion att betona något i innehållet, bara något som rör utseende/designen.

Programmeringspråket för utseendet är CSS

Programmeringspråk för innehåll

Introduktion till HTML

För innehåll används ett språk kallat HTML, som du markerar olika delar av innehåll för att förklara vad det är, som med en märkpenna. Syftet med att markera innehållet är för att webbläsare, sökmotorer och skärmläsare ska kunna särskilja exempelvis en rubrik från brödtext.

Innehållet markeras med en tagg som skrivs ut före och efter innehållet, för exempelvis en huvudrubrik används taggen <h1>. 'h' står för heading och '1' för att det är en huvudrubrik, för underrubriker används <h2>, <h3> osv. "Pilarna" (vinkelparanteser) före och efter <taggen> finns där för att markera att det är just en tagg.

De taggar som markerat något innehåll måste "stängas", det innebär att man anger när taggen ska avslutas. För att markera ut en huvudrubrik ser en komplett tagg för en huvudrubrik ut såhär; <h1>.SE är en oberoende allmännyttig organisation</h1>. Notera att den sista taggen har ett snedstreck /, det anger att det är taggens avslut.

Det finns taggar för olika typer av innehåll, vi kommer visa de mest viktiga och frekvent använda. Standarder styr vilka taggar som finns och hur de ska använda.

Grunden i ett HTML-dokument

Ett HTML-dokument är som vilket annat text-dokument som helst, men som förutom innehållet, består av HTML-taggar. Dokumentets filändelse är .htm eller .html och kan öppnas med valfritt textredigeringsprogram.

För att webbläsaren ska veta att det är ett HTML-dokument den läser krävs ytterligare HTML-taggar som ger struktur åt dokumentet. I exemplet till höger finns vår huvudrubrik tillsammans med de taggar som krävs för att webbläsaren ska känna igen dokumentet som HTML.

Notera hur och var varje tagg öppnas samt stängs. HTML-koden är intenderad (indragen) då en tagg innehåller fler taggar.

Mitt första HTML-dokument


<!DOCTYPE html>
<html lang="sv">
	<head>
		<meta charset="utf-8">
		<title>Mitt första HTML-dokument</title>
	</head>
	<body>

		<h1>.SE är en oberoende allmännyttig organisation</h1>

	</body>
</html>

<!DOCTYPE html> säger till webbläsare att det är dokument-typ HTML
<html lang="sv"> öppnar upp dokumentet och anger med attributet 'lang' att det är på svenska (sv)
<head> öppnar upp dokumentets egenskaper
<meta charset="utf-8"> som ligger inom <head> anger att teckenuppsättning UTF-8 ska användas, i den finns Å Ä Ö med. (Notera att denna inte markerar något innehåll, och då inte stängs)
<title> anger dokumentets titel, syns bland annat i webbläsarens sidhuvud eller i sökresultat från sökmotorer
<body> öppnar dokumentets "kropp" där allt innehåll finns, som du ser finns huvudrubriken du stött på tidigare

Ditt första HTML-dokument

Mitt första HTML-dokument


<!DOCTYPE html>
<html lang="sv">
	<head>
		<meta charset="utf-8">
		<title>Mitt första HTML-dokument</title>
	</head>
	<body>

		<h1>.SE är en oberoende allmännyttig organisation</h1>

	</body>
</html>

Markera och kopiera HTML-koden till vänster
Klistra in den i en textredigerare
Spara dokumentet som HTML med filändelse .html
Öppna dokumentet i din webbläsare

Ytterligare 3 taggar

Med <h1> färskt i minnet kommer här tre användbara taggar till. Vi fyller på med både tagg och innehåll i det dokument du redan har för enkelheten skull.

Tagg	Förkortning av	Svensk översättning
`<h2>`	Heading 2	Rubrik 2
`<p>`	Paragraph	Stycke
`<a href="">`	Anchor	Länk

Mitt första HTML-dokument


<!DOCTYPE html>
<html lang="sv">
	<head>
		<meta charset="utf-8">
		<title>Mitt första HTML-dokument</title>
	</head>
	<body>

		<h1>.SE är en oberoende allmännyttig organisation</h1>
		<p>.SE (Stiftelsen för Internetinfrastruktur) är en oberoende allmännyttig organisation som verkar för positiv utveckling av Internet i Sverige.</p>
		
		<h2>Internetutveckling</h2>
		<p>I enlighet med stiftelsens <a href="https://www.iis.se/om-se/urkund-och-stadgar">urkund och stadgar</a> gynnar vi på olika sätt Internetutvecklingen i Sverige. Det är inom denna verksamhet .SE investerar det överskott som genereras av registreringsavgifterna för domännamn.</p>
		

	</body>
</html>

Vad då href="" ?

Taggar kan ha attribut, det är som egenskaper man kan ge taggen. Vissa taggar, som exempelvis <a>-taggen kräver att man skriver med ett attribut, href.

href är en förkortning av 'hypertext reference', tänk det som adress istället, som länken ska peka till. Följt av href är ett likamed-tecken (=) och två citationstecken ("") där värdet för attributet skrivs in, <a href="https://www.iis.se/om-se/urkund-och-stadgar">urkund och stadgar</a>.

Det är viktigt att alla tecken och mellanslag finns på rätt ställe, annars läses dokumentet fel.

Tagg	Attribut-krav	Exempelvärde
`<h1>`
`<h2>`
`<p>`
`<a href="">`	href	https://www.iis.se/

Tips! Kom ihåg att alltid skriva HTML-kod med små bokstäver. Använd också indentering (indrag) för att få en bra överblick och kod som andra lätt kan läsa.

Att göra en punkt- eller nummerlista i HTML

I HTML kan du göra två typer av listor, ordnad (1, 2, 3) eller oordnad (punktlista).

Oordnad lista (punktlista)


<ul>
	<li>Första punkten</li>
	<li>Andra punkten</li>
	<li>Tredje punkten</li>
</ul>

Första punkten
Andra punkten
Tredje punkten

Ordnad lista (numrerad)


<ol>
	<li>Första punkten</li>
	<li>Andra punkten</li>
	<li>Tredje punkten</li>
</ol>

Första punkten
Andra punkten
Tredje punkten

<ol> står för 'ordered list', och <ul> för 'unordered list'. <li> används för varje punkt på någon av dessa två typer av listor. Inte någon annanstans används <li>, förutom inom listor.

OBS! Tänk noga över vilken list-typ som passar bäst för ditt innehåll. Skillnaden mellan oordnad och ordnad lista kan spela stor roll för hur ditt innehåll uppfattas.

Du känner nu till 7 taggar

Här kommer en snabb genomgång.

Tagg	Förkortning av	Svensk översättning	Attribut-exempel
`<h1>`	Heading 1	Rubrik 1
`<h2>`	Heading 2	Rubrik 2
`<p>`	Paragraph	Stycke
`<a href="">`	Anchor	Länk	href="https://www.iis.se/om-se/urkund-och-stadgar"
`<ol>`	Ordered list	Ordnad lista
`<ul>`	Unordered list	Ordnad lista
`<li>`	List item	Listpunkt

Avstämning

Med den kod du hade sedan tidigare, och en oordnad lista, bör ditt dokument se ut så här.

Mitt första HTML-dokument


<!DOCTYPE html>
<html lang="sv">
	<head>
		<meta charset="utf-8">
		<title>Mitt första HTML-dokument</title>
	</head>
	<body>

		<h1>.SE är en oberoende allmännyttig organisation</h1>
		<p>.SE (Stiftelsen för Internetinfrastruktur) är en oberoende allmännyttig organisation som verkar för positiv utveckling av Internet i Sverige.</p>
		
		<h2>Internetutveckling</h2>
		<p>I enlighet med stiftelsens <a href="https://www.iis.se/om-se/urkund-och-stadgar">urkund och stadgar</a> gynnar vi på olika sätt Internetutvecklingen i Sverige. Det är inom denna verksamhet .SE investerar det överskott som genereras av registreringsavgifterna för domännamn.</p>
		
		<ul>
			<li>.SE ansvarar för Internets svenska toppdomän .se</li>
			<li>.SE ansvarar för administration och teknisk drift av det nationella domännamnregistret</li>
			<li>I enlighet med stiftelsens urkund och stadgar gynnar vi på olika sätt Internetutvecklingen i Sverige.</li>
		</ul>

	</body>
</html>

Resultatet

.SE är en oberoende allmännyttig organisation

.SE (Stiftelsen för Internetinfrastruktur) är en oberoende allmännyttig organisation som verkar för positiv utveckling av Internet i Sverige.

Internetutveckling

I enlighet med stiftelsens urkund och stadgar gynnar vi på olika sätt Internetutvecklingen i Sverige. Det är inom denna verksamhet .SE investerar det överskott som genereras av registreringsavgifterna för domännamn.

.SE ansvarar för Internets svenska toppdomän .se
.SE ansvarar för administration och teknisk drift av det nationella domännamnregistret
I enlighet med stiftelsens urkund och stadgar gynnar vi på olika sätt Internetutvecklingen i Sverige.

Två typer av taggar, inline och block

Det går att sortera in alla taggar i två grupper, inline och block. Innehåll som rubriker, listor och brödtext ska visas på en egen rad, de här taggarna benämns som block-element. På namnet går det att höra hur det fungerar, det lägger som en block på sidan och tar upp hela bredden, från sida till sida.

Taggen <a> som vi använder för att länka text är tydligt inte ett block-element, där vill vi att det som kommer efter taggen ska lägga sig bredvid, då är det ett inline-element. Du ser det tydligt i ditt exempel. Som tur är behöver du inte bry dig om de är inline eller block, det är satt automatiskt.

Så här hade ditt dokument sett ut om rubriker, brödtext och listor inte var block-element;

.SE är en oberoende allmännyttig organisation

.SE (Stiftelsen för Internetinfrastruktur) är en oberoende allmännyttig organisation som verkar för positiv utveckling av Internet i Sverige.

Internetutveckling

.SE ansvarar för Internets svenska toppdomän .se
.SE ansvarar för administration och teknisk drift av det nationella domännamnregistret
I enlighet med stiftelsens urkund och stadgar gynnar vi på olika sätt Internetutvecklingen i Sverige.

Lägga in bilder

För att lägga in en bild använder vi taggen <img> som är förkortning av 'image', bild på svenska. Den kräver att vi har med två attribut, src (source) och alt (alternative).

Lägga in en bild


<img src="logo.png" alt=".SE logotyp">

I första attributet, src (källa) skriver du in bildens sökväg, namn och filändelse. I exemplet ovan ligger bilden logo.png i samma mapp som html-dokumentet. Du kan spara ned .SE logotyp som vi använder i exemplet.

I andra attributet, alt (alternativ), beskriver du bilden i text. Det här är för att sökmotorer, skärmläsare och andra "maskiner" ska kunna "se" bilden.

När bilden visas i webbläsaren är den i originalstorlek, ev. förminskning gör du i ett bildbehandlingsprogram.

<img> är ett inline-element, vilket innebär att om du exempelvis inkluderar bilden i ett textstycke (<p>) så hamnar texten före och/eller efter bilden.

Lägg in bilden i ditt dokument

Mitt första HTML-dokument


<!DOCTYPE html>
<html lang="sv">
	<head>
		<meta charset="utf-8">
		<title>Mitt första HTML-dokument</title>
	</head>
	<body>

		<h1>.SE är en oberoende allmännyttig organisation</h1>
		<p><img src="logo.png" alt=".SE logotyp"> .SE (Stiftelsen för Internetinfrastruktur) är en oberoende allmännyttig organisation som verkar för positiv utveckling av Internet i Sverige.</p>
		
		<h2>Internetutveckling</h2>
		<p>I enlighet med stiftelsens <a href="https://www.iis.se/om-se/urkund-och-stadgar">urkund och stadgar</a> gynnar vi på olika sätt Internetutvecklingen i Sverige. Det är inom denna verksamhet .SE investerar det överskott som genereras av registreringsavgifterna för domännamn.</p>
		
		<ul>
			<li>.SE ansvarar för Internets svenska toppdomän .se</li>
			<li>.SE ansvarar för administration och teknisk drift av det nationella domännamnregistret</li>
			<li>I enlighet med stiftelsens urkund och stadgar gynnar vi på olika sätt Internetutvecklingen i Sverige.</li>
		</ul>

	</body>
</html>

Men vart ska den ligga?

Är du osäker på vart du ska lägga innehållet, utgå från hur en tidning eller bok är utformad.

I HTML-koden ovan är bilden placerad inom ett textstycke (<p>), bilden hör alltså ihop med innehållet i det textstycket.

Det finns två enkla regler för vart du kan placera olika element;

Logik, exempelvis har du troligen aldrig sett en lista i en rubrik.
Block-element kan inte läggas i inline-element, bara tvärt om.

Fel ~~<p><h1>En rubrik</h1> Brödtext</p>~~
Rätt <h1>En rubrik</h1> <p>Brödtext</p>

Fel ~~<p>Brödtext med <a href="http://iis.se/">länk</p></a>~~
Rätt <p>Brödtext med <a href="http://iis.se/">länk</a></p> (Avsluta taggar i rätt ordning)

Så fungerar mått

Bilden logo.png är 100 pixlar (px) bred och 43 pixlar hög. I tryck används centimeter, millimeter eller tum, också för webbplatser finns fler mått än pixlar; em, pt och procent. Så vad är skillnaden? En enkel regel för textstorlek är 1em = 12pt = 16px = 100%. I exemplen håller vi oss till pixlar.

Exempel, 100 pixlar bred.
Exempel, 200 pixlar bred.
Exempel, 120 pixlar bred.
Exempel, 340 pixlar bred.
Exempel, 2 pixlar bred.
Exempel, 1 em bred.
Exempel, 5 em bred.
Exempel, 12 pt bred.
Exempel, 16 px bred.
Exempel, 50% (av 340 px) bred.

Bildexempel

100x90 avser 100 pixlar bred och 90 pixlar hög.

Boxmodellen

Boxmodellen förklarar hur de olika ytorna kring ett blockelement fungerar. Som du säkert sett i ditt exempeldokument finns det marginal kring rubrikerna. För att ta ytterligare ett exempel, <p>, textstycke. Denna består av fyra ytor;

Margin (marginal) ger mellanrum mellan textstycket och andra element
Border är en kantlinje man kan sätta runt ett element
Padding ger utrymme mellan kantlinjen (border) och själva innehållet
Innehållsytan där innehållet är placerat, texten i detta fall. Den har höjd och bredd.

Varje yta har fyra sidor; toppen, höger, botten och vänster.

margin Top Right Bottom Left

Border Top Right Bottom Left

Padding Top Right Bottom Left

width & height

En illustration av boxmodellen

Standardvärden

Vissa taggar har redan från början marginaler, padding mm. De finns där för att sidan ska vara lättläslig utan något utseende (CSS).

Endast block-element nyttjar boxmodellen, inline-element som exempelvis <a> nyttjar inte boxmodellen.

margin 21 px 0 px 21 px 0 px

Border 0 px 0 px 0 px 0 px

Padding 0 px 0 px 0 px 0 px

width & height

<h1> har margin som medföljande värde

margin 16 px 0 px 16 px 0 px

Border 0 px 0 px 0 px 0 px

Padding 0 px 0 px 0 px 40

width & height

<ul> har både margin och padding

Några exempel för att förstå boxmodellen

Till höger finns några exempel där vi ändrat utseendet, jämför och se hur boxmodellen påverkas.

Att ändra marginal, padding mm. är förändringar på utseendet och inte innehållet, du kommer i nästa kapitel få veta hur du ändrat utseendet med hjälp av CSS.

Notera! Boxmodellen läses klockvis, från topp till höger, ned och vänster.

.SE (Stiftelsen för Internetinfrastruktur) är en oberoende allmännyttig organisation som [...]

Ovan är ett textstycke (<p>), den grå bakgrunden finns där för att du lättare ska kunna se marginalerna kring textstycket.

margin 15 15 15 15

Border (röd) 1 1 1 1

Padding 10 10 10 10

288 x 91

.SE (Stiftelsen för Internetinfrastruktur) är en oberoende allmännyttig organisation som [...]

Textstycket (<p>) till vänster är identisk med den vänstra, förutom kantlinje och ett margin.

margin 15 15 40 15

Border (röd) 3 1 3 3

Padding 10 10 10 10

width & height

Strukturera innehåll i kolumner

Precis som i en tidning kan du sortera innehåll i kolumner (block) som går att placera, det har stora likheter med hur man arbetar med Lego®-klossar. För att skapa ett block används taggen <div>.

Exempel med div


<div>
	<h2>Internetutveckling</h2>
</div>

Ovan är ett block med en underrubrik. Till höger är tre div'ar, varav en av div'arna ligger i en annan div. Strukturen är alltså följande;

Div 1
Div 2
- Div 3

Exempel med div


<div>
	<h1>.SE är en oberoende allmännyttig organisation</h1>
	<p><img src="logo.png" alt=".SE logotyp"> .SE (Stiftelsen för Internetinfrastruktur) är en oberoende allmännyttig organisation som verkar för positiv utveckling av Internet i Sverige.</p>
</div>
<div>
	<h2>Internetutveckling</h2>
	<p>I enlighet med stiftelsens <a href="https://www.iis.se/om-se/urkund-och-stadgar">urkund och stadgar</a> gynnar vi på olika sätt Internetutvecklingen i Sverige. Det är inom denna verksamhet .SE investerar det överskott som genereras av registreringsavgifterna för domännamn.</p>

	<div>
		<ul>
			<li>.SE ansvarar för Internets svenska toppdomän .se</li>
			<li>.SE ansvarar för administration och teknisk drift av det nationella domännamnregistret</li>
			<li>I enlighet med stiftelsens urkund och stadgar gynnar vi på olika sätt Internetutvecklingen i Sverige.</li>
		</ul>
	</div>
</div>

Sammanfattning av HTML-kapitlet

HTML är programmeringspråket för att markera innehåll
HTML-språket består av taggar för att markera olika typer av innehåll som brödtext, rubriker, länkar och listor
Markerar taggen en sektion i innehållet öppnas den före (<h1>) och stängs efteråt (</h1>), för att markera avslut
Taggar som inte markerar innehåll, exempelvis <img> som inkluderar en bild, har ingen stängning eftersom den inte markerar något innehåll
Attribut är egenskaper som kan sättas på elementet (<a href="">, <img src="" alt="">), för vissa taggar finns det krav på attribut

Vissa taggar får bara finnas inom en annan tag, <li> är en sådan tagg, den får bara finnas inom <ul> och <ol>
Det finns block och inline-element
Du kan lägga in bilder med taggen img, du känner också till att den kräver två attribut; src och alt
Grundläggande mått som pixlar (px)
Logiken i boxmodellen och att några taggar redan har margin eller padding från början
Grunden med hur divar fungerar

Tagg	Förkortning av	Attribut	Inline/Block	margin, border, padding (upp, höger, ned, vänster)
`<h1>`	Heading 1		Block	margin: 21px 0px 21px 0px
`<h2>`	Heading 2		Block	margin: 19px 0px 19px 0px
`<p>`	Paragraph		Block	margin: 16px 0px 16px 0px
`<a>`	Anchor	`href`	Inline
`<ol>`	Ordered list		Block	margin: 16px 0px 16px 0px padding: 0px 0px 0px 40px
`<ul>`	Unordered list		Block	margin: 16px 0px 16px 0px padding: 0px 0px 0px 40px
`<li>`	List item		Block
`<img>`	Image	`src` `alt`	Inline

Programmeringspråk för utseende

Introduktion till CSS (stilmall)

Till skillnad mot HTML som bara handlar om innehåll, är CSS enbart om utseende. Det innehåll vi markerat med hjälp av HTML kan vi nu ändra utseende för, exempelvis textstorlek för huvudrubriken <h1>

CSS är till språket olikt HTML, istället för att markera innehåll kommer vi matcha och koppla ihop rätt utseende med rätt tagg (element). Tänk dig CSS som ett regelverk för hur saker och ting ska se ut, och precis som med HTML skriver du CSS-reglerna i ett vanligt textdokument och sparar med .css som filändelse.

Så här kan en CSS-regel ut; h1 {font-size: 12px;}. Den ändrar alla huvudrubrikers (h1) textstorlek till 12px.

I början av en CSS anger vi vilka element som regeln ska gälla för, i det här fallet är det för huvudrubriken h1. Det följs av en "måsvinge" (krullparantes) { som har till funktion att markera starten för CSS-reglerna, och i slutet stänga den }, vilket påminner om logiken i HTML om att stänga och öppna taggar.

Exemplet har en CSS-regel; font-size, som är en av många egenskaper i CSS, denna ändrar storleken på texten. Efter egenskapen font-size markeras avslutet på den med ett kolon, som är skiljetecken mellan egenskap och värde, 12px. Värdet avslutas med semikolon ; som gör det möjligt att fylla på med fler CSS-egenskaper efteråt.

Koppla ihop CSS med HTML

Vi återgår till ett tidigare exempel som bara innehåller en huvudrubrik, spara detta dokument som index.html, och spara CSS-dokumentet med den tidigare regeln (h1 {font-size: 12px;}) som style.css. Lägg style.css i samma katalog som index.html.

index.html


<!DOCTYPE html>
<html lang="sv">
	<head>
		<meta charset="utf-8">
		<title>Mitt första HTML-dokument</title>
		
		<link rel="stylesheet" href="style.css">
	</head>
	<body>

		<h1>.SE är en oberoende allmännyttig organisation</h1>

	</body>
</html>

style.css


h1 {font-size: 12px;}

Vi har lagt till en rad i HTML-dokumentet, <link rel="stylesheet" href="style.css">, den kopplar ihop index.html med style.css. Taggen link används till för att bland annat länka in stilmallar, attributet rel beskriver vad vi länkar in (stilmall) och href, som du stött på innan, visar sökvägen till filen style.css.

Matcha CSS med rätt HTML-element

Nu när de två dokumenten är sammanlänkade kommer HTML-dokumentet hämta reglerna från CSS-dokumentet.

index.html


<!DOCTYPE html>
<html lang="sv">
	<head>
		<meta charset="utf-8">
		<title>Mitt första HTML-dokument</title>
		
		<link rel="stylesheet" href="style.css">
	</head>
	<body>

		<h1>.SE är en oberoende allmännyttig organisation</h1>

	</body>
</html>

style.css


h1 {font-size: 12px;}

.SE är en oberoende allmännyttig organisation

Utan CSS-regeln:

.SE är en oberoende allmännyttig organisation

Med hjälp av CSS-regeln har vi ändrat textstorleken från standard 32px till 12px. En huvudrubrik ( <h1>) är från början 32px, det är ett värde den har med sig, precis som standard-marginalerna vi gick igenom tidigare i boxmodellen.

Regeln för h1 kommer matcha alla h1-or i HTML-dokument
Textstorleken på alla h1-or minskas till 12 pixlar

Färger

För att färgsätta innehåll och grafiska element, som text, länkar, linjer, bakgrunder mm. används ett hexadecimalt värde, RGB eller namn. Hex och RGB anger en kombination för (R)öd (G)rönt och (B)lått för att få rätt färg.

Egenskap	Värde
`color:`	#ffffff
`color:`	rgb(255,255,255);
`color:`	white

RGB kan också skrivas som procent, 255 = 100%. Alltså är rgb(255,255,255); samma som rgb(100%,100%,100%);

I Adobe Photoshop får du både det hexadecimala värdet (#ffffff) och RGB-värdet (255,255,255).

Färgexempel

Färgtabell med några namn och värde. För nyanser finns inget namn-värde att använd.

Namn-värde	Hex-värde	RGB-värde	Exempel
black	#000000	rgb(255,0,0)	`h1 {color: black;}`
white	#ffffff	rgb(255,255,255)	`h1 {color: #ffffff;}`
red	#ff0000	rgb(255,0,0)	`p {color: red;}`
purple	#800080	rgb(128,0,128)	`li {color: rgb(128,0,128);}`
green	#008000	rgb(0,128,0)	`h2 {color: green;}`
lime	#00ff00	rgb(0,255,0)	`a {color: #00ff00;}`
yellow	#ffff00	rgb(255,255,0)	`p {color: #ffff00;}`
blue	#0000ff	rgb(0,0,255)	`h1 {color: rgb(0,0,255);}`

CSS exempel


h1 {color: red;}

.SE är en oberoende allmännyttig organisation

CSS exempel


h1 {color: #ffff00;}

.SE är en oberoende allmännyttig organisation

CSS exempel


h1 {color: rgb(128,0,128);}

.SE är en oberoende allmännyttig organisation

CSS exempel


h1 {color: #00ff00;}

.SE är en oberoende allmännyttig organisation

Flera regler och egenskaper

För att lägga till fler egenskaper till en och samma regel skriver du nästa egenskap direkt efter den första.

Flera egenskaper i samma regel

CSS exempel


h1 {color: #00ff00; font-size: 12px;}

Flera regler som matchar samma element

CSS exempel


h1 {color: #00ff00;}
h1 {font-size: 12px;}

Det är ingen skillnaden mellan de två exemplen ovan, resultatet blir det samma, men alternativet med en regel och två egenskaper är att föredra då den är kortare och lättare att läsa.

En naturlig process när man skriver CSS-regler är att ersätta värden, alltså "kollidera" egenskaper, där den sistnämnda alltid vinner.

Det första exemplet till höger har två regler som matchar samma element, och egenskapen font-size kolliderar. Den sista regeln övervinner den första då den kommer sist.

Exempel två har två regler, varav den första har två egenskaper som kolliderar. I den första regeln sätts först font-size till 32 pixlar, sedan till 10, och i sista regeln till 12.

I exempel tre finns två stycken regler som matchar två olika element, <p> och h3. De har alltså inte med varandra att göra.

CSS exempel 1


p {font-size: 32px; color: red;}
p {font-size: 12px;}

CSS exempel 2


p {font-size: 32px; font-size: 10px;}
p {font-size: 12px;}

CSS exempel 3


h3 {font-size: 22px;}
p {font-size: 12px;}

Tips! Också i CSS kan du använda indentering (indrag) för att få en bra överblick.

Fler CSS-egenskaper

Du känner till font-size och color, här är några fler användbara.

index.html


<h1>.SE är en oberoende allmännyttig organisation</h1>

<p><img src="logo.png" alt=".SE logotyp"> .SE (Stiftelsen för Internetinfrastruktur) är en oberoende allmännyttig organisation som verkar för positiv utveckling av Internet i Sverige.</p>
        
<h2>Internetutveckling</h2>
<p>I enlighet med stiftelsens <a href="https://www.iis.se/om-se/urkund-och-stadgar">urkund och stadgar</a> gynnar vi på olika sätt Internetutvecklingen i Sverige. Det är inom denna verksamhet .SE investerar det överskott som genereras av registreringsavgifterna för domännamn.</p>
        
<ul>
	<li>.SE ansvarar för Internets svenska toppdomän .se</li>
	<li>.SE ansvarar för administration och teknisk drift av det nationella domännamnregistret</li>
	<li>I enlighet med stiftelsens urkund och stadgar gynnar vi på olika sätt Internetutvecklingen i Sverige.</li>
</ul>

style.css


h1 {border-bottom: 1px solid #cccccc;}

img {
	border: 1px solid green;
	padding: 10px;
	margin: 10px 0 10px 0;
	}

h2 {color: #843232;}

li {font-weight: bold;}

Info! Vi har gjort radbrytningar i de CSS-regler som har flera egenskaper, det gör koden mer lättläst.

I exemplet har vi ändrat huvudrubriken, bilden, underrubriken och punkterna i punktlistan.

För dig är border, padding, margin och font-weight nya CSS-egenskaper.

.SE är en oberoende allmännyttig organisation

.SE (Stiftelsen för Internetinfrastruktur) är en oberoende allmännyttig organisation som verkar för positiv utveckling av Internet i Sverige.

Internetutveckling

.SE ansvarar för Internets svenska toppdomän .se
.SE ansvarar för administration och teknisk drift av det nationella domännamnregistret
I enlighet med stiftelsens urkund och stadgar gynnar vi på olika sätt Internetutvecklingen i Sverige.

Margin, Border, Padding samt width och height

margin, border, padding, width och height fungerar enligt box-modellen som vi tidigare gått igenom.

Med margin förändrar vi den yttre marginalen kring elementet
Anges border förändras kantlinjen
padding förändrar den "inre" marginalen, innanför border
width ändrar bredd
Och height höjden

margin 15 15 15 15

Border 1 1 1 1

Padding 10 10 10 10

288 x 91

Ändra flera värden

Eftersom det finns fyra sidor kan vi ändra alla fyra sidor till att ha olika värden. Därför kan vi ange fyra värden för margin, border och padding.

Du anger de efter varandra och de kommer läsas in klockvis, alltså första värdet är up (top), det andra höger (right), det tredje ned (bottom) och fjärde vänster (left)

En div är alltid osynlig, höjden bestäms utifrån höjden av innehållet. Bredden är 100%, om du inte använder width-egenskapen.

Margin

Margin CSS


div {margin: 10px 20px 10px 30px;}

margin 10 20 10 30

Border 0 0 0 0

Padding 0 0 0 0

0 x 0

Border

Border CSS


div {border: 1px solid blue;}

margin 0 0 0 0

Border 1 1 1 1

Padding 0 0 0 0

0 x 0

Padding

Padding CSS


div {padding: 15px 20px 10px 10px;}

margin 0 0 0 0

Border 0 0 0 0

Padding 15 20 10 10

0 x 0

Width

Margin CSS


div {width: 200px;}

margin 0 0 0 0

Border 0 0 0 0

Padding 0 0 0 0

200 x 0

Height

Border CSS


div {height: 90px;}

margin 0 0 0 0

Border 0 0 0 0

Padding 0 0 0 0

0 x 90

Sammanfattning av CSS-kapitlet

CSS är språket för att designa innehåll
Hur CSS-regler är uppbyggda
Koppla ihop HTML-dokumentet och CSS-filen med HTML link-taggen
Matcha CSS regel med rätt element

Färgsättning med bland annat hex-värde (#ffffff)
Hur det fungerar när CSS regler "tar ut" varandra
Vi gick igenom egenskaper som font-size och color
Återgick till boxmodellen och använde margin, border, padding mm.

Egenskap	Värde-exempel	Förklaring	Exempel
`font-size`	12px	Textstorlek	`h1 {font-size: 12px}`
`color`	#ffffff	Textfärg	`p {color: #000000}`
`border-bottom`	1px solid #000000	Kantlinje i nederkant	`img {border-bottom: 1px solid #000000}`
`border`	1px 2px 1px 2px	Kantlinje runt hela elementet	`h2 {border: 1px 2px 1px 2px;}`
`padding`	20px 10px 20px 15px	Marginal innanför kantlinjen	`h1 {padding: 12px}`
`margin`	40px	Marginal utanför kantlinjen	`h1 {margin: 20px}`
`font-weight`	bold/normal	Gör text fetstilt eller tunnare	`p {font-weight: bold}`