Menu

CSS - Kaskadowe arkusze stylów (ang. Cascading Style Sheets) to język służący do opisu formy prezentacji (wyświetlania) stron WWW. Arkusz stylów CSS to lista dyrektyw (tzw. reguł) ustalających w jaki sposób ma zostać wyświetlana przez przeglądarkę internetową zawartość wybranego elementu (lub elementów) (X)HTML lub XML. Można w ten sposób opisać wszystkie pojęcia odpowiedzialne za prezentację elementów dokumentów internetowych, takie jak: rodzina czcionek, kolor tekstu, kolor tła, marginesy, obramowanie, odstęp międzywierszowy lub nawet pozycja danego elementu względem innych elementów bądź okna przeglądarki. Wykorzystanie arkuszy stylów daje znacznie większe możliwości pozycjonowania elementów na stronie, niż oferuje sam (X)HTML.

CSS został stworzony w celu odseparowania struktury dokumentu od formy jego prezentacji. Separacja ta zwiększa zakres dostępności witryny, zmniejsza zawiłość dokumentu, ułatwia wprowadzanie zmian w strukturze dokumentu. CSS ułatwia także zmiany w renderowaniu strony w zależności od obsługiwanego medium (komputer, tablet, smartfon, dokument do druku). Stosowanie zewnętrznych arkuszy CSS daje możliwość zmiany wyglądu wielu stron naraz bez ingerowania w sam kod (X)HTML, ponieważ arkusze mogą być wspólne dla wielu dokumentów.


Przykładowe zastosowanie CSS:

Przykładowy tekst bez użycia stylu CSS:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum velit nisi, dapibus lobortis ullamcorper vel, vulputate sit amet dolor. Sed volutpat ultrices lectus, faucibus blandit velit mattis ut.

Kod:

‹p›Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum velit nisi, dapibus lobortis ullamcorper vel, vulputate sit amet dolor. Sed volutpat ultrices lectus, faucibus blandit velit mattis ut.‹/p›

 


 

Ten sam tekst z użyciem stylu CSS:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum velit nisi, dapibus lobortis ullamcorper vel, vulputate sit amet dolor. Sed volutpat ultrices lectus, faucibus blandit velit mattis ut.

Kod:

‹p style="font-family:Georgia, 'Times New Roman', Times, serif; color:#0C3; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum velit nisi, dapibus lobortis ullamcorper vel, vulputate sit amet dolor. Sed volutpat ultrices lectus, faucibus blandit velit mattis ut.‹/p›

 


 

Opis zastosowanych reguł CSS:

  • font-family: Georgia, 'Times New Roman', Times, serif; - rodzaj kroju czcionki;
  • color: #0C3; - kolor czcionki;
  • text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); - cień pod tekstem.