CSS skola
CSS text

CSS text

Med CSS går det att bestämma textfärg, justering, radavstånd, indrag och många andra egenskaper precis som moderna ordbehandlare. 

<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
<p class="foo">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#">Lorem ipsum</a>

Textfärg

CSS-egenskapen " color" bestämmer textfärg och kan anges på tre sätt:

CSS

h1 {color:green;}
p {color:#000000;}
.foo {color:rgb(100,100,100);}

 

Läs mer om färger i HTML color

CSS-genskapen "color" går automatiskt i arv till alla inneslutna " barn-element". Ett enkelt sätt att ange textfärg är därför att enbart ange den för det yttersta elementet <body>.

CSS

body {color:red}

Observera att länkar <a> som standard visas med blå färg och ärver därför inte automatiskt färgen från andra element. För att kringgå detta kan man ange värdet "inherit" för egenskapen "color"!

CSS

body {color:red}
a {color:inherit}

Text Alignment

CSS-egenskapen "text-align" bestämmer horisonell justering av texten. Egenskapen kan anta värdena "center" "left" "right" och "justify".

Värdet "justify" låter raderna bli lika långa som i en dagstidning.

CSS

h1 {text-align:right}
p {text-align:justify}
.foo {text-align:center}
a {text-align:left}

Text Decoration

CSS-egenskapen "text-decoration" bestämmer om texten ska dekoreras med över- eller understrykningar mm.

CSS

h1 {text-decoration:overline}
p {text-decoration:line-through}
.foo {text-decoration:underline}

Egenskapen "text-decoration" används oftast för att ta bort understykningen från länkar som webbläsare visas som standardinställning.

CSS

a {text-decoration:none}

Text Transformation

CSS_egenskapen "text-transform" används för att styra om texten ska visas med enbart STORA eller små bokstäver eller med Stor Bokstav Först I Varje Ord.

CSS

h1 {text-transform:uppercase}
p {text-transform:lowercase}
.foo {text-transform:capitalize}
a {text-transform:none}

Text Indentation

CSS-egenskapen "text-indentation" bestämmer hur stort indrag första raden i ett textstycke ska ha.

CSS

p {text-indent:20px}
.foo {text-indent:50%}

Radhöjd

CSS-egenskapen "line-height" bestämmer radhöjd för ett textstycke.

Radhöjden kan anges som en vanlig måttenhet (px, cm etc) eller i %. Radhöjd kan anges som en siffra där exempelvis 2 anger dubbelt radavstånd osv. Värdet "normal" återståller radavståndet.

CSS

p {line-height:20px}
.foo {line-height:80%}

CSS

p {line-height:2}
.foo {line-height:normal}

Avstånd mellan bokstäver

CSS-egenskapen "line-height" bestämmer radhöjd för ett textstycke.

CSS

h1 {letter-spacing:5px}
p {letter-spacing:-1px}

Textriktning

CSS-egenskapen "direction" bestämmer textriktning för ett textstycke.

CSS

p {direction:rtl}
.foo {direction:ltr}

Mellanrum mellan ord

CSS-egenskapen "direction" bestämmer textriktning för ett textstycke.

CSS

h1 {word-spacing:20px;}
p {word-spacing:10px;}
.foo {word-spacing:5%;}

Radbrytning vid mellanslag

CSS-egenskapen "white-space" bestämmer hur mellanslag ska hanteras i ett textstycke. Egenskapen kan anta värdet "normal", "pre" eller "nowrap".

CSS

p { white-space:nowrap; }
| Mer