Każda reguła stylu składa się z dwóch części:

• selektor – określa do jakich elementów strony internetowej dopasować dany styl
• deklaracja stylu:
  • właściwość – oznacza jaką cechę elementu będziemy zmieniać
  • wartość – oznacza w jaki sposób będzie ta cecha wyglądać.

Ogólna deklaracja stylu:

selektor { właściwość : wartość }

Selektor

Selektorem może być:

• każdy element HTML,
• klasa elementów,
• identyfikator elementu.

Kolejność selektorów

• Jeżeli wypiszemy po sobie selektory np.: table, div, p { color:red } (z przecinkami) to wszystkie z wymienionych elementów będzie miało tekst koloru czerwonego.

• Jeżeli wypiszemy po sobie selektory np.: table div p { color:red } (bez przecinków) to będzie określać kolor tekstu akapitu, który znajduje się w div, który to div znajduje się w tabeli, czyli:
  

  <table>
     <tr>
        <td>
           <div>
              <p>ten tekst będzie czerwony</p>
           </div>
        </td>
     </tr>
  </table>
  

• Jeżeli wypiszemy selektory w ten sposób: div > p { color:red} to tylko akapit będący bezpośrednio w div będzie miał tekst koloru czerwonego. Przykład:
  

  <div>
     <span><p>ten tekst NIE będzie czerwony</p></span>
     <p>A ten tekst będzie czerwony</p>
  </div>
  

Deklaracja stylu

Na deklarację stylu składają się dwie części:

• właściwość – określa co będziemy określać np.: obramowanie, marginesy, dopełnienia, tło, tekst, obrót, zachowanie po najechaniu myszą,
• wartość właściwości – określa w jaki sposób będzie ta właściwość wyglądała np.: obramowanie będzie to 2px grubości, styl obramowania kropkowy, kolor niebieski, tekst będzie pisany czcionką o wysokości 20px, stylem pochylonym, czcionką Arial o kolorze szarym.

Media

Najnowsza odsłona CSS wprowadza pewne rozróżnienia sposobu wyświetlania elementów w zależności na jakim urządzeniu jest „wyświetlana” strona. Tymi urządzeniami mogą być np.: ekran, drukarka, urządzenia czytające na głos, projektory, telewizory, drukarki brajlowskie itd.

W tym celu wprowadzona tzw. przestrzenie nazw. Założenie jest takie, że elementy HTML zdefiniowane w ogólne przestrzeni nazw będą interpretowane przez wszystkie urządzenia jednakowo, natomiast elementy znajdujące się w np. przestrzeni ekranu (screen) nie będą interpretowane przez drukarkę.

Przestrzenie nazw można ustawić na dwa sposoby:

• poprzez dyrektywę @import:

  @import url('style-drukarkowe.css') print;
  @import url('style-ekranowe.css') screen;
  

• poprzez dyrektywę definiującą przestrzeń @media:

  @media screen {
     body {background-color:#f2f2f2;}/* tło na ekranie będzie szare*/
  }
  @media print {
     body {background-color:#ffffff;}/* tło na papierze będzie białe*/
  }
  @media screen, print {
     body {color:#000000;}/* tekst na ekranie i papierze będzie czarny*/
  }
  

Rodzaje urządzeń (przestrzenie nazw):

• all, domyślna przestrzeń – wszystkie urządzenia,
• print – drukarki
• screen – kolorowy ekran
• handheld – mały ekran (palmtop, telefony komórkowe)
• projection – projektory
• speech – urządzenia głosowe
• tv – telewizory (mało kolorów, ograniczona wielkość, dźwięk)
• tty – przeglądarki tekstowe (podstawową jednostką miary jest znak, a nie piksel)
• embossed – drukarki brajlowskie (ograniczenie podobne do przeglądarek tekstowych, plus brak kolorów)

W przestrzeniach nazw można również stosować dodatkowe zasady. Najczęściej robi się to dla ekranów. W ten sposób można zrobić responsywny szablon strony. Przykład:

@media screen and (min-width: 480px) {
   body {
      background-color: lightgreen;
   }
}

Kolor tła zmieni się na jasny zielony jeżeli szerokość ekranu będzie równa lub większa od 480px.