sandra.larsson@chasacademy.se

CSS

Cascading Style Sheet

{}

https://chasacademy.se / E-mail: info@chasacademy.se / This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

Märkspråk

Stilmallsspråk

Programmeringspråk

Struktur/Innehåll

Utseende

Funktion

Webbens grundläggande byggstenar

Vad är CSS?

CSS används alltså för att ge färg och form till webbsidor — till exempel, för att ändra typsnitt, färg, storlek och avstånd på ens innehåll, dela in det i kolumner, lägga till animation m.m.

CSS är alltså en stilmall. "Cascade" syftar till att CSS deklarationer längre ner i stilmallen (css-filen) skriver över tidigare deklarationer.

Cascading

Regler "faller" ner i DOM-trädet

Olika sätt att tillämpa CSS i HTML

Extern stilmall 👍
Intern stilmall
Inline style

Använda extern stilmall

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

CSS deklarationerna är samlade i en och samma fil

body {
  background: blue;
}

h1 {
  color: #000;
  margin-left: 20px;
}

Intern stilmall

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">
    <title>CSS Intro</title>
<style>
body {
  background: blue;
}

h1 {
  color: #000;
  margin-left: 20px;
}
</style>  
</head>
<body>
    <!-- Här är innehållet -->
</body>
</html>

CSS deklarationerna är samlade i <style>-taggen

Inline style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">
    <title>CSS Intro</title>
</head>
<body style="background: blue;">
    <h1 style="color: #000; margin-left: 20px;">Testing CSS</h1>
</body>
</html>

CSS deklarationerna anges som attribut på elementet

p

color

Selector

Property

Declaration

;

{

}

:

blue

Value

CSS Syntax

h1 {
   font-family: 'Arial';
   font-size: 18px;
   color: hotpink;
}

CSS Properties

Finns över 700 stycken
CSS3 är under ständig utveckling
Styr saker som färger, layout etc.
Olika egenskaper har olika tillåtna värden
Värden kan ha olika enheter
De flesta egenskaper cascade:ar

CSS Selektorer

Selektorn anger vilket eller vilka element som ska applicera de definierade egenskaperna

h1 {
   font-family: 'Arial';
   font-size: 18px;
   color: hotpink;
}

CSS Selektorer

em, li {
  font-family: 'Roboto';
  font-style: italic;
  color: rgb(100, 100, 100);
}

Selektorn anger vilket eller vilka element som ska applicera de definierade egenskaperna

CSS Selektorer

Är väldigt anpassningsbara
Viktigt att ha kunskap om olika typer av selektorer
Så enkelt som möjligt ... använd class!
...krångla inte till i onödan

Elementselektorn

väljer alla p-element

p {
  
color: hotpink;
  
}

Gruppselektorn

väljer både h1-elementen samt p-elementen

h1, p {

color: hotpink;

}

Arvselektorn (Descendant)

väljer endast länkarna (a) som är child till ett listelement

li a {

color: hotpink;

}

Använda en class

väljer endast de element med klassnamnet "main-nav"

.main-nav {

color: hotpink;

}

<nav class="main-nav">This is my main nav</nav>

Punkten!

Tips!

Till en början, fokusera endast dessa fyra selektorer:

Element
Klass
Arv
Grupp

De räcker till en början, lär dig fler efter hand...

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>

Nästlade element där underordnade element ärver egenskaper från överordnade, d.v.s parent/child

DOM-träd

Box-modellen

CSS

De flesta element är block-element per default

Boxmodellen

Börjar på ny rad. "Stackar" på varandra
Deras bredd är 100% av viewport
Deras höjd är 0
Höjden ändras av innehållet

Margin är utrymmet runt ett element. Vi kan kontrollera det i fyra riktningar.

Använda margin

margin-left
margin-right
margin-top
margin-bottom

margin "shorthand"

margin: 10px 20px 30px 40px;

margin: 10px 20px;

margin: 10px;

TOP

RIGHT

BOTTOM

LEFT

Padding är utrymmet inuti element. Syntaxen är samma som margin och även dess shorthand.

Använda padding

Skillnaden med padding är att det inkluderar bakgrundsfärgen.

Boxmodellen

Margin vs Padding

Om du behöver utrymme till nästa element, använd margin
Om du behöver mer bakgrund, använd padding

Border skapar en kant runt elementet. Har tre egenskaper.

Border

border-width
border-style
border-color

Border shorthand

p {
   border-width: 2px;
   border-style: solid;
   border-color: #000;
}

p {
   border: 2px solid #000;
}

Totala bredden och höjden

Bredd och höjd, width och height, anger enbart storleken på innehållsdelen och övriga delar av boxen ligger utanför detta värde.

För att få ut den totala bredden/höjden som din box kommer att ta upp måste du själv summera ihop width, bredden på padding och bredden på eventuell kantlinje (border). Detta kan bli rätt krångligt om du vill ange en exakt storlek på en box.

Detta måttsätt är default (box-sizing: content-box;)

https://www.w3schools.com/css/css3_box-sizing.asp

box-sizing

Med denna variant så inkluderar värdet som man anger för bredd eller höjd, width och height, såväl utfyllnad (padding), som kantlinje (border). Marginalen, margin, har dock en egen bredd. Detta gör att det är mycket enklare att anpassa boxstorleken till hela innehållet.

I de fall border-box gäller får elementet alltså den bredd som sätts i width oavsett vilka andra egenskaper som sätts (det samma gäller för höjd-egenskapen). Detta gör det mycket enklare att passa samman flera element på samma rad.

https://www.w3schools.com/css/css3_box-sizing.asp

/* Lägg högst upp i CSS. * = alla element*/
* {
  box-sizing: border-box;
}

Övning!

Bygg trafikljuset med hjälp av CSS

Bonus!

ÖVNING