10 grundläggande lektioner i CSS

Så här långt har vi gått igenom css-syntax, class och ID selector samt egenskaperna för font. Nu ska gå vi vidare med själva text-formateringen. Det finns en oändlig mängd olika möjligheter att med css kombinera sin font och text. Inte nog med att vi kan ge varje font sitt speciella utseende, form och storlek, vi kan därutöver styra hur fonten ska bete sig i olika textsammanhang.

Text-indent

Text-indent betyder indrag av text i den första meningen på varje stycke och används därför alltid med paragrafen p. Indraget ligger från vänster till höger och med css kan man sedan styra hur mycket som den första meningen i varje nytt stycke ska vara indraget.

I detta stycke har den här första meningen en text-indent (indragning) på 50px. Som vi kan se så är det bara den första meningen i stycket som formateras. Resterade meningar berörs inte såvida du inte väljer att göra ett nytt stycke. CSS-syntax:

  1. p {text-indent:50px;}

Text-decoration

Text-decoration anger om texten ska formateras med värdet none, overline, underline, line-through och blink. Vill du till ta bort linjen exempelvis under dina länkar så anger du denna css-syntax:

  1. a {text-decoration: none;}

Selektorn a utgör här ett globalt värde för a:link, a:visited, a:hover, a:active och det innebär att om du anger värdet none så kommer aldrig linjen synas, inte ens när du för musen över länken. Dock man kan för varje pseudo-class ange ett specifikt värde. Css-syntaxen för en pseudo-class:

  1. selector:pseudo-class {property:value;}

För vår del när vi anger våra länkar kommer det i praktiken se ut så här om vi väljer olika egenskaper för varje pseudo-class:

  1. a:link{text-decoration: none;}
  1. a:visited{text-decoration: line-through;}
  1. a:hover{text-decoration: underline;}
  1. a:active{text-decoration: none;}

Selektorn är alltså a, pseudo-classen är :link, :visited, :hover, :active och kombinationen skrivs innan klammern, därefter kommer property (egenskap) och value (värde) precis som vi tidigare har lärt oss. När vi skapar en pseudo-class så följer alltså ett kolon omedelbart efter selektorn (HTML-elementet) som skiljer detta från vår pseudo-class.

Vill du lägga en linje under på exempelvis rubriken h1 så anger du följande:

  1. h1 {text-decoration: underline;}

Vill du hellre lägga linjen över rubriken h1 så anger du detta istället:

  1. h1 {text-decoration: overline;}

Låt oss säga att du har en artikel som delvis har reviderats, vissa delar i artikeln är inte längre aktuella, men du vill inte skriva om eller ta bort artikeln. Då kan du skapa en överstrykning på de delar som är inaktuella.

Universum består av stjärnor och planeter och solen kretsar runt jorden. Css-syntax för ett helt stycke:

  1. p {text-decoration: line-through;}

Css-syntax som class-attribut:

  1. .line-through {text-decoration: line-through;}

HTML-koden:

  1. Universum består av stjärnor och planeter <span class="line-through">och solen kretsar runt jorden</span>

Vill du skriva in din css direkt i html-koden använder du ett dataavsnitt speciellt för css och det heter style följt av property (egenskap) och value (värdet). Utförligare information finns i kommande lektioner, dock kan du kika på koden här under.

  1. Universum består av stjärnor och planeter <span style="text-decoration:line-through;">och solen kretsar runt jorden</span>

Blink är precis som det låter, blinkande, och man kan använda det på rubriker, ord och så vidare. Blink bör användas med aktsamhet eftersom det ofta upplevs vara ett irritationsmoment på en hemsida. Visst är detta irriterande i längden! Css-syntax:

  1. vald selektor {text-decoration: blink;}

Text-align

Text-align använder vi när vi vill positionera en text. Alignment anger hur texten ska vara ställd med värdet text-align:right; text-align:left; text-align:center; eller text-align:justify;. Css-syntax:

  1. p {text-align: left;}

Den här texten är vänsterställd. 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.

  1. p {text-align:right;}

Den här texten är högerställd. 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.

  1. p {text-align:center;}

Den här texten är centrerad. 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.

  1. p {text-align:justify;}

Den här texten är ställ i justify. Texten har raka marginaler på alla sidor. 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.

Text-transform

Text-transform förändrar bokstävernas utseende (ex till enbart versaler) genom att vi kan använda värdet none, capitalize, lowercase och uppercase. Värdet capitalize gör så att varje första bokstav i varje nytt ord blir stor bokstav, det vill säga en versal. Hej Hur Mår Du Idag? Css-syntax:

  1. p {text-transform:capitalize;}

Lowercase däremot gör alla bokstäver gemena, till små bokstäver. hej hur mår du idag? Css-syntax:

  1. p {text-transform:lowercase;}

