CSS

Cascading Style Sheet

{}

MÅL

  •  Vad är CSS?
  • CSS Syntax
  • Länka CSS till HTML
  • Selektorer
  • Arv
  • "The cascade"

CSS

Cascading Style Sheets

  • HTML är för innehåll, CSS är för utseende (style)
  • HTML och CSS är olika språk, men du kommer att arbeta med båda samtidigt

Style

Menas utseende för...

Färger

Bakgrund

Typografi

Layout

Positionering

Skuggläggning

Animationer

 

CSS Syntax

 

p 

color

Selektor

Egenskap

Deklaration

;

{

}

:

blue

Värde

CSS Syntax

 

p 

color

Selector

Property

Declaration

;

{

}

:

blue

Value

Länka CSS till HTML

Tre olika sätt, och ett tillåtet/rekommenderat!

  • Inline style
  • Embedded
  • Extern stylesheet 👍

Det är bra att känna till övriga alternativ då både inline style och embedded visas på W3Schools (👎 ).  

Använda extern stillmall

  1. Skapa en folder "css" i din mapp
  2. Skapa en fil "style.css" i mappen "css"
  3. Öppna till html-fil som ska stylas
  4. Lägg till rad 5
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">
    <title>CSS Intro</title>
</head>
<body>
    <!-- Här är innehållet -->
</body>
</html>

Selektorer

För att kunna styla måste vi ange för webbläsaren vilken eller vilka html-element vill ändra utseende på!

Selektorer

Vi kan välja element genom att titta vilken tag som används i HTML

h1 {
   font-size: 18px;
}

p {
   color: #fff;
}

DEMO!

Arv

eng. Inheritance

Element kommer att ärva egenskaper från dess förälder (överordnat element).

👨‍👩‍👦‍👦

  • Arv i CSS är en stor fördel och sparar tid. 
  • Exempelvis vill vi kunna ange ett typsnitt till hela dokumentet och inte varje enskilt element.
<body>
    <div>
        <h1>En rubrik</h1>
        <p>En text som är <em>betonad</em></p>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
        </ul>
    </div>
</body>

HTML

HTML visualiserat i trädstruktur

Fördel med nästlad HTML!

DEMO!

"The cascade"

sv. kaskad

CSS deklarationer längre ner i stilmallen (css-filen) vill skriva över tidigare deklarationen.

Övning

Du ska styla uppgift HTML Receptet. Skapa en CSS och länka till HTML-dokumentet. Styla (minst) följande:

Style CSS egenskap
Bakgrundsfärg background-color
Förgrundsfärg (text) color
Typsnitt font-family
Textstorlek font-size
Centrera text text-align

Ta hjälp av din "kompis" W3Schools  https://www.w3schools.com/css/default.asp

Made with Slides.com