W systemie komputerowym są zaunstalowane liczne czciąki. Możliwe jest, że strona wykorzystująca czciąkę, której nie ma w systemie konkretnego komputera. Przeglądarka przdstawia wówczas standardową czciąkę dostepną w systemie, która może wyglądać zupełnie inaczej niż planowana. Tworząc stronę, warto zadbać o to, aby czciąka wyświetlana była taka sama lub przynajmnej zbliżona do zaplanowanej. CSS grupuje czciąki w/g okraślonych cech, a więc podobnych d siebie, w grupy nazywane rodzinamifamily). Tych rodzin jest pięć:
| Nazwa rodziny | opis | przykładowa czciąka |
|---|---|---|
| serif | czcionki szeryfowe, posiadają dekorację zakończenia liter | Georgia, Bodoni, New Times Roman |
| sans-serif | bezszeryfowe;pozostałe zakończenia liter | Arial, Verdena, Futura |
| monospace | monotypiczne; stała szrokość znaku | Courier, Courier New |
| cursuve | pochylone, "pismo ręczne" | Comic Sans Ms, FLorence |
| fantasy | dekoracje | Impact, OldTown |
Istnieje miożliwość podania wielkości czcionki w jednostkach bezwzględnych: mm, cm, in, pt, px... Można także podać jako większą - larger
lub mniejszą smaller
Kilka przkładów na wartości bezwzględne: mm, cm, int, pt, px... Można także podać jako względne
Kilka przkładów na wartości bezwzględne
Styl czcionki to ew.pochylenie. Wprowadzamy przez font-size. Tekst za stylem font-variant:samall-caps.
Grubość czcionki realizowana w HTML znacznikiem <b>, w CSS posiada deklarację font-weight:wartość . Możliwe wartości to liczby od 100 do 900
Odstępy między wierszami uatawiamy deklaracją line-height:wartość. Wartościami mogą być jednostki procentowe lub bezwzględne. Ten akapit posiada odległość między liniami o wielkości 30px
Można połączyc wiele atrybutów w jednej deklaracji. Wówczas po elemencie font stawiamy dwukropek(:) i wpisujemy wartości oddzielone spacjami w kolejności:
- font-style
- font-variant
- font-weight
- font-size
- font-height
- font-family
Zmiana kolejności może skutkować nieprawidłowym odczytem wartości lub pominięciem cechy. Wyjątkiem jest odległość między liniami;wymaga poprzedzenia znakiem (/).
Formatowanie stylem font:italic small-caps bold 40px courier.
Selektorem może być dowolny znacznik, natomiast jako "kolor" należy podać definicję koloru. Polecenie pozwala ustalić dowolny kolor tekstu. Jeśli definiowane własności mają odnosić się do całej strony (np. kolor tekstu na całej stronie), można użyć selektora BODY lub HTML.
Kolor turkusowy
Kolor różowy
Jako "dekoracja" należy podać:
dekoracja underline
Jako "transformacja" należy podać:
Polecenie umożliwia na wybór określonej transformacji tekstu, czyli atrybutów dotyczących zmiany wielkości liter (wielkie/małe) w tekście.
Polecenie pozwala wybrać jeden z możliwych sposobów wyrównania tekstu, czyli jego ułożenia na ekranie.
Wyrównanie do lewa
Wyrównanie do prawa
Wyrównanie do środka
Wyrównanie do obu marginesów
Wcięcie należy podać konkretną wielkość wcięcia, używając jednostek długości. Wcięcie w tekście oznacza dodatkowy odstęp pierwszej linijki w bloku od lewego marginesu (jak tabulator). Stosuje się je, gdy rozpoczynamy nowy akapit (na inny temat).
Wartości "poziom pion rozmycie kolor" określają własności cienia (wartości "rozmycie" oraz "kolor" nie są wymagane):
Możliwe jest podanie więcej niż jednego efektu - wtedy kolejne efekty należy rozdzielić przecinkami. Zostaną one zastosowane w kolejności podawania. Aby zupełnie usunąć ustalony wcześniej cień, należy podać text-shadow: none [Zobacz także: Wstawianie stylów] Powyższe polecenie pozwala wprowadzić efekt cienia pod tekstem. Możliwe jest również podanie serii efektów, rozdzielonych przecinkami, które będą się nawzajem nakładały.
text-shadow: 0.2em 0.2em
text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px
Odstęp należy podać konkretną wielkość odstępu między liniami bazowymi wierszy używając jednostek długości. Wpisanie "normal" przywróci wartość domyślną. Polecenie to pozwala ustalić odstęp pomiędzy liniami bazowymi wszystkich wierszy w bloku. Dzięki temu linijki mogą być bardziej ścieśnione lub rozciągnięte.
Odstęp należy podać konkretną wielkość odstępu między poszczególnymi wyrazami używając jednostek długości. Wpisanie "normal" przywróci wartość domyślną. Polecenie to pozwala ustalić odstęp pomiędzy wszystkimi poszczególnymi wyrazami w bloku. Dzięki temu wyrazy w linijkach mogą być bardziej ścieśnione lub rozciągnięte.
Odstęp należy podać konkretną wielkość odstępu między poszczególnymi literami używając jednostek długości. Wpisanie "normal" przywróci wartość domyślną. Polecenie to pozwala ustalić odstęp pomiędzy wszystkimi poszczególnymi literami w wyrazach bloku. Dzięki temu cały tekst w linijce może być bardziej ścieśniony lub rozciągnięty.