Bekezdések megjelenése
Betűkészletek
Adott elemeken állítani tudjuk a betűkészletet, a stílust, módosítást, súlyozást méretet.
Betűtípus
- body { font-family: Arial, Helvetica, sans-serif; }
A példában az egész dokumentumra beállítjuk, hogy milyen betűkészlet legyen az alapértelmezett. Érdemes több, hasonló betűkészletet is felsorolni, illetve a lista végére egy általános betűkészletet is elhelyezni az adott családból. Az általános betűkészletek a következők lehetnek: serif, sans-serif, cursive, fantasy, monospace.
Stílus
Egy font dőltségét befolyásolhatjuk, példánkban az egész dokumentumra adtuk meg, hogy dőltek legyenek a betűk. További lehetőségeink: normal, italic, oblique.
- body { font-style: italic; }
Súlyosság
A példában félkövér betűkészletet állítunk be a HTML dokumentumra. Lehetőségeink: lighter, normal, bold, bolder, illetve 100-tól 900-ig a számok 100-asával (egyre vastagabb betűkészletet választva).
- body { font-weight: bold; }
Méret
A HTML dokumentum alapértelmezett betűtípusának a méretét határoztuk meg a példában. A konkrét méretmegadásnál több lehetőségünk is van, lehetséges pixelben (mint a példában), pontban (pt-t kell írni), százalékban, szövegesen (xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger) megadni a méretet. A lehetséges mértékegységekre egy következő cikkben még részletesebben is ki fogunk térni.
- body { font-size: 14px; }
Csoportos megadás
Lehetőségünk van a fentieket egy paraméterként is átadni:
- body { font: italic bold 14px Arial, Helvetica, sans-serif; }
Szöveg paraméterek
A szöveg színét, sűrűségét, igazítását, aláhúzását, behúzását állíthatjuk, továbbá konvertálhatjuk a szöveget különböző formára (kisbetűs, nagybetűs, stb.). Pár példa:
- h1 { color: black; }
A 1. szintű címsor színét feketére állítjuk. Lehetőségünk van #ffffff hexadecimális formában is megadni a színt (a mértékegységek mellett a lehetséges színmegadási módokat is be fogjuk mutatni még).
- h1 { letter-spacing: 10px; }
A címsor betűi közötti távolságot növeltük meg 10 képponttal. Lehetőségünk van növelni és csökkenteni a távolságot.
- h1 { text-align: center; }
A címsor igazítását adjuk meg, lehetőségünk van balra, középre és jobbra igazítani, valamint sorkizártra beállítani a stílust (left, center, right és justify rendre a megfelelő értékek).
- a { text-decoration: none; }
A példában a link "dekorációjaként" nem adtunk meg "semmit", azaz felülbíráltuk az alapértelmezett aláhúzást. A lehetséges értékek: none, underline, overline, line-through, blink lehetnek, melyek rendre díszítetlen, aláhúzott, felülhúzott, áthúzott és villogó értékeket állítanak be.
- p { text-indent: 40px; }
A bekezdések első sorának behúzását állíthatjuk ennek a paraméternek a segítségével.
- h1 { text-transform: uppercase; }
A stíluslap hatására az 1. szintű címsorunk végig nagybetűvel fog megjelenni. Lehetséges értékek: none, capitalize, uppercase és lowercase, melyek rendre: módosítatlan, első betű nagy, összes betű nagy és összes betű kicsi jelentésűek.
- h1 { text-shadow: 5px 5px 3px #000000; }
A tulajdonság hatására egy árnyékot rajzol a böngészőnk a szöveg köré. A pozíciók megadása nem kötelező, a sziné igen. Az egyes értékek jelentése rendre: lefele való távolság, jobbra való távolság, elmosottság sugara, szín. A távolságok negatív értéket is felvehetnek.
- p { whitewhite-space: nowrap; }
A szóközök, tabulátorok kezelését állíthatjuk a white-space attribútummal. A normal a sorvégeken tördeli a szöveget, a nowrap nem enged sortörést, míg a harmadik lehetséges érték, a pre megtartja egy az egyben a sortöréseket, szóközöket, tabulátorokat (mint a pre HTML elemnél).
p { word-spacing: 10px; }
A szavak közötti távolságot vezérelhetjük ennek a paraméternek a segítségével. Lehetőségünk van negatív értékek megadására is.
p { line-height: 20px; }
A sormagasságot állíthatjuk vele egy paragrafuson belül. Célszerű a betűink méreténél nagyobb sormagasságot beállítani, különben összecsúsznak a sorok.
.super { vertical-align: super; }
A tulajdonsággal az elem függőleges pozícióját tudjuk szabályozni. Egy cellán belül a HTML nyelv td elemének valign tulajdonságához hasonlít, azonban szöveg környezetben (például egy div-en belül) a betűkhöz, és nem a befoglaló blokk méreteihez viszonyított igazítást állítja. Az értékei lehetnek: sub, super, baseline, text-top, text-bottom, middle, top, bottom. A példában egy felső index pozíció beállítását láthatjuk.