10 grundläggande lektioner i CSS

Välkommen till nionde lektionen!
Du har säkert sett på många hemsidor hur plötsligt texten mitt i en mening kan ändra färg och storlek. Eller att man använder samma boxar flera gånger på samma sida trots att Du säkert vet att man inte kan använda ett unikt ID mer än en gång per dokument.
Hur fungerar då allt detta? Vi ska nu kika lite på hur man kan gruppera olika html-element.
Grupperingar med DIV
<div> används när man vill gruppera ett eller flera blockelement. <div> är i sig själv ett så kallat block-level element, ibland kallat boxelement.
Med <div> märkningen har du också möjlighet att formatera större delar i ditt webbdokument.
De olika <div>attributen är följande:
align class dir id lang onclick ondblclick onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup style title
Ett <div>block måste alltid avslutas med </div>.
<div>märkningen omfattar alltid ett begränsat område, men det är Du som bestämmer hur stort detta område ska vara och se ut.
För att veta vilket område du vill begränsa använder man sig av ett ID – ett unikt namn. Det här ID får då bara förekomma en gång per dokument.
Css-syntax kan se ut så här:
#box {width:300px;}
<div id="box">innehåll i boxen </div>
Eftersom <div> är ett block-nivå-element går det alldeles utmärkt att för varje <div> lägga in och/eller koppla till andra block-element.
Du kan som exempel använda <div> inom taggarna blockquote, body, button, center, dd, div, fieldset, form, iframe, li, noframes, noscript, object, td, th utan att nagga på validiteten.
Inuti ett <div>block kan du därutöver använda följande taggar:
a, acronym, address, applet, b, basefont, bdo, big, blockquote, br, button, center, cite, code, dfn, dir, div, dl, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, hr, i, iframe, img, input isindex, kbd, label, map, menu, noframes, noscript, object, ol, p, pre, q, s, samp, script, select, small, span, strike, strong, sub, sup, table, textarea, tt, u, ul, var
<div id="box"> <h2>En rubrik</h2> <ul> <li>lista</li> </ul> </div>
Grupperingar med ID
När man ska identifiera en eller flera grupper är det bra att använda ett ID. Exempel på ID-grupperingar kan vara dessa.
#fet {color:#333; font-size:26px; font-weight:bold;>
och HTML:
<h2 id="fet">En stor fet rubrik</h2>
Resultatet:
En stor fet rubrik
Styla en lista med ID
CSS-koden:
#fet1 {list-style-type: none; color:yellow; font-size:14px; font-weight: bold; background-color: #000;margin: 0px; padding: 0px;}
Resultatet:
- En lista med fet gul stil och svart bakgrund
- En lista med fet gul stil och svart bakgrund
- En lista med fet gul stil och svart bakgrund
Minns att du bara får använda 1 unikt ID per dokument.
Grupperingar med class
En annan bra märkning som kan kopplas till det mesta är class. Detta är ett bra attribut om du exempelvis vill skapa boxar som ska återkomma på din sida. Vad du gör då är att skapa en class-märkning i din cssmall:
.box {max-width:700px; width:100%; height:100px; background-color:#000; color:#fff; padding:10px 10px;}
Och html-koden är denna:
<div class="box">lite innehåll i boxen</div>
Resultatet:
Class attributet kan med fördel även användas på en text. Låt oss använda samma egenskaper och värden som vi hade när vi grupperade med ID.
Skillnaden är att istället för karaktären # lägger vi till en punkt och skriver in class i html-koden. På så vis kan vi använda denna märkning hur många gånger vi vill.
.fet {color:#333; font-size:26px; font-weight:bold;}
<h2 class="fet">En stor rubrik</h2>
Resultatet:
En stor fet rubrik
Avgränsa textblock
Vi kanske vill avgränsa ett textblock – då är classmärkningen ypperlig att använda. Kika på följande koder och exempel:
CSS-koden:
.text {color:blue; font:14px/150% arial,verdana, serif;}
HTML:
<p class="text">lite text</p>
Resultatet:
Eftersom vi har lagt till class-attributet .text till denna paragraf (stycke) så blir all text inom p-taggarna blp.
Gruppera med span
När vi ändå talar om text kan man med span märkningen också avgränsa en del av texten.
Genom att till exempel kapsla in texten mellan span attributet och sedan lägga till class=”text” får du den att kunna se ut så här om du inte hellre tycker om röd text vill säga.
Css-syntax:
.textred {color:red;}
.textgreen {color:green;}
Du använder span så här i html-koden:
<p>Här tänker jag göra <span class="textred">lite färgad text</span> mitt i meningen och sedan <span class="textgreen">ändra denna</span></p>
Resultatet:
Här tänker jag göra lite färgad text mitt i meningen och sedan ändra denna
Faktum är att class är ett ”hjälp-attribut” kan man säga. Med class värdet kan du styla din hemsida väldigt mycket. Class märkningen kan även användas på dina tabeller, mailformulär osv.
Följande attribut är tillåtna med <span>
- class
- dir
- id
- lang
- onclick
- ondblclick
- onkeydown
- onkeypress
- onkeyup
- onmousedown
- onmousemove
- onmouseout
- onmouseover
- onmouseup
- style
- title
Följande taggar är valida inom <span>taggen
:
a, acronym, applet, b, basefont, bdo, big, br, button, cite, code, dfn, em, font, i, iframe, img, input, kbd, label, map, object, q, s, samp, script, select, small, span, strike, strong, sub, sup, textarea, tt, u, var
Inne i följande taggar kan du applicera <span>taggen
:
a, acronym, address, applet, b, bdo, big, blockquote, body, button, caption, center, cite, code, dd, del, dfn, div, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, i, iframe, ins, kbd, label, legend, li, noframes, noscript, object, p, pre, q, s, samp, small, span, strike, strong, sub, sup, td, th, tt, u, var
Allmänna egenskaper för ID, div, class och span
id | {data} teckensträng som anger en specifik identitet till ett element |
div | märkning som omfattar ett block eller element |
class | märkning som föregås av ett block eller element |
span | formaterar en avgränsad del (in-line) |
I lektion nummer 10 – den sista och avslutande – ska vi granska pseudo-class, parent och first-child genealogin.
Välkommen dit!
Hej!
Tack för en mycket bra guide! Jag har följt den till punkt och pricka och allt fungerar bra, förutom font-size. Jag använder style sheet och jag kan ändra textfärg, länkfärg, bakgrundsfärg osv, men när jag försöker skriva in font-size så fungerar det inte på den text som är skriven innom i mina html doc. Jag kan ju såklart skriva in font-size i varje html doc men jag vill ju använda mitt style sheet :) Jag har skrivit in det på följande sätt (nu skriver jag bara i font-size) i body {font-size:10px} och p { font-size:10px;} men det blir ändå bara standard storlek. Har tittat i bådde chrome, IE och firefox. Vet du vad detta kan bero på? Tack på förhand! /Erik
det ska alltså stå ”krokodilgap höger P krokodilgap” vänster i meningen: ”…text som är skriven innom (krokogapPkrokogap) i mina html doc.
Hej Erik!
All css som läggs in i dokumentet prioriteras före stilmallen. Har du möjligtvis angett font-size för speciella div-block i stilmallen? Kika här under:
Eller:
Ovanstående css prioriteras för font-size i body, dock ärver de egenskaperna från parent (body).
Du har angivit
body {font-size:10px} och p { font-size:10px;}
därför blir all text på sidan lika stor. Body innebär ALL text, inklusive stycken (p), men du har också angivit att dina stycken ska vara 10px. Testa och ta bort font-size i body. Därefter anger du istället fontstorleken för varje element i stilmallen.mvh/Lena
Ville bara tacka för en riktigt snygg och välskriven guide. Jag snubblade in på din sida mest bara på måfå och har varit fast sedan lunch, så det är ett gott betyg:) Bra jobbat!
Hej Björn!
Vad trevligt att du ”fastnade” på min sida. Jag hoppas att du fick med dig lite matnyttigt =)
TACK för berömmet!
mvh/Lena