CSS

Cascading Stylesheets (”Stilmallar”)

Innehåll

• Vem är jag?

• Vad/varför CSS?

• Regler & selectors

• Mått, storlekar & enheter

• Typsnitt

• Färger & bilder

• Olika typer av design

• Avslutningsvis & diverse

• Demo – CSS för HTML

• Demo – CSS för XML

Mittuniversitetet
Vem är jag?

• Har jobbat på Mittuniversitetet av och till från sedan 2011

• Är programansvarig för Webbutvecklingsprogrammet
• Tidigare jobbat på webbyrå samt utvecklat
webbutiker

E-post: Mattias.Dahlgren@miun.se
Telefon: 010 – 142 86 95

Mittuniversitetet
Varför CSS?

• Separera innehåll från design

• HTML eller XML för innehåll

Data, överskrifter, brödtexter, bilder etc.

• CSS för design

Färger, typografi, storlekar, placering etc.

Mittuniversitetet
Versioner

• CSS 1, 2, 2.1, 3 -> 4

Skumma igenom:
http://en.wikipedia.org/wiki/Cascading_Style_Sheets

• ”Vendor prefix”: -moz, -webkit, -ms, -o

Exempel: -ms-transition: all 4s ease;

• Vad kan man använda?

Användbart verktyg: http://caniuse.com

Mittuniversitetet
HTML-koden

• Strukturen är viktig
• Alla använder inte CSS – tänk på besökare med nedsatt syn

• Enklast att köra rapportstruktur

• Rubriker, underrubriker
• Ev. meny först eller sist

• Ska fungera och vara lättläst även utan CSS

Mittuniversitetet
Vart infogas CSS (för HTML)?

• I en separat css-fil (extern) som länkas in från HTML med:

<link rel="stylesheet" href="stilmall.css"
type="text/css" />

• I head-sektionen i html-filen (intern):

<style type="text/css">body { color:#fff, } </style>

• Direkt i starttaggen (inline):

<p style="color:#fff;">vit text</p>

Mittuniversitetet
Vart infogas CSS (för XML)?

• I en separat css-fil (extern) som länkas in från XML med:

<?xml-stylesheet type="text/css" href="stilmall.css"?>

Mittuniversitetet
 Olika typer av media

• CSS kan anpassas att gälla för olika typer av media, som till exempel
skärm(screen), utskrift(print), blindskrift(braille) och mycket mer.

Separat CSS-fil enbart för utskrift:

<link rel="stylesheet" href="print.css" media="print" />

alternativt direkt i CSS-kod:

@media print { p { font-size: 12pt; } }

Läs mer: http://www.w3.org/TR/css3-mediaqueries/

Mittuniversitetet
 Regler och selectors

Mittuniversitetet
CSS-regler

Mittuniversitetet
CSS-regler

• Olika sätt att skriva kod:

p {
font-style: italic;
}

p { font-style: italic; }

Glöm inte semikolon i slutet av varje regel!

Mittuniversitetet
CSS selectors

• Universal selector:

* { font-size: 14px; }

• Type selector:

p { font-size: 14px; }

Mittuniversitetet
CSS selectors

• Child selector:

section > article { font-size: 14px; }

• Descendent selector:

p strong { font-size: 14px; }

• Adjacent sibling selector:

p + p { text-indent: 1em; }

Mittuniversitetet
CSS selectors

• Class selector:

.text { font-size: 14px; }

• ID selector:

#text { font-size: 14px; }

Mittuniversitetet
CSS selectors – det finns många…

• Nth-child selector:

tr:nth-child(odd) { background-color: #666; }

tr:nth-child(1) { background-color: green; }

Läs mer: http://www.w3.org/TR/css3-selectors/

Mittuniversitetet
En regel för flera olika element

• Man kan ”träffa” flera olika element med en och samma regel.
Separera elementen med kommatecken.

Exempel:
#text, #annantext { font-weight: bold; }

Mittuniversitetet
Id och class I HTML

• Ett element i HTML kan ha både en klass och ett ID:

<p class="text" id="mintextbox">Text</p>

Mittuniversitetet
Flera klasser på ett element

• Ett HTML-element kan ha flera klasser. Separera med

mellanslag:

<p class="minklass minklass2 minklass3">Text</p>

Mittuniversitetet
 Mått, storlekar och enheter

Mittuniversitetet
Relativa & absoluta mått

• em/rem : Fontstorleken (graden) på ”standardfonten” styr

• % : Procent av fönstret, eller överordnat element

• pt : Punkter, som i typsnitt. Mest för tryck.

• px : Pixel, ett absolut värde

• cm, mm, in – Centimeter, millimeter, tum

Mittuniversitetet
Höjd & bredd

• Höjd på element styrs med height.

• Bredd på element styrs med width.

Exempel:

p { width: 400px; height: 300px; }

Mittuniversitetet
 Margin & padding

p { width: 300px; background-color: grey; margin: 10px; padding: 10px; }

Mittuniversitetet
Positionering

• Vart olika element ska ligga på sidan

• Sidled: left/right
• Höjdled: top/bottom
• Djup: z (z-index)

Mittuniversitetet
Positionering

Olika typer av positionering:

• static – Normalpositionering
• relative – relativ positionering
• absolute – Absolut positionering
• fixed – Fast positionering
• float (left/right) – flytande positionering

Mittuniversitetet
 Positionering: ett exempel

HTML:
<img src="logotyp.png" id="logotyp" />

CSS:
#logotyp {
position: absolute;
top: 10px;
right: 10px;
}

Mittuniversitetet
 Typsnitt

Mittuniversitetet
Typsnitt

Det finns två huvudtyper av typsnitt:

• Seriff – ex georgia är av typen seriff

• Sans seriff – ex. verdana är av typen sans seriff

Exempel:

p { font-family: Verdana, Arial, sans-serif; }

Mittuniversitetet
Webbsäkra typsnitt

• ARIAL / HELVETICA
• Times new roman
• Courier
• Palantino
• Verdana
• Georgia
• Comic sans
• Trebuchet
• impact

Mittuniversitetet
Andra typsnitt

• Det går att importera typsnitt via CSS:

@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}

