Tekst, który ma się pojawić na stronie internetowej umieszczamy w znacznikach:
- <P> </P>
oraz znacznikach nagłówków:
- <H1> </H1>
- <H2> </H2>
- <H3> </H3>
- <H4> </H4>
- <H5> </H5>
- <H6> </H6>
Do zmiany fragmentu tekstu wykorzystujemy znacznik:
- <SPAN> </SPAN>
Atrybuty tekstu ustawiamy za pomocą stylów:
- globalnie (w nagłówku strony) np.:
<STYLE>
P {color: #ff0000; font-size: 14pt}
</STYLE>
- lokalnie (dla konkretnego akapitu) np.:
<P STYLE="color: #00ff00; text-align: right"> </P>
- lokalnie (dla wybranego fragmentu tekstu) np.:
<SPAN STYLE="color: #0000ff"> </SPAN>
Cecha color pozwala definiować kolor tekstu. Wartości wybranych kolorów (zapisane w systemie szesnastkowym) dostępne są np. na stronie kolory.html.
Przykład:
Po wpisaniu w żródle:
<P STYLE="color: #7010af">Tekst w kolorze śliwkowym.</P>
<P STYLE="color: #808000">Tekst w kolorze oliwkowym.</P>
na stronie internetowej pojawi się:
Tekst w kolorze śliwkowym.
Tekst w kolorze oliwkowym.
Cecha font-size pozwala definiować rozmiar tekstu. Wartość określać można między innymi w punktach (np. 8pt) i pikselach (np. 28px).
Przykład:
Po wpisaniu w żródle:
<P STYLE="font-size: 10pt">Tekst o rozmiarze 10 punktów.</P>
<P STYLE="font-size: 20px">Tekst o rozmiarze 20 pikseli.</P>
na stronie internetowej pojawi się:
Tekst o rozmiarze 10 punktów.
Tekst o rozmiarze 20 pikseli.
Cecha font-family pozwala definiować krój (rodzine) czcionki. W miejsce wartości wpisać można np.: serif (krój szeryfowy, posiadający drobne zdobienia na brzegach literek, np. times), sans-serif (krój bez szeryfowy, proste czcionki nie zdobione, np. arial), cursive (czcionki imitujące pismo ręczne), fantasy (krój fantazyjny), monospace (krój o stałej szerokości znaku).
Przykład:
Po wpisaniu w żródle:
<P STYLE="font-family: serif">Tekst posiadający drobne zdobienia na brzegach literek.</P>
<P STYLE="font-family: sans-serif">Tekst prosty, czcionki nie zdobione.</P>
na stronie internetowej pojawi się:
Tekst posiadający drobne zdobienia na brzegach literek.
Tekst prosty, czcionki nie zdobione.
Cecha font-weight pozwala definiować grubość (wagę) czcionki. W miejsce wartości wpisać można np.: normal (standardowa grubość - wartość domyślna), bold (gruba), bolder (grubsza), lighter (cieńsza) oraz 100, 200, 300, 400, 500, 600, 700, 800, 900 (grubości numeryczne).
Przykład:
Po wpisaniu w żródle:
<P STYLE="font-weight: bold">Tekst z ustawioną grubością (wagą) za pomocą wartości bold.</P>
<P STYLE="font-weight: lighter">Tekst z ustawioną grubością (wagą) za pomocą wartości lighter.</P>
na stronie internetowej pojawi się:
Tekst z ustawioną grubością (wagą) za pomocą wartości bold.
Tekst z ustawioną grubością (wagą) za pomocą wartości lighter.
Cecha font-style pozwala definiować styl czcionki. W miejsce wartości wpisać można np.: normal (normalna czcionka - wartość domyślna), italic (kursywa), oblique (pochyła).
Przykład:
Po wpisaniu w żródle:
<P STYLE="font-style: italic">Tekst z ustawionym stylem za pomocą wartości italic.</P>
<P STYLE="font-style: normal">Tekst z ustawionym stylem za pomocą wartości normal.</P>
na stronie internetowej pojawi się:
Tekst z ustawionym stylem za pomocą wartości italic.
Tekst z ustawionym stylem za pomocą wartości normal.
Cecha text-decoration pozwala definiować dekorację tekstu. W miejsce wartości wpisać można np.: none (nie zmienia wyglądu tekstu - wartość domyślna), underline (tekst podkreślony), overline (tekst nadkreślony - kreska nad tekstem), line-through (tekst przekreślony), blink (tekst migający - działa tylko w niektórych przeglądarkach).
Przykład:
Po wpisaniu w żródle:
<P STYLE="text-decoration: line-through">Tekst przekreślony.</P>
<P STYLE="text-decoration: underline">Tekst podkreślony.</P>
na stronie internetowej pojawi się:
Tekst przekreślony.
Tekst podkreślony.
Cecha text-align pozwala definiować wyrównanie poziome tekstu. W miejsce wartości wpisać można np.: left (wyrównanie do lewej strony - wartość domyślna), center (wyrównanie do środka), right (wyrównanie do prawej strony), justify (wyrównanie do prawej i do lewej strony - wyjustowanie), string (wyrównanie względem znaku w kolumnach tabel) .
Przykład:
Po wpisaniu w żródle:
<P STYLE="text-align: center">Tekst wyśrodkowany w poziomie.</P>
<P STYLE="text-align: right">Tekst wyrównany w poziomie do prawej strony.</P>
<P STYLE="text-align: left">Tekst wyrównany w poziomie do lewej strony.</P>
na stronie internetowej pojawi się:
Tekst wyśrodkowany w poziomie.
Tekst wyrównany w poziomie do prawej strony.
Tekst wyrównany w poziomie do lewej strony.