Textformatering

I denna lektionen går vi igenom hur man formaterar texter, till exempel hur man färgar den eller ändrar storlek på den.

Färg

För att ge en text en annan färg använder man egenskapen color, som på svenska betyder färg. Värdet är färgens namn på engelska, och det är självklart också den färgen som texten får.

HTML - HyperText Markup Language
<p style="color: blue;">En paragraf.</p> <p style="color: lime;">En paragraf.</p> <p style="color: white;">En paragraf.</p> <p style="color: purple;">En paragraf.</p>

En paragraf.

En paragraf.

En paragraf.

En paragraf.

Notera att endast följande färger finns till ditt förfogande:

aqua
black
blue
fuchsia
gray
green
lime
maroon
navy
olive
purple
red
silver
teal
white
yellow

Om man vill ha en annan färg får man ange den färgen som ett hexadecimalnummer, men hur det fungerar får du lära dig en annan gång.

Storlek

För att ändra storleken på en text använder man egenskapen font-size. Som värde skriver vi storleken på texten. CSS stödjer flera olika måttenheter, men vi visar enbart måttenheten pixlar, px.

HTML - HyperText Markup Language
<p style="font-size: 10px;">En paragraf.</p> <p style="font-size: 20px;">En paragraf.</p> <p style="font-size: 30px;">En paragraf.</p>

En paragraf.

En paragraf.

En paragraf.

Notera att det inte får finnas mellanslag mellan talet och måttenheten. Följande fungerar alltså inte:

CSS - Cascading Style Sheets
p{ font-size: 30 px; /* Fel! Det får inte vara mellanslag mellan talet och måttenheten. */ }

Fetstil

För att göra en text fetstilad använder man egenskapen font-weight och ger det värdet bold. Man kan även få bort fetstilad text genom att ge den värdet normal.

HTML - HyperText Markup Language
<p style="font-weight: bold;">En paragraf med fet text.</p> <b style="font-weight: normal;">Inte fet text.</b>

En paragraf med fet text.

Inte fet tex.

Kursiv

För att göra en text kursiv använder man egenskapen font-style och ger det värdet italic. Man kan även få bort kursiv text genom att ge den värdet normal.

HTML - HyperText Markup Language
<p style="font-style: italic;">En paragraf med kursiv text.</p> <i style="font-style: normal;">Inte kursiv text.</i>

En paragraf med kursiv text.

Inte kursiv text.

Understruken

För att göra en text understruken använder man egenskapen text-decoration och ger det värdet underline. Man kan även få bort understuken text genom att ge den värdet none.

HTML - HyperText Markup Language
<p style="text-decoration: underline;">En paragraf med understruken text.</p> <a href="http://www.webbguider.se" style="text-decoration: none;">En länk utan understrykning.</a>

En paragraf med understruken text.

En länk utan understrykning.

Justera texten

Med egenskapen text-align kan du , vänsterjustera, centrera, högerjustera och anpassa din text. Använd värdena left/right/center/justify för att texten ska vara vänsterjusterad/högerjusterad/centrerad/anpassad. Som standard är texten vänsterjusterad.

HTML - HyperText Markup Language
<!-- Taggarna visas som standard vänsterjusterade, så om man inte anger något så visas dem som det. --> <p>Detta är en paragraf med väldigt mycket text i. Dess innehåll är meningslös att läsa, för det står inget viktigt i den. All text är bara till för att visa hur det blir då man centrerar eller högerjusterar en text. Om du ser enbart ser denna texten på en rad (trots att den är ganska lång nu) så får du förminska webbläsarfönstret så att den visas på flera rader.</p> <p style="text-align: right;">Detta är en paragraf med väldigt mycket text i. Dess innehåll är meningslös att läsa, för det står inget viktigt i den. All text är bara till för att visa hur det blir då man centrerar eller högerjusterar en text. Om du ser enbart ser denna texten på en rad (trots att den är ganska lång nu) så får du förminska webbläsarfönstret så att den visas på flera rader.</p> <p style="text-align: center;">Detta är en paragraf med väldigt mycket text i. Dess innehåll är meningslös att läsa, för det står inget viktigt i den. All text är bara till för att visa hur det blir då man centrerar eller högerjusterar en text. Om du ser enbart ser denna texten på en rad (trots att den är ganska lång nu) så får du förminska webbläsarfönstret så att den visas på flera rader.</p> <p style="text-align: justify;">Detta är en paragraf med väldigt mycket text i. Dess innehåll är meningslös att läsa, för det står inget viktigt i den. All text är bara till för att visa hur det blir då man centrerar eller högerjusterar en text. Om du ser enbart ser denna texten på en rad (trots att den är ganska lång nu) så får du förminska webbläsarfönstret så att den visas på flera rader.</p>

Detta är en paragraf med väldigt mycket text i. Dess innehåll är meningslös att läsa, för det står inget viktigt i den. All text är bara till för att visa hur det blir då man centrerar eller högerjusterar en text. Om du ser enbart ser denna texten på en rad (trots att den är ganska lång nu) så får du förminska webbläsarfönstret så att den visas på flera rader.

Detta är en paragraf med väldigt mycket text i. Dess innehåll är meningslös att läsa, för det står inget viktigt i den. All text är bara till för att visa hur det blir då man centrerar eller högerjusterar en text. Om du ser enbart ser denna texten på en rad (trots att den är ganska lång nu) så får du förminska webbläsarfönstret så att den visas på flera rader.

Detta är en paragraf med väldigt mycket text i. Dess innehåll är meningslös att läsa, för det står inget viktigt i den. All text är bara till för att visa hur det blir då man centrerar eller högerjusterar en text. Om du ser enbart ser denna texten på en rad (trots att den är ganska lång nu) så får du förminska webbläsarfönstret så att den visas på flera rader.

Detta är en paragraf med väldigt mycket text i. Dess innehåll är meningslös att läsa, för det står inget viktigt i den. All text är bara till för att visa hur det blir då man centrerar eller högerjusterar en text. Om du ser enbart ser denna texten på en rad (trots att den är ganska lång nu) så får du förminska webbläsarfönstret så att den visas på flera rader.

Gå till nästa lektion, Bakgrund.