Kaskadowe Arkusze Stylów pozwalają zaprojektować wygląd strony internetowej. Można dzięki nim określać rozmiar, kolor i typ czcionki, odstępy między wierszami i literami, wcięcia, marginesy, pozycję elementów i wiele innych właściwości strony.
Stosujemy je na trzy sposoby:
1. Style wewnętrzne.
2. Osadzone arkusze stylów.
3. Zewnętrzne arkusze stylów.
Jeżeli w dokumencie jest kilka rodzajów stylów, to przeglądarka uwzględnia napierw style wewnętrzne, potem style osadzone, a na końcu style zewnętrzne. Nazywa się to kaskadą stylów.
Stosujemy je poprzez wstawienie deklaracji stylu wewnątrz znacznika HTML.
Przykład: <p style= "font-size: 12px; color: red">To jest akapit o takich własnościach liter</p>.
Do znacznika akapitu <p> dodane zostały własności czcionki oddzielone średnikami. Do stylów wewnętrznych stosuje się często znaczniki <div> i <span> , które nie posiadają własnych właściwości formatowania. Style wewnętrzne używa się okazjonalnie, do fragmentów dokumentu.
Mają zastosowanie do całego dokumentu. Umieszcza się je na początku dokumentu wewnątrz znaczników <head>.
Przykład:
<html>
<head>
<style type="text/css">
<!--
h1 {font-size: 40px; color: #F0000F; font-weight: bold; text-align: center; margin: 30px;}
h2 {font-size: 25px; color: #000FF0; font-weight: bold; text-align: center; margin: 30px}
h3 {font-size: 17px; color: #3CC003; font-weight: bold; text-align: left; margin: 10px 0px 0px 0px;}
h4 {font-size: 30px; color: #F0000F; font-weight: bold; text-align: right;}
p {font-size: 16px; color: #000000; font-weight: normal; text-align: justify; margin: 0px;}
-->
</style>
</head>
<body>
<h1>Tutaj będzie pierwszy styl dokumentu</h1>
<h2>Tutaj będzie drugi styl dokumentu</h2>
<h3>Tutaj będzie trzeci styl dokumentu</h3>
<h4>Tutaj będzie czwarty styl dokumentu</h4>
<p>Tutaj będzie piąty styl dokumentu</p>
</body>
</html>
Tak będzie to wyglądało w przeglądarce:
Tutaj będzie piąty styl dokumentu
Osadzony arkusz stylów zaczyna się deklaracją <style type="text/css">. Konieczne umieszczenie jest znaczników komentarzy HTML <!-- i -->, dzięki czemu starsze przeglądarki, nie obsługujące znacznika <style> nie wyświetlą reguły jako tekst w oknie przeglądarki. Początek reguły to napisanie selektora, który jest znacznikiem HTML-a. Selektorem może być znacznik HTML-a, np. znaczniki nagłówków h1, h2, h3, h4, h5, h6, znacznik akapitu p, znacznik pogrubienia b. W nawiasach{} zapisuje się reguły stylów, rozdzielając je średnikami. Każda reguła składa się z właściwości i jej wartości. Właściwości oddziela się od wartości dwukropkiem, po którym następuje spacja. Reguły stylów są dodawane do własności znaczników.
Przykładowe reguły stylów:
{font-size: 30px} (wielkość czcionki – tutaj 30 pixeli). Można też podawać w centymetrach (cm), milimetrach (mm) i w innych jednostkach.
{color: #000000} (kolor czcionki - tutaj czarny).
{font-weight: normal} (grubość czcinki – tutaj normalna). Wartości: normal, bold, bolder, lighter.
{text-align: left} ( poziome wyrównanie tekstu – tutaj do lewej strony). Wartości: center, justify, left, right.
{margin: 30px} (rozmiar czterech marginesów – tutaj 30 pixeli)
{margin: 0px 12px 0px 12px} (rozmiar marginesów góra – prawa - dół – lewa).
{font-family: Verdana, sans-serif} (rodzaj czcionki – tutaj Verdana, ogólna nazwa czcionki sans-serif).
{font-family: "Times New Roman", serif} (czcionka zawierająca spacje musi być w cudzysłowiu).
Rodzaje ogólnych wartości rodzin czcionek:
# Serif (szeryfowa, np. Times)
# Sans-serif (bezszeryfowa, np. Helvetica lub Arial)
# Monospaced (o równych odstępach, np. Courier lub New Courier)
# Cursive (kursywa, np. Zapf-Chancery)
# Fantasy (fantazyjna, np. Western lub Impact)
Można określić dowolną czcionkę (lub listę czcionek oddzielonych przecinkami) . Należy jednak pamiętać, że musi być ona zainstalowana w komputerze użytkownika, aby była wyświetlona. Wybieramy więc czcionki popularne. Ogólną rodzinę czcionek umieszczamy na końcu. Jeżeli komputer nie odnajdzie pierwszej czcionki, wyświetla się czcionka z ogólnej rodziny czcionek.
Jest to najefektywniejsza metoda wykorzystania stylów. Trzeba utworzyć dokument tekstowy z rozszerzeniem .css i tworzy się łącza do tego dokumentu na stronach HTML. Dokument arkusza stylów jest prostym dokumentem tekstowym, zawierającym zbiór reguł stylów. Nie może zawierać znaczników HTML ani komentarzy HTML. Na stronie HTML łączymy się do niego za pomocą znacznika <link> w <head> dokumentu.
Przykład:
<head>
<link rel = "stylesheet" href = "arkuszstylow.css" type = "text/css">
</head>