2 – Min första CSS

HTML som vi gjorde i övning 1 strukturerar upp innehållet på din hemsida. CSS som vi ska arbeta med nu ändrar utseendet på HTML.

CSS liksom HTML är grunderna för all webbutveckling.

De två teknikerna samspelar. Innehållet, alltså text, bild och video, skriver du i din HTML. CSS styr utseende och layout på innehållet. Vill du ändra färg på en text skriver du texten i HTML och sedan ändrar du färgen i CSS.

CSS kompletterar HTML. De fina är att du inte behöver ändra innehållet för att ändra layouten.

Vad är HTML och CSS? Vad är en hemsida? – Fundera!
Surfa till en stor dagstidnings hemsida och titta i arkivet. Där finns säkert 10 år gamla artiklar.

Under de åren har tidningen förmodligen ändrat designen på hemsidan minst en gång. Tänk om man då behövde gå tillbaka och uppdatera alla gamla artiklar för att få den nya designen.

Hur fungerar mobil-sidor? Många webbsidor ser inte exakt lika ut på datorn som på surfplatta eller telefon. Har man då gjort två versioner av allt innehåll? Eller finns det någon teknik som ändrar utseendet på hemsidan beroende på var den läses?

Även blinda har en speciell version av hemsidan. Innehållet är fortfarande samma men istället för att visa texten på skärmen läser datorn upp hemsidan.

Anledningen till att HTML och CSS fungerar så bra ihop är att de är lagom flexibla. Innehållet i en HTML-sida kan visas på olika sätt beroende på vad man gör i sin CSS.

HTML och CSS -koppling
En HTML-fil kopplar ihop sig med en eller flera CSS-filer

CSS betyder Cascading Style Sheet eller stilmall på svenska. För er som jobbat med trycksaker känner ni till stilmallar. CSS är en fil som kontrollerar utseendet. Du kommer skriva din HTML i en fil och din CSS i en annan.

Hur skriver man CSS?

CSS (liksom HTML) skrivs som text i ett vanligt textprogram. Jag rekommenderar programmet Brackets men det finns många olika.

Följande rader är en liten del av en HTML-fil där vi vill ändra färger. Vi har två olika HTML-taggar. <h1> och <p>. Rubriken vill vi ha grön och paragrafen röd. Vi vill dessutom ändra bakgrundsfärgen till gul under paragraf-texten.

<h1>En rubrik</h1>
<p>Och här har vi en brödtext</p>

I CSS skriver du följande:

h1 {
  color: green;
}

p {
  color: red;
  background-color: yellow;
}

Titta noga på CSS:en. Första raden innehåller ordet h1 följt av en måsvinge. Två rader längre ner står det en måsvinge på andra hållet. Det som står mellan måsvingarna är det som justerar färgen på rubriken.

Texten h1 i CSS:en pekar ut all text som finns i HTML-taggen <h1>min rubrik</h1>. Raden i CSS:en kallas för CSS Selector. Lägg ordet på minnet – det återkommer. Hade vi haft många olika h1 i vår HTML hade alla ändrats.

html-css.png
Kopplingen mellan HTML-element och CSS-selectors

Fortsätter du neråt ser du nästa selector – för paragrafen, p. Den ändrar bakgrundsfärg och textfärg. Varje rad ger en egenskap.

Efter hand som du bygger ut din CSS kommer det bli både fler selectors och fler rader i varje selector. Ofta kan en selector bli 20 rader lång och en hel CSS-fil kan ibland bli flera tusen rader långa.

Typsnitt

Som standard har webbläsaren ett typsnitt för rubriker och ett för övriga texter. Det går att ändra typsnitt för alla olika HTML-taggar genom att i sin CSS-fil lägga till en rad för typsnittet.

Det finns följande olika sorters typsnitt:

  • Serif
  • Sans-serif
  • Cursive
  • Fantasy
  • Monospace

Rubriker är oftast en Serif som standard men tänk om vi vill ändra typsnittet för våra rubriker till en Sans-serif istället? Se följande CSS-exempel.

h1 {
  font-family: sans-serif;
}

Experimentera även med följande rader i din CSS för rubriken.

font-weight: 100;
font-weight: 500;
font-weight: 900;
font-style: normal;
font-style: italic;

Alla rader ska ändra något. Det finns mycket mer om typsnitt. Snart 🙂

Storlekar

En dator-skärm är uppbygd av pixlar. Det är små prickar som ligger så nära varandra så de skapar en bild.

Storlekar i CSS går att justera på flera olika sätt men det enklaste är att bestämma hur många pixlar något ska vara. På en hemsida vill man oftast arbeta med max-storlekar så att innehållet skalar om sig fint till mobiler. Surfar du på telefonen vill du tex kanske inte att bilden ska gå utanför skärmen i sidled. Vi vill inte heller att bilden på datorn ska vara så stor att man bara ser en liten del av den.

Följande CSS justerar så att alla bilder på din hemsida blir max 200 px breda.

img {
  max-width: 200px;
}

Typsnitt brukar vara i en storlek på ca 14px. Vill vi ändra våran brödtext till 22px skriver vi så här:

p {
  font-size: 22px;
}

Du kan även justera dina storlekar på olika delar av dokumentet. Vill du inte ha så långa rader i din brödtext lägger du till en rad för det.

p {
  font-size: 22px;
  max-width: 400px;
}

Länka in CSS i HTML

Börja med att skapa ett nytt dokument i Brackets. Skriv av följande och spara det i samma mapp som din HTML med filnamnet style.css.

body {
  background-color: red;
  color: yellow;
}

För att din HTML ska veta om att det finns en CSS behöver du lägga till några rader. Mallen du arbetar från ser ut så här nu. Notera raden <link rel="stylesheet" href="style.css">. Den kopplar ihop dina dokument.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Olas HTML mall</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <p>Ditt innehåll här</p>
  </body>
</html>

Ett praktiskt tips 🙂

När du gör en ny CSS-fil så börja alltid med att skapa både HTML och CSS-filer och länka in CSS:en i HTML. Ändra sedan något enkelt som du vet fungerar som tex bakgrundsfärgen för hela sidan till röd. Kolla nu så att det fungerar.

Det är nästan alltid ett enkelt slarv eller stav-fel som är problemet.

När du är säker på att det funkar kan du bygga på CSS:en i lugn och ro.

Övningar #2 – CSS

Utgå från din HTML du skapade i övning #1 (CVt). Lägg till CSS för att förbättra utseendet. Har du inte kvar din HTML så gör en ny. Det ger dig bara extra övning 🙂

Gör minst följande (och gärna mer)

  • Ändra färger på dina olika rubriker och stycke. Ändra både textfärg och bakgrundsfärg.
  • Ändra färger på de kursiva och feta texterna.
  • Byt typsnitt på dina olika element.
  • Ändra storlek på typsnitt.
  • Ändra storlek på din bild.
  • Ändra storlekar på brödtext och rubriker.

Klipp och klistra inte. Skriv hellre av texter och försök bli bekväm med hur man skriver. Dessa grundläggande saker kommer sitta i ryggmärgen efter ett litet tag.

Svara på följande frågor

  • När och hur använder man måsvingarna i CSS?
  • Vilka olika sorters typsnitt finns i webbläsaren?
  • Vad är en serif?
  • Hur kopplar man in en CSS-fil i en HTML-fil?

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *