sandra.larsson@chasacademy.se
CSS
Cascading Style Sheet
{}
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
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;)
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.
/* Lägg högst upp i CSS. * = alla element*/
* {
box-sizing: border-box;
}Övning!
Bygg trafikljuset med hjälp av CSS
Bonus!
ÖVNING
- ...
- ...
CSS Introduktion
By Sandra Larsson