Motsatsen till lowercase är således uppercase. Värdet uppercase gör om alla bokstäver till versaler. HEJ HUR MÅR DU IDAG? Css-syntax:

  1. p {text-transform:uppercase;}

Vid värdet none har man ingen transformation utan texten kommer att visas som den är tänkt att presenteras i html-koden.

  1. p {text-transform:none;}

Letter-spacing

Letter betyder ord och space utrymme. Med letter-spacing anger man alltså avståndet mellan bokstäverna (ökar eller minskar).

I den här meningen har jag angett 3 pixlars avstånd mellan bokstäverna.

  1. p {letter-spacing:3px;}

I den här meningen har jag däremot angett -1 pixlars avstånd mellan bokstäverna. De kommer därför att stå närmare varandra än “normaltexten”.

  1. p {letter-spacing:-1px;}

Line-height

I ett stycke och när man skriver en text är det bra att ha “luft” mellan raderna för den ska vara läsbar och användarvänlig. Avståndet mellan raderna kallas för line-height – en exakt översättning är linjehöjd men vi säger radavstånd. Line-height är med andra ord avståndet mellan baslinjerna. Brukar du skriva dokument i MS Word eller Open Office anger du kanske 1 1/2 radavstånd. Det motsvarar 150%. Utifrån tillgänglighet och standardisering är det en bra idé att använda just procentenheter. Vi ska kika på tre exempel:

  1. p {line-height:150%;}

Denna text har en line-height på 150% – det innebär ungefär ett och ett halvt radavstånd om man brukar skriva i MS Word.

  1. p {line-height:200%;}

Denna text har däremot en line-height på hela 200% – det innebär ungefär dubbelt radavstånd om man brukar skriva i MS Word.

  1. p {line-height:75%;}

Denna text har en line-height på 75%. Som du ser så blir det väldigt trångt mellan raderna. 75% är alltså inte så bra att ha.

Word-spacing

Om man med letter-spacing kunde öka eller minska avståndet mellan bokstäverna så har word-spacing en liknande funktion – man kan öka avståndet mellan orden. Låt oss som vanligt se på ett exempel:

I denna text har jag angett word-space med 25 pixlar. Som du ser så blir det ett större avstånd mellan orden är vanligt.

  1. p {word-space:25px;}

Textfärg och bakgrundsfärg på en text

Det finns några viktiga saker man bör tänka på när man skriver för webben. Om vi tittar till användbarheten så ska det finnas kontrast mellan textfärg och sidans bakgrundsfärg, men man kan inte välja vilken textfärg eller bakgrundsfärg som helst. Det ska vara lugnt för ögat att läsa en text, likaså bör man tänka på de som är färgblinda. Därför bör man undvika att blanda röda eller gröna färger tillsammans – likaså kombinationen gult och blått eftersom de är komplementfärger till grönt. Ditt val av textfärg kan med andra ord ställa till problem om det vill sig illa. En bra kombination är att använda färgerna #333 på texten och #f8f8f8 på sidans bakgrundsfärg. Vit bakgrund kan faktiskt också vara arbetsamt för ögat. Ibland kanske man vill framhäva vissa partier eller rubriker i en text, då kan man ange en bakgrundsfärg på själva textavsnittet.

