"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.

  1. Fyll på, korrigera och se över Wikin
  2. Påverka innehållet i steg-för-steg-delen
  3. 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



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

För Mac


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


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.


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.

  • <!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

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

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

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).

  • Första punkten
  • Andra punkten
  • Tredje punkten
  1. Första punkten
  2. Andra punkten
  3. 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.

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

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.

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).

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.

.SE logotyp

<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


Ä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;

  1. Logik, exempelvis har du troligen aldrig sett en lista i en rubrik.
  2. 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)


.SE logotyp 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 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;

  1. Margin (marginal) ger mellanrum mellan textstycket och andra element
  2. Border är en kantlinje man kan sätta runt ett element
  3. Padding ger utrymme mellan kantlinjen (border) och själva innehållet
  4. 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

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

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

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>.

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

  • 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

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.

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.

.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.

  1. Regeln för h1 kommer matcha alla h1-or i HTML-dokument
  2. 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%);

Skärmdump från Adobe Photoshop

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.

Färg 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);}

.SE är en oberoende allmännyttig organisation

.SE är en oberoende allmännyttig organisation

.SE är en oberoende allmännyttig organisation

.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

Flera regler som matchar samma element

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.

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.

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 logotyp .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.

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 10 20 10 30
Border 0 0 0 0
Padding 0 0 0 0
0 x 0

Border

margin 0 0 0 0
Border 1 1 1 1
Padding 0 0 0 0
0 x 0

Padding

margin 0 0 0 0
Border 0 0 0 0
Padding 15 20 10 10
0 x 0

Width

margin 0 0 0 0
Border 0 0 0 0
Padding 0 0 0 0
200 x 0

Height

margin 0 0 0 0
Border 0 0 0 0
Padding 0 0 0 0
0 x 90

  • 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}