• Det finns tjänster för att importera externa typsnitt, som

exempelvis Google Fonts och Adobe Edge Web Fonts.

Mittuniversitetet
“Fallback”

• Viktigt: Tänk på att ha ett snarlikt typsnitt som alternativ i

din font-family!

body { font-family: Calibri, Verdana, sans-serif; }

Blanda inte typsnitt som inte är någorlunda lika:

body { font-family: georgia, impact; }

Mittuniversitetet
Typsnitt

• Storlek (“grad”) för typsnitt anges med font-size:

font-size: 16px;

• Tjocklek anges med font-weight:

font-weight: bold;

Mittuniversitetet
 Färger & bilder

Mittuniversitetet
Färger

Olika sätt att specificera färg:

• Hexadecimalt: #000000;
p { color: #000000; }

• Namn: black;
p { color: black; }

• RGB: (0, 0, 0);

p { color:rgb(0, 0, 0); }

• RGBA: (0, 0, 0, 0.8);

p { color:rgba(0, 0, 0, 0.8); }

• HSLA: (0, 0, 0, 0.8);

p { color:hsla(0, 0, 0, 0.8); }
Mittuniversitetet
Färger

• Bakgrundsfärg till element anges med background-color:

p { background-color: #000; }

• Färg till typsnitt anges med color:

p { color: #fff; }

Mittuniversitetet
Bakgrundsbild

• Bild till en bakgrund anges i CSS med background-image:

body { background-image : url(cat.jpg); }

Mittuniversitetet
 Olika typer av design

Mittuniversitetet
Fast bredd

.container { width: 960px; margin: 0 auto; }

Mittuniversitetet
Dynamiska mått

.container { width: 80%; margin: 0 auto; }

Mittuniversitetet
Media queries

.container { width: 80%; margin: 0 auto; }

@media all and (max-width:600px) {

#wrapper { font-size: 2em; }
}

Mittuniversitetet
Responsiv webbdesign (“Responsive web design”)

• Dynamiska mått i kombination med media queries ger något

som kallas för “responsive web design” – det vill säga en design
som anpassar sig till besökarens enhet, som exempelvis en
mobiltelefon, surfplatta eller “vanlig” dator med stor skärm.

Mittuniversitetet
Media queries

• Media queries kan läsa av skärmstorlek, fönsterstorlek,

pixeltäthet och mycket mer.

Skumma igenom: Mozilla Developer network - Media queries

Mittuniversitetet
 Avslutningsvis…

Mittuniversitetet
Kommentarer

• Ignoreras av webbläsaren
• visas ej för besökaren

• För de personer som kodar, läser koden

• Gör det lättare att förstå koden

• HTML:
<!-- Allt mellan dessa blir kommentar, oavsett radbyte -->

CSS:
/* Allt mellan dessa blir en kommentar, oavsett radbyte */

Mittuniversitetet
Validering

• Varför validera?
• Valideringsverktyg: http://jigsaw.w3.org/css-validator/

• Validera ofta!

Mittuniversitetet
CSS-ramverk

• Det finns en uppsättning ramverk för CSS med färdiga regler att
använda. En populär variant är Bootstrap:
https://getbootstrap.com/

Mittuniversitetet
 Frågor?

Mittuniversitetet
Av Mattias Dahlgren, 2020

Mittuniversitetet