Nadawanie stylów dla tekstu

Kolor czcionki

Zgodnie ze składnią z poprzedniej lekcji:

p {
    color: red;
}

Dla selektora paragrafu p ustaliliśmy kolor czcionki na czerwony. Lista dostępnych kolorów jest bardzo długa a zapisywać możemy je na trzy sposoby:

• Angielską nazwą koloru np. “black”, “white”, “red”, “green”, “blue” itp.
• Poprzez wartości RGB w następujący sposób: “rgb(255,0,0)” dla czerwonego, “rgb(0,255,0)” dla zielonego itd.
• W zapisie szesnastkowym, który jest najpopularniejszą metodą: “#000000” dla czarnego a “#ffffff” dla białego.

Wyrównanie tekstu

p {
    text-align: center;
}

W powyższym przykładzie tekst z naszego paragrafu zostanie wyśrodkowany (center). Ale można go też wyrównać do prawej (right), lewej (left), albo wyjustować (justify).

“Dekorowanie” tekstu

Atrybut ten pozwala na kilka sposobów “udekorować” tekst wskazany przez selektor. Przykładowy kod:

p {
    text-decoration: underline;
}

Wartość underline powoduje podkreślenie tekstu linią od spodu, do dyspozycji mamy również overline – czyli linie ponad tekstem, line-through – linię przez środek wiersza (przekreślającą tekst), oraz blink czyli tekst migający.

Wielkie i małe litery

p {
    text-transform: uppercase;
}

W takim przypadku wszystkie litery w elementach określonych przez nasz selektor zostaną wyświetlone jako wielkie. Można skorzystać też z lowercase aby zamienić na małe, bądź też capitalize jeżeli chcemy, żeby wielkie były tylko pierwsze litery w każdym wyrazie.

Wcięcie w pierwszej linii

p {
    text-indent: 25px;
}

Kod ten powoduje, że w każdym paragrafie, pierwsza linia będzie miała 25 pixeli akapitu.