CSS Grunder
CSS - Stilmall
CSS (Cascading Style Sheets) på svenska säger vi stilmall. CSS är språket vi använder för att designa en webbsida(HTML-fil). CSS-regler talar om för webbläsaren hur den ska rita ut sidans HTML-element.
Det skapades då av behovet av att designa en webbsida var väldigt begränsade då man endast kunde använda HTML-kodning.
CSS är ett suveränt verktyg, och har utvecklats väldigt mycket de sista åren. Nya möjligheter som CSS Grid, Flexibox och CSS Variables har nu byggts in i webbläsarna så de kan användas.
CSS utvecklas konstant, och CSS som användes för fem år sen är idag föråldrad. Nya CSS tekniker utvecklas och webbläsarna anpassas.
Begrepp
En CSS regel har en startdel som kallas selektor. Här talar man om vad på sidan som ska påverkas. En andra del som kallas deklaration, det vill säga talar om vilka inställningar som ska gälla. I deklarationen skriver vi instruktioner, där vi kombinerar en egenskap med något värde. Varje kombination egenskap-värde avslutas med ett semikolon.
selektor {
egenskap: värde;
}
/* Exempel */
p {
font-size: 20px;
}
Start stilmall grunder - andra sidan
Vi lär oss några fler taggar, se "HTML lite mer", men framför allt så använder vi en stilmall (CSS - Cascading Style Sheet) för att styra utseendet. Vi skriver stilmallsinstruktionerna innanför <style>-taggar inuti head-taggen. Det bästa vore att skriva i en separat fil vilket vi kommer att lära oss senare. Nu ligger stilmallen i samma fil, vilket kan vara okej om den enbart ska gälla en webbsida och inte användas i något annat sammanhang.
CSS (stilmall) - styr designen
I stilmallen kan vi tala om hur befintliga element ska ha för egenskaper, vi kan också skriva egna "klasser", det vill säga egna paket av instruktioner som vi hittar på ett namn på. Dessa egna paket skriver vi i stilmallen med en punkt följt av namnet och när vi vill ropa på inställningarna för ett visst paket så skriver vi i htmlelementet, class="minaspeciellainställningar" .
För att ställa in vad som ska gälla skriver vi en egenskap, kolon(:), värde och sist ett semikolon(;) .
Ett lite exempel:
<style>
body {
font-family: Verdana, Geneva, sans-serif;
background-color: #ffffcc;
}
.red {
color: red;
}
</style>
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8" />
<title>Demo 2</title>
<style>
body {
background-color: #ffffcc;
}
h3 {
text-align:center;
}
ol {
list-style-type:lower-roman;
}
hr {
width:80%;
margin-left: 0px;
}
img {
border-width:3px;
border-style:solid;
}
.red {
color:red;
}
.green {
color:green;
}
.blue {
color:blue;
}
.fontArial {
font-family:Arial, Helvetica, sans-serif;
color:#666;
}
.fontVerdana {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px; /* OBS! Inget mellanrum mellan 12 och px. */
font-weight:bold;
}
.bild1 {
float:right;
}
.bild2 {
width:150px;
float:left;
margin-right:50px;
}
</style>
</head>
<body>
<h1>Idag ska vi titta på hur man skriver:</h1>
<ul>
<li>färger</li>
<li>textlayout</li>
<li>hur skriver man specialtecken som bl a copyright</li>
<li>olika listor</li>
<li>lite CSS för att styra taggars egenskaper</li>
</ul>
<h3>Färger</h3>
<p>
När vi ska tala om vilken färg vi vill ha kan vi i många falla använda fördefinierade namn, som white, red, green, aqua, darkorange, steelblue.
<br />
<a href="http://www.w3schools.com/tags/ref_colornames.asp" target="_blank">W3Schools lista med namn på färger.</a><br />
Men som du såg i listan så finns det lite mer kryptiska beskrivningar som <strong>#ff0000</strong>. Detta är den hexadecimala(basen 16) beskrivningen av röd. Man anger hur mycket som ska blandas av färgerna <strong>Röd-Grön- Blå</strong> (RGB-kod). <br />
Egentligen anger man tal mellan 0 och 255, men datorn pratar bara ettor och nollor så för den är det hexadecimala systemet mycket effektivare, därför får vi lära oss att ha en liten hum om vad de olika delarna betyder. Efter #-tecknet så visar de två första positionerna hur mycket rött det ska vara, sen nästa två positionerna visar grönt och de sista två positionerna blått. <br />
Varje position kan innehålla ett tal mellan 0-15, men för att det bara ska ta en position översätts det till talen 0-9 och bokstäverna a-f (och som då betyder a=10, b=11, ..., f=15).
<br />
Av de två positionerna som representerar varje färg, så är första positionen är värd 16 och den andra 1, jämfört vårt decimalsystem så skulle den första positionen vara värd 10 och den andra 1. Ovan betyder då ff att vi ska ha f=15 gånger 16 och f=15 gånger 1, dvs 15*16+15*1=255.<br />
Som sagt ni behöver inte förstå detta till 100% men ni ska förstå om det är mycket eller litet av de tre ingående färgerna.<br />
Det hjälper säkert till att titta på följande sida: <a href="http://www.w3schools.com/tags/ref_colorpicker.asp" target="_blank">Colorpicker</a> (hos w3schools).
</p>
<hr />
<h3>Textlayout</h3>
<p><img class="bild1" src="bilder/fargcirklar.jpg" alt="färgcirklar" /></p>
<h1>
<span class="red">F</span>
<span class="green">Ä</span>
<span class="blue">R</span>
<span class="red">G</span>
<span class="green">E</span>
<span class="blue">R</span>
<span class="red">N</span>
<span class="green">A</span>
<span class="blue">T</span>
<span class="red">A</span>
<span class="green">R</span>
<span class="blue">Ö</span>
<span class="red">V</span>
<span class="green">E</span>
<span class="blue">R</span>
</h1>
<p>
Med flera färger blir det lite mera fart i webbsidan. Om du dessutom kan byta teckensnitt, precis som i Word, blir det ännu lite roligare.
</p>
<p>
<img class="bild2" src="bilder/teckensnitt.jpg" alt="Teckensnitt på bild">
Standard teckensnitt brukar vara Times New Roman vilket oftast inte är snyggt. <span class="fontArial">Arial är ett
klacklöst (utan serifer) teckensnitt som finns på surfarens dator!</span><br>
<span class="fontVerdana">Verdana är ett annat.</span>
</p>
<ol>
<li>face -> typsnitt</li>
<li>size -> storlek(fördefinierade)</li>
<li>color -> färg</li>
</ol>
<!-- Vi visar lite koder för specialtecken -->
<h3>Specialtecken</h3>
<p>
Den här webbsidan är © 2008 Värmdö Gymnasium!
</p>
<p>
<a href="http://www.w3schools.com/html/html_entities.asp" target="_blank">W3Schools lista på specialtecken.</a>
</p>
<blockquote>Högerklickar du på sidan, så kan du välja att få se själva koden som skapar denna sida.</blockquote>
</body>
</html>
De flesta egenskaperna är självförklarande. Succesivt kommer vi bekanta oss med fler och fler.
Källor
HTML5 & CSS3 FOR THE REAL WORLD, Goldstein, Lazaris, Weyl (Sitepoint 2011)
Filmer
"Engineer Man" om CSS grunder, 11 minuter (en del tillhör nästa lektion)(aug 2020)
XHTML and CSS Tutorial - 15 - Lists (thenewboston 6 min)
Kommentar: För HTML5 är första raden med doctype helt korrekt. Det som tas upp i filmen(nr 15) är den tidigare standarden(den långa komplicerade doctype'n).
XHTML and CSS Tutorial - 16 - Intro to CSS (thenewboston 7 min)
Kommentar: I HTML5 skriver vi start "style"-taggen helt ren, det vill säga utan egenskapen type.
XHTML and CSS Tutorial - 17 - RGB Color and Line Spacing (thenewboston 6 min)
XHTML and CSS Tutorial - 18 - font-weight & font-style (thenewboston 3 min)
XHTML and CSS Tutorial - 19 - text-align and Changing Background Color (thenewboston 6 min)
XHTML and CSS Tutorial - 21 - Padding (thenewboston 5 min)
XHTML and CSS Tutorial - 22 - Border (thenewboston 4 min)
XHTML and CSS Tutorial - 23 - Margin (thenewboston 4 min)
XHTML and CSS Tutorial - 24 - Width & Height (thenewboston 5 min)
XHTML and CSS Tutorial - 28 - Style More Than One Elements & Span! (thenewboston 6 min)
XHTML and CSS Tutorial - 30 - Styling Using Classes (thenewboston 6 min)