Formatera Text

Innan du sätter igång med att formatera text och rubriker med CSS kan det vara bra att ha läst igenom de grunder som gäller när man anger teckensnitt och färger under rubriken: HTML & CSS / Teckensnitt & Färger

TEXT - Teckensnitt, Storlek & Färg

Teckensnitt

När man vill ange teckensnitt används egenskapen: font-family.

Så här t.ex.

p { font-family: Tahoma; }

Alternativ

Man bör ju alltid ange alternativ till sitt första teckensnitt...


Så här t.ex.

p { font-family: Tahoma, Arial, Helvetica, sans-serif; }

Läs mer om alternativa teckensnitt: HTML & CSS / Teckensnitt & Färger.

Textens storlek

När man vill ange textens storlek används egenskapen: font-size.

Så här t.ex.

p { font-size: 12px; }

OBS!
Att ange teckensnittets storlek med enheten pixlar är inte alltid det optimala... Läs mer om det under rubriken: LAYOUT & DESIGN / Mått & Enheter.

Textens färg

När man vill ange textens färg används egenskapen: color.

Så här t.ex.

p { color: #000000; }

Så här skulle det kunna se ut i stilmallen med alla ovanstående egenskaper:

p {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
 Till Toppen 

Fler Textegenskaper

Justering

Precis som man gör i ett ordbehandlingsprogram kan man justera texten med CSS. Det görs med egenskapen: text-align. Vänsterjusterad text är standard (default) och behöver egentligen inte anges.

left - västerjusterar texten
center - centerar texten
right - högerjusterar texten
justify - justerar texten åt både höger och vänster

Så här t.ex. kan man skapa klasser i stilmallen:

p.center { text-align: center; }
p.right { text-align: right; }
p.just { text-align: justify; }

Så här i HTML-koden:

<p>Den här texten blir automatiskt vänsterjusterad..</p>
<p class="center">Den här texten är centrerad..</p>
<p class="right">Den här texten är högerjusterad..</p>
<p class="just">Den här texten är höger och vänsterjusterad..</p>

På sidan ser det ut så här:

Den här texten blir automatiskt vänsterjusterad:
När din sida väl är färdig och ute på nätet tror du kanske att du kan slappna av och njuta av att en massa nyfikna besökare surfar in och tar del det intressanta innehållet och den konstnärliga utformningen? Tji fick du! Det är nu det verkliga jobbet börjar! Du måste skaffa besökare till din sida. Och viktigast av allt - få dem att återkomma.



Den här texten är centrerad:
När din sida väl är färdig och ute på nätet tror du kanske att du kan slappna av och njuta av att en massa nyfikna besökare surfar in och tar del det intressanta innehållet och den konstnärliga utformningen? Tji fick du! Det är nu det verkliga jobbet börjar! Du måste skaffa besökare till din sida. Och viktigast av allt - få dem att återkomma.



Den här texten är högerjusterad:
När din sida väl är färdig och ute på nätet tror du kanske att du kan slappna av och njuta av att en massa nyfikna besökare surfar in och tar del det intressanta innehållet och den konstnärliga utformningen? Tji fick du! Det är nu det verkliga jobbet börjar! Du måste skaffa besökare till din sida. Och viktigast av allt - få dem att återkomma.



Den här texten är höger och vänsterjusterad (justify):
När din sida väl är färdig och ute på nätet tror du kanske att du kan slappna av och njuta av att en massa nyfikna besökare surfar in och tar del det intressanta innehållet och den konstnärliga utformningen? Tji fick du! Det är nu det verkliga jobbet börjar! Du måste skaffa besökare till din sida. Och viktigast av allt - få dem att återkomma.

Fetstil, Kursivt och Understruket

Du kan förstås också ange om du vill att din text ska vara fet, kursiv eller understruken. Det görs med tre olika egenskaper:

font-weight- anger om texten ska visas fetstil (bold)
font-style - anger om texten ska vara kursiverad (italic)
text-decoration - anger om texten ska vara understruken (underline)

Här anges egenskaperna i tre olika klasser som skrivs in i Stilmallen:

.fet { font-weight: bold; }
.kursiv { font-style: italic; }
.under { text-decoration: underline; }

Sedan anropas klasserna från html-koden:

<p>Här är lite vanlig text! <span class="fet">Den här meningen visas med fetstil.</span> <span class="kursiv">Den här meningen är kursiverad.</span> <span class="under">Här blir texten understruken.</span></p>

Och så här kan det se ut på sidan:

Här är lite vanlig text! Den här meningen visas med fetstil. Den här meningen är kursiverad. Här blir texten understruken.

Man kan också ange att man inte vill ha bold, italic, eller understruket. Det kan vara användbart när man vill ta bort formateringen från taggar som annars automatiskt skulle visas som bold, italic eller understruket.

Så här t.ex:

h5 { font-weight: normal; }

em { font-style: normal; }

a:link { text-decoration: none; }

Radavstånd

Du kan också bestämma radavståndet på texten. Det görs med egenskapen:
line-height.

Vill man utöka radavståndet på sidans alla textstycken - som ju skrivs mellan <p> och </p> - kan man skriva t.ex. så här:

p { line-height: 15px; }

Om man bara tänker använda sig av radavståndet på vissa stycken kan man skapa en klass och sedan anropa den från dokumentet.


Till exempel:

.rad15px { line-height: 15px; }
.rad20px { line-height: 20px; }

Så här anropas sedan klasserna i Html-koden:

<p class="rad15px">Texten får ett radavstånd på 15
pixlar. Texten...</p>


<p class="rad20px">Texten får ett radavstånd på 20
pixlar. Texten...</p>

Och så här kan det se ut på sidan. Här med teckensnittet Arial:

Texten får ett radavstånd på 15 pixlar. Texten får ett radavstånd på 15 pixlar. Texten får ett radavstånd på 15 pixlar. Texten får ett radavstånd på 15 pixlar. Texten får ett radavstånd på 15 pixlar. Texten får ett radavstånd på 15 pixlar.



Texten får ett radavstånd på 20 pixlar. Texten får ett radavstånd på 20 pixlar. Texten får ett radavstånd på 20 pixlar. Texten får ett radavstånd på 20 pixlar. Texten får ett radavstånd på 20 pixlar. Texten får ett radavstånd på 20 pixlar.

Det går också bra att anropa klassen med taggarna <div> eller <span>. Vill man ha ett visst radavstånd ska omfatta en större del av sidan kan man använda <div>.
Så här:

<body>

<div class="rad20px">

Här får all text ett radavstånd på 20 pixlar.

</div>

</body>

Mellanrum

Du kan också bestämma mellanrummet mellan både bokstäverna och orden i ett stycke text. Det görs med egenskaperna: letter-spacing och word-spacing.

Vill man utöka mellanrummet på sidans alla textstycken kan det se ut så här i stilmallen:

p { letter-spacing: 1px; }
p { word-spacing: 10px; }

Om man bara tänker använda sig av mellanrummen på vissa stycken kan man skapa en klass och sedan anropa den från dokumentet.


Till exempel:

.lettersp { letter-spacing: 1px; }
.wordsp { word-spacing: 10px; }

Så här kan man sedan anropa klasserna i Html-koden:

<p class="lettersp">Här utökas...</p>

<p class="wordsp">Här utökas...</p>

Och så här kan det se ut på sidan - med teckensnittet Arial:

Här utökas mellanrummet mellan bokstäverna i texten.



Här utökas mellanrummet mellan orden i texten.

Text med bakgrundsfärg

Med CSS kan man till och med ge texten bakgrundsfärg. Det bästa är då att skapa egna klasser som man sedan anropar från Html-koden.

Exempel 1

Så här skrivs klassen in i mallen:

.gul { background-color: #FFFF66; }

Så här anropas klassen i Html-koden:

<p>Här följer en massa text som kommer att ha det utseendet som du har bestämt att text mellan <p> och </p> ska ha. <span class="gul">Men den här meningen kommer att få en gul bakgrund.</span> Och nu är det slut på det!</p>

Och så här kan det se ut på sidan:

Här följer en massa text som kommer att ha det utseendet som du har bestämt att text mellan <p> och </p> ska ha. Men den här meningen kommer att få en gul bakgrund. Och nu är det slut på det!

Exempel 2

Så här skrivs klassen in i mallen:

.viktigt { background-color: #003399; color: #FFFFFF; }

Så här anropas klassen i Html-koden:

<p>I den här meningen är det ett ord som är speciellt <span class="viktigt">&nbsp;viktigt&nbsp;</span>, liksom!</p>

Och så här kan det se ut på sidan:

I den här meningen är det ett ord som är speciellt  viktigt , liksom!

Exempel 3

Så här skrivs klassen in i mallen:

.gron { background-color: #CCFF99; }

Så här anropas klassen i Html-koden:

<p class="gron">Här kommer all text i hela stycket få en grön bakgrundsfärg eftersom klassen anropas direkt från taggen <p>. Allt mellan <p> och </p> får alltså grön bakgrund!</p>

Och så här kan det se ut på sidan:

Här kommer all text i hela stycket få en grön bakgrundsfärg eftersom klassen anropas direkt från taggen <p>. Allt mellan <p> och <p> får alltså grön bakgrund!
 Till Toppen 

Rubriker

Html-koden har ju taggar som ska användas för rubriker. De har olika nivåer och rent utseendemässigt visas som standard <h1> störst och <h6> minst.

Utseendet på de här rubrikerna styrs alltså av webbläsaren men med CSS kan du bestämma precis hur du vill att de ska se ut.

Observera att rubrik-taggar automatiskt visas i fetstil. Om du vill ha det annorlunda måste du ange det.

Så här skulle det kunna se ut:

h1, h2, h3, h4, h5, h6 {
font-family: Verdana, Arial, Helvetica, sans-serif;
}

h1 { font-size: 24px; color: #990000; }

h2 { font-size: 18px; color: #990000; }

h3 { font-size: 16px; color: #00000; }

h4 { font-size: 14px; color: #00000; font-weight: normal; letter-spacing: 2px; }

OBS!
Att ange teckensnittets storlek med enheten pixlar är inte alltid det optimala... Läs mer om det under rubriken: LAYOUT & DESIGN / Mått & Enheter.

 Till Toppen 

Komprimerad Deklaration: Font

I stället för att skriva ut alla egenskaper i css-koden kan man använda en s.k: Short hand declaration. Vill man ange textegenskaper används: font.

Den här CSS-koden...

p {
font-style: italic;
font-weight: bold;
font-size: 12px;
line-height: 15px;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}

...tolkas på precis samma sätt som den här:

p { font: italic bold 12px/15px Arial, Helvetica, sans-serif;
color: #000000;
}
 Till Toppen 

Formatera Avdelare

Med CSS kan man variera utseendet på sina avdelare: <hr>. Det gör man genom att ge avdelaren en kantlinje med "border". På det sättet får man en avdelare som ser likadan ut i Internet Explorer, Mozilla, Opera och Netscape...

Exempel 1

Så här kan man skriva i stilmallen:

hr { border: thin solid #006699; }

Så här skriver man in avdelaren i Html-koden:

<hr>

Så här blir det:

Exempel 2

Så här kan du göra om du vill styra bredden/längden på avdelaren.

Så här kan man skriva i stilmallen:

hr {
width: 75%;
border-top: thin solid #006699;
}

Så här blir det:

Exempel 3

Vill du ha en tunn kantlinje på bara 1px måste du lägga till lite i stilmallen och särskilt ange det i även i HTML-koden eftersom avdelare som standard är 2 px.

Observera att det inte är korrekt att styra tjockleken direkt i HTML-koden om man kodar enligt strict standard!

Så här kan man skriva i stilmallen:

hr {
border-top: 1px solid #006699; border-right: 0px;
border-bottom: 0px; border-left: 0px;
}

Så här skriver man in avdelaren i Html-koden:

<hr size="1">

Så här blir det:

Exempel 4

Man kan också justera åt vilket håll man vill placera avdelaren. Standard (deault) är "center". Det kan man göra genom att särskilt ange det i HTML-koden.

Observera att det inte är korrekt att styra såna här placeringar direkt i HTML-koden om man kodar enligt strict standard!

Så här skriver man in avdelaren i Html-koden för att placera den till vänster:

<hr align="left">

Man kan även använda andra kantstilar än "solid" på sina avdelare! Läs mer om kantlinjer / border här: CSS / Kantlinjer - Border.

 Till Toppen