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:

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

Ett <div> block måste alltid avslutas </div>.
Läs mer hos webdesign.about.com

<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;}

I din htmlkod lägger du in följande:

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

  1. <div id="box">
  2. <h2>En rubrik</h2>
  3. <ul>
  4. <li>lista</li>
  5. </ul>
  6. </div>

Läs mer i att göra div-block.

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

  1. #fet {color:#333; font-size:26px; font-weight:bold;}
  1. <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
  1. #fet1 {list-style-type: none; color:yellow; font-size:14px; font-weight: bold; background-color: #000;margin: 0px; padding: 0px;}
  1. <ul id="fet1"><li>En lista med fet gul stil och svart bakgrund</li></ul

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 {width:300px; height:100px; background-color:#000; color:#fff; padding:10px 10px;}

Och html-koden är denna:

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

  1. .fet {color:#333; font-size:26px; font-weight:bold;}
  1. <h1 class="fet">En stor rubrik</h1>

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:

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

<p class="text"> 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.</p>

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

Css-syntax:

  1. .textred {color:red;}
  1. .textgreen {color:green;}

Du använder span så här i html-koden:

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

<p>Här tänker jag göra lite färgad text mitt i meningen och sedan ändra denna</p>

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>

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

Läs mer hos webdesign.about.com

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!

Liknande poster:

5 Comments Add yours

  1. Erik says:

    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. Erik says:

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

    2. Lena says:

      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. Björn Andersson says:

    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. Lena says:

      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

Leave a Reply

Your email address will not be published. Required fields are marked *