10 grundläggande lektioner i CSS

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:

  1. #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.

En stor fet rubrik

#fet {color:#333; font-size:26px; font-weight:<pre<h1 id="fet">En stor rubrik</h1>
  • 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
#fet1 {list-style-type: none; color:yellow; font-size:14px; font-weight: bold; background-color: #000;margin: 0px; padding: 0px;}

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:

  1. .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>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo.

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;}
<h1 class="fet">En stor rubrik

En stor fet rubrik

Vi kanske vill avgränsa ett textblock – då är classmärkningen ypperlig att använda. Kika på följande koder och exempel:

.text {color:blue; font:14px/150% arial,verdana, serif;}
<p class="text">lite text</p>

Eftersom vi har lagt till class-attributet .text till denna paragraf (stycke) så blir all text inom p-taggarna blå. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo.

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. måste alltid avslutas

Css-syntax:

  1. .textred {color:red;}
  1. .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>

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

  1. class
  2. dir
  3. id
  4. lang
  5. onclick
  6. ondblclick
  7. onkeydown
  8. onkeypress
  9. onkeyup
  10. onmousedown
  11. onmousemove
  12. onmouseout
  13. onmouseover
  14. onmouseup
  15. style
  16. title

Följande taggar är valida inom 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 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!

Author: Lena

Lena är en riktig web geek med sikte mot web standards. Hon har både fått utmärkelsen Årets WebQueen som att ha blivit omskriven för sina insatser på nätet. Hennes stora intresse är gränssnitt. Lena är gränssnitt- front end designer och har studerat design, gränssnitt, tillgänglighet, användbarhet och web standards på Blekinge Tekniska Högskola.

5 svar på “10 grundläggande lektioner i CSS”

  1. 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

    1. det ska alltså stå ”krokodilgap höger P krokodilgap” vänster i meningen: ”…text som är skriven innom (krokogapPkrokogap) i mina html doc.

    2. 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:

      
      #main {background: [...]; padding:[...], font-size:[...];}
      

      Eller:

      
      #main p {font-size:[...];}
      

      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

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

    1. 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

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *