.website {cascading-style-sheets:100%;}

CSS (Cascading Style Sheets) czyli kaskadowe arkusze stylu to podstawowy sposób na oddzielenie treści dokumentu od jego wyglądu. Przy ich pomocy można bardzo łatwo i dokładnie kontrolować wygląd dowolnego elementu strony www. Konsekwentne zastosowanie CSS całkowicie zmienia zarówno proces projektowania jak i tworzenia dokumentów HTML, upraszcza cały proces a przede wszystkim zdecydowanie ułatwia wprowadzanie zmian. W dokumencie HTML pozostają jedynie znaczniki strukturalne oznaczone identyfikatorami i przypisane do klas a sam wygląd opisuje się przy pomocy CSS.
W prosty sposób opisują sposób wyświetlania elementów HTML przez przeglądarkę.
Bez CSS bylibyśmy skazani na rozmieszczanie wszystkiego w zagnieżdżonych tabelach i wyrównywanie oraz rozmieszczanie elementów za pośrednictwem zupełnie do tego nie przeznaczonych elementów i atrybutów (np. cellpadding i cellspacing tabeli lub komórki) lub skomplikowanych sztuczek w rodzaju 'przezroczystego gifa', kod byłby zaśmiecony znacznikami font i ukryty w nieczytelnej abrakadabrze tabel w tabelach w tabelach... Na siłę i w sztuczny sposób dopasowywane, pomieszane ze sobą elementy strukturalne, graficzne i opisujące wygląd tworzyłyby zupełnie nieprzejrzystą i niefunkcjonalną gmatwaninę znaków.

Jest konieczny, bo muszę się zastrzec, że poniższe uwagi mają charakter bardziej reklamówki czy ściągi, niż przybliżenia oficjalnej specyfikacji, chociaz była ona głównym źródłem i starałem się wszytkie - moim zdaniem - najważniejsze rzeczy w niej zawarte przynajmniej tu zasygnalizować. W pisaniu tej ściągi pomocne były mi artykuły Oktawiusza Kaczy 'Kaskadowe arkusze stylów' (Magazyn Internet, 6/99) oraz Marka Łaptaszyńskiego 'Kaskadowe arkusze stylów' cz.1-3 (Magazyn Internet, 12/99, 1/00, 2/00), głównie w kwestii układu materiału w niektórych rozdziałach i polskiego nazewnictwa oraz opisu CSS2. Ostateczny wpływ na to co i w jaki sposób się tu znalazło ma moje doświadczenie, dlatego wszystkie informacje możecie zastosować tylko na własne ryzyko.
I jeszcze jedna ważna uwaga: wszystko co tu jest napisane dotyczy CSS1, dla CSS2 istnieje osobny rozdział. To rozgraniczenie jest konieczne ponieważ CSS2 nie jest jeszcze w pełni interpretowany
Będę wdzięczny za wszelkie informacje o znalezionych tu błędach lub nieścisłościach.

Uwaga dla użytkowników Internet Explorera: decyzja użycia najgorszej przeglądarki nie może być najlepsza. Starałem się dopasować tę witrynę dla Internet Explorera, tak żeby nie pojawiły się zbyt wielkie defekty, ale jednocześnie postanowiłem nie wspierać złego obyczaju używania MSIE i co spowodowało, że w tej przeglądarce wygląda najgorzej. Nie dlatego, żebym coś popsuł; po prostu tak działa Internet Explorer. Sugeruję użycie Mozilli lub Opery.

CSS podobnie jak HTML i javascript jest to zwykły dokument tekstowy (lub jego fragment). Definicja stylu niezależnie od tego gdzie jest umieszczona zbudowana jest zawsze w ten sam sposób:

nazwa_właściwości:parametr;

i wszystkie są dla jednego znacznika - jeśli definicje są umieszczone w sekcji head, lub osobnym pliku - zgrupowane w nawiasach w ten sposób:

selektor {nazwa_właściwości:parametr; nazwa_właściwości:parametr; nazwa_właściwości:parametr;}

Dla przykładu: krawędź ma własciwości style width i color, więc np:

img {border-style:solid; border-width:1px; border-color:black;}

oznacza, że znacznikom img została przypisana krawędź z lini ciągłej, grubości jednego piksela i koloru czarnego, można to skrócić do takiej formy:

img {border:solid 1px black;}

lub

img {border:solid 1px #000;}

natomiast:

img {border:none;}

oznacza brak krawędzi.

Istnieje wiele metod, żeby poszczególne właściwości odnieść do konkretnych obiektów, do precyzyjnego określenia elementu mającego konkretną właściwość służy kilka rodzajów selektorów.

• proste:

  img {border:none;}
  

  Własciwość zostanie przypisana wszystkim znacznikom img.
  
• klasowe: W akruszach stylów oznacza się je kropką:

  .noborder {border:none;}
  .border {border:solid 1px #000;}
  

  document.html:
  

  <img class="noborder" />
  <img class="noborder" />
  <img />
  

  W tym przykładzie właściwość zostanie przypisana tylko dwóm pierwszym znacznikom img.
  Element może zostać przydzielony jednocześnie do dwóch klas, robi się to w ten sposób:

  <img class="noborder border" />
  

  Oczywiście w tym przypadku nie ma to sensu, ale ilustruje działanie CSS - ostatnia w kolejności dyrektywa ma wyższość i obrazek zostanie otoczony czarną linią o grubości jednego piksela.
• ID:

  #withnoborder {border:none;}
  

  document.html:
  

  <img id="withnoborder" />
  

  służy do opisania cech obiektu o określonym identyfikatorze.
  
• kontekstowe:

  p img {border:none;}
  

  Zbudowane z dwóch (lub więcej) znaczników rozdzielonych tylko spacją i określają właściwości tylko dla zagnieżdżonych w tej kolejności znaczników; w tym wypadku wyłaczone jest obramowanie dla znaczników img w obrębie paragrafów, więc w poniższym przykładzie drugi znacznik img będzie miał obramowanie
  

  <p>
  <img />
  </p>
  <img />
  

  Jeżeli znaczniki są odzielone przecinkiem jest to wyliczenie:

  div, p {border:solid 1px #000;}
  

  oznacza, że wszystkie paragrafy i obiekty div będą miały krawędź z lini ciągłej o grubości jednego piksela koloru czarnego, natomiast:

  div p {border:solid 1px #000;}
  

  przypisuje taką krawędź tylko dla paragrafów wewnątrz obiektów div.
  Znaczniki te mogą mieć przypisane zarówno identyfikatory jak i klasy, np:
  

  div#main p.inborder {border:solid 1px #000;}
  

  przypisuje taką krawędź tylko paragrafom klasy .inborder znajdującym się w obiekcie div o identyfikatorze #main.

  <div id="main">
  <p class="inborder">
  tutaj zawartość paragrafu otoczona krawędzią
  </p>
  </div>
  

• pseudoklasy i pseudoelementy:
  Nie są właściwie selektorami w pełnym tego słowa znaczeniu jednak ze względow funkcjonalnych - ponieważ pełnią rolę selektorów - opiszę je tutaj.
  Mogą się odnosić do wszystkich znaczników (jak selektor prosty) nazwa_znacznika:nazwa_selektora lub do określonej ich klasy nazwa_znacznika.nazwa_klasy:nazwa_selektora
  
  • pseudoklasy: odrózniają różne stany niektórych znaczników (np. odnośników):
    • a:link zwykły odnośnik
    • a:active aktywny
    • a:visited odwiedzony
  • pseudoelementy: oznacza pewną część znacznika; CSS1 udostępnia dwa pseudoelementy: :first-letter i :first-line, które można zastosować w znacznikach blokowych. Odnoszą się one jak sama nazwa wskazuje do pierwszej litery (inicjał) i pierwszej linii (np. linia nagłówkowa).
    

Style można umieszczać na wiele sposobów:

• wpisane (wewnątrz znacznika przez atrybut style):

  <img style="border:none;" />
  

  co oznacza brak krawędzi - w tym przypadku obramowania - dla tego znacznika, oczywiście w tym przypadku nie ma potrzeby używania selektora, ale wpisana właściwość dotyczy tylko tego znacznika.
  Uwaga: ten sposób umieszczania styli jest niewskazany w XHTML 1.1. Ze względu na oddzielenie treści od wyglądu atrybut style ma status deprecated.
• osadzone (w sekcji head):

  <html>
  <head>
  <style type="text/css">
  #withnoborder {border:none;}
  </style>
  </head>
  <body>
  <img id="withnoborder" />
  

  więc w skrócie wyglada to tak:

  <style type="text/css">
  ...tutaj definicje...
  </style>
  

• zewnętrzne (w osobnym pliku o rozszerzeniu .css):
  document.html:
  

  <html>
  <head>
  <link rel="stylesheet" href="style.css" type="text/css" />
  </head>
  <body>
  <img id="withnoborder" />
  

  style.css

  #withnoborder {border:none;}
  

  I tu konieczna uwaga, bo błąd jest częsty - w osobnych plikach CSS nie stosuje się żadnych znaczników w rodzaju <style type="text/css">, są tam wyłącznie dyrektywy CSS.
• importowane (dołączone do osadzonych przez @import):
  document.html:

  <html>
  <head>
  <style type="text/css">
  @import url(style.css)
  </style>
  </head>
  <body>
  <img id="withnoborder" />
  

  style.css:

  #withnoborder {border:none;}
  

  Ta ostatnia metoda ma dwie zalety: można dołączyć do dokumentu HTML dowolną ilość arkuszy styli i nie rozumie jej Netscape Navigator 4.x oraz inne przestarzałe przeglądarki. Dzięki temu można utworzyć dokumenty, które będą widziane jako prosty HTML w starych przeglądarkach i tak jak to zaprojektowaliśmy w nowych.
  Ale uwaga: dyrektywy @import muszą pojawić się na początku a dopiero po nich mogą występować definicje stylów osadzonych, np.:
  

  <html>
  <head>
  <style type="text/css">
  @import url(style.css)
  p {background-color:red; color:blue;}
  @import url(style2.css)
  </style>
  </head>
  

  w tym przykładzie dyrektywa importu z pliku style2.css zostanie zignorowana.

• Komentarze wewnątrz styli tworzy się tylko w jeden sposób:

  /*
  powyżej początek komentarza
  
  poniżej koniec komentarza
  */
  

  Komentarze nie mogą być zagnieżdżone.
• Do tej pory jeszcze czasem spotyka się zalecenie by ze względu na starsze przeglądarki umieszczać style osadzone w komentarzach w ten sposób:

  <style type="text/css">
  <!--
  
  -->
  </style>
  

  Ale jest to już od dawna nieaktualne. Dotyczy bowiem nieużywanych już przeglądarek (MSIE i NN w wersjach 3.x). Takie komentarze są zupełnie niepotrzebne i nie są częścią żadnego standardu.

Domyślnie dodatnie, w niektórych wypadkach można wpisać wartości ujemne, z oczywistych powodów nie wpisujemy jednostki wartości jeśli wynosi zero, ważne: między znakiem (jeśli stosujemy wartość ujemną) wartością a określeniem jednostki nie może być spacji

• jednostki wielkości
  • relatywne - mają tą zaletę, że dostosowują wielkość obiektu zachowując proporcje
    • em - wysokość fontu w obiekcie
    • ex - wysokość litery 'x' w obiekcie
    • px - wielkość pixela, zależna od rozdzielczości
  • absolutne - powinno się je stosować tylko w wypadku jeśli dobrze znamy sposób w jaki dokument zostanie wyświetony
    • in - cal
    • cm - centymetr
    • pt - punkt
    • pc - pika
  Najbardziej bym polecał wyznaczenie wielości fontu w obiekcie body w pikselach a położenie i rozmiar obiektów w dokumencie za pomocą jednostek em (lub procentów - jeśli są to obiekty zagnieżdżone): zapewni to zachowanie proporcji;
• wartości procentowe odnoszą się do wielkości obiektów w których są zagnieżdżone, lub do obiektu, do którego się odnoszą, np: line-height: 120%; oznacza odległość pomiędzy liniami bazowymi sąsiednich wierszy 102% wielkości fontu i jest identyczna z line-height: 1.2em;
• określenia kolorów
  
  • nazwy 16 kolorów z palety Windows VGA: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
  • RGB w tym formacie zapisu kolorów wypisuje się kolejno trzy wartości składowe:
    • color: #f00
    • color: #ff0000
    • color: rgb(255, 0, 0)
    • color: rgb(100%, 0%, 0%)
    są to określenia tego samego koloru; pierwsze dwa są częsciej spotykane: po znaku # trzy lub sześć heksadecymalnych cyfr
• url zawsze wygląda w ten sposób: url(tu_adres);

• Hierarchia elementów
  Hierarchiczny układ elementów HTML tworzy tzw. drzewo dokumentu (document tree). Wszystkie (oprócz samego elementu HTML) mają tylko jeden element nadrzędny (tzw. rodzica), dla którego z kolei są dzieckiem (child). Elementy bezpośrednio zawarte w tym samym obiekcie są dla siebie rodzeństwem (sibling). Z kolei pojęcia potomka (descendant) i przodka (ancestor) określają o jeden lub więcej stopni hierarchii. To znaczy, że każdy rodzic to przodek (ale nie na odwrót) i każde dziecko to potomek (z tym samy zastrzeżeniem) a dzieci tego samego rodzica to rodzeństwo.
  
• Kaskadowość
  Jest to bardzo istotna cecha CSS (zawarta w nazwie) oznaczająca, że własności tą metodą są realizowane według pewnej hierarchii ważności. Jeżeli istnieje konflikt, np. styl wpisany w znaczniku różni się od przypisanego do klasy, w której należy to tylko jeden z nich może zostać zrealizowany.
  Realizowane są według tej ważności:
  • wpisane
  • osadzone
  • zewnętrzne
  • importowane
  • domyślne ustawienia przeglądarki
  Własności identyfikatora mają pierwszeństwo przed wlasnościami klasy, a style autora przed stylami użytkownika.
  W przypadku gdyby dwa style miały tą samą ważność, można jeden z nich zaznaczyć jako ważny i ten zostanie wykonany, np.:
  

  img {border:none !important;}
  

  Jeśli z jakichś powodów, żadna z powyższych regół nie rozstrzygnęła ważności stylów decyduje o tym ostatnia, bardzo prosta reguła - realizowany jest ten, który ostatni wystąpił, np:

  img {border:solid 1px black; border:none;}
  

  oznacza brak krawędzi.
  Ogólniej można to ująć tak: im bliżej danego elementu jest dana własność i im później się pojawia tym jest ważniejsza. Poza tym - CSS1 uznaje wyższość stylów autora, a CSS2 użytkownika.
• Dziedziczenie
  Oznacza, że zasady dla poszczególnych znaczników przekazywane są z rodzica na potomka, to znaczy, że własności obiektów zagnieżdżonych określane są przez własności obiektów, w których się znajdują. Na przykład jeśli określimy dla elementu div kolor tła to jest on równocześnie kolorem tła zawartych w nim paragrafów, oczywiście o ile te paragrafy nie mają określonego innego koloru tła.
  

• font
  • font-family można po kolei określić nazwę kroju, fontu i generic family (jeśli określamy tą własność fontu podanie generic family jest wymagane - należy wybrać spośród: serif, sans-serif, cursive, fantasy, monospace);
    np.:

    font-family: 'Times New Roman', times, serif;
    

    jednak ponieważ wybór czcionek w przeglądarce nie jest zbyt wielki (tzn. w praktyce nie możemy liczyć na zbyt wielki wybór) praktyczne jest następujące określenie:

    font-family: arial ce, sans-serif;
    

  • font-style normal (domyślny), italic (kursywa), oblique (pochyły)
  • font-variant normal (domyślny), small caps (kapitaliki)
  • font-weight
    • określenia słowne: normal, bold
    • relatywne względem zastanego: bolder (o stopień cięższy), lighter (o stopień lżejszy)
    • określenia numeryczne: 100, 200, 300, 400 (odpowiada normal), 500, 600, 700 (odpowiada bold), 800, 900
  • font-size
    • absolutne (współczynnik 1.5):
      xx-small, x-small, small, medium, large, x-large, xx-large,
    • relatywne (względem zastanego):
      normal, smaller, larger,
    • jednostki: pt (punkty), px (piksele), em (1em - wielkość normal), % (100% - wielkość normal)
  • font w wygodny sposób pozwala tworzyć definicję własności fontów dla obiektu, np:

    font: bold san-serif 10pt;
    

    co oznacza wytłuszczoną czcionkę bezszeryfową wielkości 10 punktów, a trochę bardziej rozbudowany styl:

    font: bold italic 10pt/12pt arial ce san-serif;
    

    definiuje wytłuszczoną i pochyłą czcionkę Arial Ce (a jeśli jej nie ma to domyślną bezszeryfową wielkości 10 punktów (12 po ukośniku oznacza wysokość linii)
    Mi w praktyce najwygodniej określać wielkość czcionek w em
    
• kolor znaków i własności tła
  • color określa kolor znaków (definicje kolorów są omówione osobno); chociaż nie jest to wymagane jeśli zdefiniujemy kolor znaków należy też zdefiniować kolor tła;
  • background-color określa kolor tła; chociaż nie jest to wymagane kolor tła powinien się różnić od koloru krawędzi
  • background-image url(adres_pliku), none; można przypisać do obiektu obraz tła; koniecznie należy pamiętać, że nie ma spacji pomiędzy url(
  • background-repeat repeat (jeśli obraz jest mniejszy niż obiekt powtarzany jest w linii poziomej i pionowej, repeat-x (powtarzany jest tylko w linii poziomej), repeat-y (powtarzany jest tylko w linii pionowej), no-repeat (nie jest powtarzany niezależnie od rozmiarów)
  • background-attachment scroll (obraz tła 'mocowany' jest do obrazu, przewija się razem z obiektem), fixed (obraz tła umieszczony jest względem ekranu, nie przewija się); niektóre przeglądarki (MSIE oraz Opera 6) nie radzą sobie z poprawnym pozycjonowaniem
  • background-position top, center, bottom, left, right, można też pozycję określić w jednostach wielkości lub procentowo
  • background ogólna definicja tła pozwalająca skrótowo je zdefiniować, np:
    background: url(nazwa.png) fixed; oznacza, że tło zostanie zbudowane z pliku nazwa.png umieszczonego względem ekranu przeglądarki (a więc tło nie będzie się przewijało), powtarzanie i pozycja nie zostały zdefiniowane, więc zostaną zastosowane ustawienia domyślne (0,0 i repeat);
    natomiast trochę bardziej skomplikowana definicja:
    background: red url(nazwa.png) center repeat-y fixed; umieszcza obrazek tła dokładnie pośrodku w ten sposób, że nie jest przewijany i powtarza go tylko w osi pionowej, więc jeśli nie jest szeroki na cały ekran po bokach ma czerwone tło.
    
• tekst
  
  • word-spacing definicja odległości pomiędzy słowami, domyślna oznaczana jest jako zero, więc word-spacing:1em; doda do istniejącej odległości jednostkę 1em; możliwe są także wartości ujemne
  • letter-spacing jak wyżej, tylko dotyczy poszczególnych liter, ustawienie letter-spacing:0; może się okazać przydatne jeśli nie chcemy, żeby odległość pomiędzy litrami była zmieniana podczas justowania
  • text-decoration none (domyślna dla tekstu zwykłego), underline (domyślna dla odnośników), overline, line-through, blink (miganie - nie zawsze realizowane przez przeglądarkę),
    Dobrym zwyczajem jest wyączenie podkreślenia odnośników, robi się to w bardzo prosty sposób:
    a {text-decoration:none;}, jest to dość powszechnie stosowane ponieważ podkreślanie odnośników jest już outdated, wygląda nienajlepiej; ponieważ stają się wtedy mniej widoczne można je wyodrębnić innym kolorem tła od zwykłego tekstu, a jeśli nie jest ich zbyt dużo lub tworzą menu także wytłuścić
  • vertical-align
    baseline, middle, sub, super, text-top, text-bottom, top, bottom,
  • text-transform capitalize, uppercase, lowercase, none,
  • text-align left, right, center, justify
  • text-indent wartość wcięcia tekstu w elemencie blokowym, określana w jednostach długości lub procentach, może być ujemna
  • line-height wysokość wiersza - definiuje odległość pomiędzy dwiema sąsiadujacymi liniami bazowymi, określona może zostać
    • relatywnie względem wielkości fontu numerem (np. 1.2 dla fontu 10pt to 12pt) albo procentowo (też względem fontu)
    • w jednostach wielkości (tak samo jak font)
• box
  
  • margin-top, margin-left, margin-bottom, margin-right, margin definiuje wartość marginesu dla każdego z boków z osobna lub łącznie, można określić ją jako auto, w jednostach wielkości lub procentowo (wartość procentowa odnośi się do obiektu-przodka), może mieć wartość ujemną; wyodrębnić zróżnicować wielkość marginesu można na dwa sposoby:
    margin:1em; margin-left:4em; w tym wypadku najpierw druga reguła zmieni zostanie również zrealizowana ponieważ następuje po pierwszej, gdyby były wpisane w odwrotnej kolejności cały margines wielkość 1em; można też zrobić to tak:
    border: 1em 1em 1em 4em; da to ten sam efekt
  • padding-top, padding-left, padding-bottom, padding-right, padding wielkość odstępu wewnętrznego, dokładnie tak samo jak z marginesem za wyjątkiem tego, że nie może mieć wartości auto ani wielkości ujemnej
  • border-top-width, border-left-width, border-bottom-width, border-right-width, border-width określenie grubości krawędzi, dla każdego boku oddzielnie lub łącznie, ma dokładnie te same cechy jak atrybut padding, ale możliwe są jeszcze trzy wartości: thin, medium (domyślna), thick
  • border-color określenie koloru krawędzi, pojedyncza wartość opisuje kolor wszystkich czterech boków, ale można opisać je oddzielnie według tych samych reguł, które dotyczą grubości, jeśli żaden kolor nie jest określony domyślnie stosuje się ten z obiektu, w tkórym się znajduje.
  • border-style określa sposób wyświetlania krawędzi; none oznacza niewyświetlenie krawędzi niezależnie od tego jaką ma grubość,
    border-style:dotted;

    border-style:dashed;

    border-style:solid;

    border-style:double;

    border-style:groove;

    border-style:ridge;

    border-style:inset;

    border-style:outset;
  • border-top, border-left, border-bottom, border-right, border określa wszystkie wyżej wymienione cechy krawędzi osobno dla każdego boku, lub wszystkich łącznie
    
    border:dotted 0.5em red;
    border:solid 1px silver;
    border:solid 1px silver; border-bottom:dotted 0.5em red;
    border:solid 1px silver; border-right:double 1em gray; border-bottom:dotted 0.5em red; border-left:none;
  • width określenie szerokości obiektu, domyślną wartością jest auto, można określic ją w jednostkach wielkości lub procentach, nie może mieć wartości ujemnych, najbardziej praktyczne zastosowanie ma do określenia wielkości obiektów img (specyfikacja XHTML wymaga by były wpisane)
  • height określenie wysokości obiektu; ma te same cechy co szerokość za wyjątkiem tego, że nie można określić wartości procentowo.
  • float określa sposób umieszczenia obiektu; none (miejsce będzie wynikać z porządku obiektów w dokumencie; z atrybutem left (lub right) zostanie przesunięty w lewo (lub prawo).
  • clear określa opływanie obiektów po bokach, parametr określa strony, gdzie nie mogą się pojawić żadne obiekty: both (oba boki wolne), left (lewa strona), right (prawa strona); none (obiekty mogą opływać opisywany element z obu stron)
• lista
  
  • list-style-type określa formę wyliczenia w listach: disc (domyślna - zastosowana tutaj), circle (okrąg), square (prostokąt), decimal (cyfry arabskie), lower-roman (cyfry rzymskie - małe litery), upper-roman (cyfry rzymskie - duże litery), lower-alpha (małe litery alfabetu), upper-alpha (duże litery alfabetu), none (brak);
  • list-style-image wskazuje obrazek (w pliku) użyty jako znacznik wyliczenia: none (brak - domyślna), url(adres_i_nazwa_pliku); np:

    list-style-image: url(nazwa.png);
    

  • list-style-position określa jak zostanie wskaźnik zostanie umieszczony, czy wewnątrz listy (inline) czy na zewnątrz (outline - wartość domyślna)
  • list-style pozwala określić wszystkie cechy naraz, np. lista w której znajdują się wyliczenia własności CSS ma wartości domyślne
    list-style: disc outline;, natomiast zagnieżdżona w niej list-style: circle outline;
• display i white space
  • diplay określa sposob w jaki obiekt zostanie wyświetlony: block (utworzony zostanie nowy obiekt blokowy zgodnie i umieszczony zgodnie z regułami Box Model), inline (zostanie wpisany w inline box zaraz po poprzedającym go obiekcie), list-item (element listy); none (w ogóle nie zostanie wyświetlony);
  • white-space określa traktowanie zwykłych spacji: normal (powtórzenia są skracane do pojedynczej, możliwe jest zawijanie), pre (powtórzenia są respektowane), nowrap (zawijanie wierszy dokonuje się tylko poprzez znacznik br);

(opis CSS2 jest streszczeniem informacji z artykułu Marka Łaptaszyńskiego 'Kaskadowe arkusze stylów' cz.2 - Magazyn Internet; 1/00)
Z oczywistych względów podstawowym założeniem CSS Level 2 jest wsteczna kompatybilność z CSS Level 1. Oznacza to, że każdy dokument CSS1 jest również poprawnym dokumentem CSS2. Ale specyfikacja, która w przypadku CSS1 była po prostu jednym ciągiem tekstu została podzielona na osobne rozdziały opisujące poszczególne grupy właściwości. Jest to przygotowanie do przyszłej modułowej budowy standardów W3C.
Najważniejsze zmiany to preferowanie stylów użytkownika (w przypadku konfliktu) oraz nowe selektory (głownie :hover, który jest poprawnie realizowany przez wszystkie nowoczesne przeglądarki - na jego użyciu zbudowano wiele interesujących technik) Podstawowe różnice:

• wyższość arkuszy użytkownika - jeśli pojawią się tej samej wagi definicje zostanie wykonana użytkownika, odwrotnie niż było w CSS1
• rozbudowany system selektorów (XML.com: 'CSS 3 Selectors'
  
  • selektor uniwersalny - równoważny definiowaniu atrybutów dla body lub oznaczający 'wszystko w'; np: p * a {text-decoration:none;} wszystkie odnośniki w paragrafach nie będą podkreślone
  • selektor 'child' - określa styl dla elementów, które są potomkami określonych elementów, tworzą go dwa (lub więcej) elementów rozdzielonych znakiem >; np. div>p {border:solid 1px black;} oznacza, że tylko paragrafy bezpośrednio zagnieżdżone w obiektach div będą miały czarną krawędź
  • selektor przystający - określa styl elementów następujących bezpośrednio po innych elementach +; np. h2+p {margin-left:2em;} co oznacza, że paragrafy następujące bezpośrednio po nagłówkach h2 będą trochę odsunięte od lewej krawędzi.
  • selektory atrybutów - definiuje styl elementów posiadających okreslone atrybuty
    • element[atrybut] gdy posiada dany atrybut o dowolnej wartości
    • element[atrybut=wartość] gdy wartość tego atrybutu jest zgodna z określoną
    • element[atrybut~=wartość] gdy element ma liste wartosci danego atrybutu i jedna z nich jest zgodna z określoną
    • element[atrybut|=wartość] gdy przedrostek (część atrybutu przed myślnikiem) atrybutu jest zgodny z określonym
    • [atrybut] wszystkie wymienione wyżej selektory działają również jeśli brak jest określenie jakich elementów dotyczą
  • nowe pseudoklasy (:hover, :focus, :lang, first-child)
    • :hover (nad obszarem elementu znalazło się urządzenie wskazujące, np. kursor myszy);
    • :focus (elementy, które otrzymały zogniskowanie, np. przez kliknięcie myszą, są zaznaczone, mogą mieć ten atrybut z definicji)
    • :first-child dotyczy elementu, który jest pierwszym elementem potomnym danego określonego elementu
      
    • :lang dotyczy wszystkich elementów z określoną wartością atrybutu lang
  • nowe pseudoelementy (:before, :after)
    :before i :after - generują zawartość (określoną własnością content) bezpośrednio przed i po wskazanym elemencie
• podział specyfikacji ze względu na różne media:
  
  • Podział na typy mediów:
    • all wszystkie urządzenia
    • aural przetwarzające tekst pisany na mowę, syntetyzatory mowy
    • braille urządzenia dotykowe Braille'a
    • embossed drukarki Braille'a
    • print urządzenia drukujące
    • projection projektory prezentacyjne
    • screen kolorowe monitory komputerowe
    • tty urządzenia znakowe (terminale)
    • tv telewizory (niska rozdzielczość, kolorowe, z ograniczonym przewijaniem i możliwością odtwarzania dźwięku)
  • Podział mediów na grupy:
    • continuous (ciągłe) lub (paged) stronicowane; media ciągłe umożliwiają wyświetlanie dokumentu w całości, bez podziału na strony
    • visual (wizualne), aural (dźwiękowe), tactile (dotykowe)
    • grid (znakowe), bitmap (graficzne)
    • interactive (interaktywne), static (statyczne)
    • all (wszystkie typy)
  • Możliwość tworzenia oddzielnych arkuszy dla różnych rodzajów mediów:
    • przez selektor @media, np. @media screen, tv {selektor {atrybut:wartość;} selektor...}pomiędzy nawiasami {...} grupuje się osobne definicje dla znaczników
    • atrybut media w znaczniku link: <link rel=stylesheet type="text/css" href="style-print.css" media="print">
    • podanie listy mediów jako drugiego parametru polecenia @import:@import url(style-print.css) print;
• rozbudowane możliowści definiowania stylów dla tabel
• wszystkie własności moga przybierać wartość inherit (przejęcie wartości atrybutu z odpowiedniego elementu nadrzędnego)

Tutoriale:

• zwon.org: CSS 2.1 Reference - CSS Selectors Level 3
• blooberry.com: Index Dot CSS || CSS Property Index
• Web Design Group: Cascading Style Sheets
• w3schools.com: CSS Tutorial
• digital.com: HTML Cheat Sheet
• echoecho.com: The Complete CSS tutorial
• devguru.com: CSS2
• Web Standards: CSS
• websitetips.com: Articles: CSS
• SELFHTML-Wiki: CSS (Deutsch)
• css.nu - Cascading Stylesheets verständlich erläutert (Deutsch)
• useit.com: Effective Use of Style Sheets
• RichInStyle.com: master class - CSS2 tutorial
• WebReference.com: HTML Tutorials and Web Page Design - Advanced CSS Layouts: Step by Step
• BrainJar.com: CSS Positioning
• HTMLSource: CSS: cascading style sheets tutorials and style guide
• deniswilford.com: tutorial - flexible page
• Self paced web designed courses
• The CSS-discuss Wiki
• Warsztat

CSS sites:

• DevMo PL: CSS
• CSS Wiki - strona główna
• Eric Meyer on CSS || css/edge || Complex Spiral Consulting
• CSS Examples || Box Model Hack || Favelets
• BlueRobot || The Layout Reservoir || CSS Centering: Auto-width Margins || CSS Centering: Negative Margin
• Box Lessons || Little Boxes
• gazingus.org || Using Lists for DHTML Menus
• Stopdesign
• Agitprop
• saila.com - New Media Matters
• Real World Style
• Homepage of Peter-Paul Koch || CSS 2 Tests || JavaScript: W3C DOM Compatibility - overview
• Incutio Archivist || css-discuss: last 40 messages
• css Zen Garden
• Newt Edge
• css-discuss.org
• Albin.Net.CSS: Techniques for Web Developers
• CSS/Exp
• Design Meme
• CSS Destroy
• Position Is Everything
• CSS Workshop
• CSS Play - Sea Muss M Squirrel
• K | just k, indeed
• CSS Quirks
• Fabrice Pascal - Bugbase
• Micah Sitting - CSS Bugring
• IE 5 Mac - oddities and bugs
• Virtuelvis
• CSS Test Zone
• Infimum Border Design: Slants
• devnull @ tagsoup.com
• CSS Design Ideas
• Piggin.Net - Macro-Typography: A Style Guide
• Dan Loda's Webweaver Collective Home Page
• SmackTheMouse
• CSS contents and browser compatibility

Artykuły:

• Wikipedia: Internet_Explorer_box_model_bug
• jqjacobs.net/web: Cascading Style Sheets
• CSS Table Gallery
• Informatyka - i10: Styl: prezentacja dokumentów elektronicznych
• Introduction to CSS shorthand properties
• O'Reilly Network: Working with Fonts and CSS || Top 10 CSS Authoring Tips
• Digital Web Magazine: Web Page Reconstruction with CSS
• All My FAQs Wiki: Center with CSS
• Dr.Dobbs Journall: Generating Content the Easy Way || CSS2: Font Management
• dive into mark: Pure CSS tabs
• CSS 2 Tests
• evolt.org: Using CSS to create rollovers
• A List Apart: Fear of Style Sheets || Fear of Style Sheets 2 || Fear of Style Sheets 3: a new era || Fear of Style Sheets 4: Give Me Pixels or Give Me Death || A Web Designer's Journey || To Hell with Bad Browsers || Accesibility: the Politics of Design || Practical CSS Layout Tips, Tricks and Techniques || CSS Design: Taming List || CSS: Making Alternate Style Sheets Work
• Toward a standard font size interval system
• The Amazing Em Unit
• htmlgoodies.com: ACSS: Aural Style Sheets
• Netscape DevEdge: Updating DHTML Web Pages for next generation browsers || Browser Detection and Cross Browser Support || Defining Cross-Browser Tooltips || Netscape DevEdge Redesign: CSS || Netscape DevEdge Redesign: JavaScript || Netscape DevEdge Redesigns As Standards Showcase || Properly Using CSS and JavaScript in XHTML Documents || DevEdge Redesign FAQ || Using Mozilla in Testing and Debugging Web Sites || Case Study in a Successful Standards-Based Migration || Inner-Browsing: Extending Web Browsing the Navigation Paradigm || Standards-Based Collapsible Table of Contents Widget (CTOCWidget) || The Search for the Missing Link || DHTML Demonstrations Using DOM/Style || DevEdge Netscape Sidebar Tabs
• mozilla.org || Web developer documentation || Traversing an HTML Table with JavaScript and DOM Interfaces || DOM Sample Code
• WebReference.com: Advanced CSS Layouts: Step by Step
• bradchoate.com: Internet Explorer 6 Rendering Problem
• Why tables for layout is stupid:

W3C:

• Cascading Style Sheets home page
• Cascading Style Sheets, level 1
• Cascading Style Sheets, level 2
• Cascading Style Sheets 'under construction'
• Positioning HTML Elements with Cascading Style Sheets

Walidatory:

• W3C: CSS Validator
• WDG: CSSCheck, a Cascading Style Sheet Lint