Css-syntax för textfärgen är denna:

  1. p {color:#333;}

Så har vi det här med bakgrundsfärg till texten. Vi ska här se på två alternativ, i det första alternativet lägger vi in textens bakgrundsfärg som en egenskap i selektorn och i det andra använder vi ett class-attribut.

Här har jag lagt in en vit bakgrundsfärg som en global egenskap.

Css-syntax:

  1. p {background-color:#fff;}

Här har jag lagt in en vit bakgrundsfärg som ett class-attribut med märkningen span.

Css-syntax:

  1. .highlight {background-color:#fff;}

HTML-koden:

  1. <p><span class="highlight">Här har jag</span> lagt in en vit bakgrundsfärg som ett <span class="hightlight">class-attribut med märkningen span</span></p>

Som ni ser så finns det ingen luft, padding, runt bokstäverna i det sista alternativet, och det vill vi väl ha. Därför lägger vi in en padding.

  1. .highlight {background-color:#fff;padding:5px 5px;}

Som globalt värde

Css-syntax för både textfärg och bakgrundfärg som globalt värde:

  1. p {color:#333; background-color:#fff;}

Som class-selector

Css-syntax för både textfärg och bakgrundfärg som class-selector:

  1. .highlight {color:#333;background-color:#fff;}

No-wrap, radbrytning och paginerade dokument

Skulle man av någon anledning inte vilja ha en radbrytning för sin text kan man använda egenskapen white-space i kombination med no-wrap. Det fungerar så att texten aldrig bryts där den normalt brukar brytas, det vill säga till en ny rad. Istället så fortsätter den ända tills du bokstavligen sätter punkt genom att avsluta stycket. Kika på texten i exemplet här inunder hur den fortsätter utan att brytas.

Hejsan hur mår du? Hejsan hur mår du? Hejsan hur mår du? Hejsan hur mår du? Hejsan hur mår du? Hejsan hur mår du?

Global css-syntax:

  1. p {white-space: nowrap}

Sidbrytning däremot kan vara bra att ha om man vill ha utskriftsvänliga webbsidor. Och det är just till utskrift vi använder denna märkning. Page-break – automatisk sidbrytning – ligger på nivå 2/CSS2.1. Det finns möjlighet att välja om sidan ska brytas före märkningen, då används egenskapen page-break-before. Men vi måste ju också definiera värdet för detta och då har vi fem värden att välja mellan; auto | always | avoid | left | right. Auto har ingen alls påverkan på texten utan den bryts där sidan normalt tar slut. I detta fall vill vi att sidan alltid ska brytas innan märkningen. Css-syntax för denna är då:

  1. .page-break {page-break-before: always;}

HTML-koden:

  1. <div class="page-break">Här kommer texten </div>

Alternativ två är att lägga in värdet så att sidbrytningen kommer efter märkningen. Även här har vi samma värden att välja mellan; auto | always | avoid | left | right. Givetvis vill att regeln alltid ska gälla. Css-syntax:

  1. .page-break {page-break-after: always;}

HTML-koden:

  1. <div class="page-break">Här kommer texten </div>

Låt oss säga att du har en hel del text och vill dela upp sidan i olika stycken. Då skriver man sin html-kod så här:

  1. <p class="page-break">Här kommer texten </p>

Vissa webbläsare stöder inte kombinationen page-break-after tillsammans med taggarna <br>, <br /> eller <hr>, <hr />. Tänk på detta.

Hur fungerar detta i praktiken?

Via CSS-regeln @page så finns det en möjlighet att bryta ett dokument till att bli flera bläddringsbara segment, i dessa kan du sedan styra hur marginalerna ska se ut vid utskriften, storleken, och i vilka riktningar segmenten ska ligga. @page-regeln innebär att du också kan presentera segmenten med pseudo-classer. En del väljer att koppla sina märkningar till rubriker – sidan bryts då antingen före eller efter rubriken. Andra tycker hellre om att dela in varje sida i “boxar” och från dem koppla sin sidbrytning. Vad man väljer är alltså en smaksak. Dock är det viktigt att veta att pagineringen inte fungerar om boxarna har absolut position.

När vi som använder WordPress skriver en sida (Pages) eller post kan vi ju använda en knapp i quicktags som heter page och more om vi vill dela upp innehållet på fler sidor, till exempelvis sidan 1, sidan 2, sidan 3 och så vidare. Precis som jag har gjort i denna guide. < !--nextpage-- > och < !--more--> knapparna har samma funktion som paginationen Page-break. Jonathan Snook använder alltid följande märkning för att inte kommentarerna också ska följa med i utskriften:

  1. #comments {page-break-before:always;}

Page-break-before gör alltså en sidbrytning före ett element, t ex H1, eller en box medan page-break-after gör en sidbrytning efter ett element, t ex DIV, eller en box. Denna typ av dokumentpaginering lämpar sig i huvudsak till media type print och projection.

Förenklat media-type dokument för utskriftsvänliga sidor:

  1. <html>
  2. <head>
  3. <title>Paginering</title>
  4. <style>
  5. @media print {div.pagebreak{page-break-before: always}}
  6. </style>
  7. </head>
  8. <body>
  9. Sidan 1
  10. <div class="pagebreak">Här kommer texten</div>
  11. Sidan 2
  12. <div class="pagebreak">Här kommer ytterligare lite text</div>
  13. Sidan 3
  14. </body>
  15. </html>

Textformateringar

color
anger textfärgen
letter-spacing
anger avståndet mellan bokstäverna (ökar eller minskar)
text-align
anger hur texten ska vara ställd med värdet text-align:right; text-align:left; text-align:center; text-align:justify(raka marginaler på alla sidor);
text-decoration

anger om texten ska formateras med värdet none, overline, underline, line-through, blink
text-indent
ger ett indrag på första meningen
text-transform
förändrar bokstävernas utseende (ex enbart versaler) genom att använda värdet capitalize, lowercase, uppercase
word-spacing
ökar eller minskar avståndet mellan orden
line-height
avståndet mellan baslinjen, ex mellan varje rad i ett stycke

I lektion 5 ska vi kika på bakgrunder av alla de slag. 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 *