HTML5 & CSS3

CSS- Kaskadowe arkusze stylów

Wygląd strony internetowej jest opisany za pomocą odpowiednich komend i znaczników. Początkowo informacje o kolorze, czcionki, wielkości liter umieszczano bezpośrednio w tekście, np. "<FONT COLOR="RED"> Tekst 1 </FONT>" powodowało wyświetlenie "Tekstu 1" w kolorze czerwonym, a "<FONT SIZE="20"> Tekst 2 </FONT> zmieniało rozmiar Tekstu 2 na 20 pkt. Wraz z rozwojem i rozbudową zawartości stron, taki rodzaj składni stał się niewygodny, a sam kod nieczytelny. Rozwiązaniem stał się osobny plik z rozszerzeniem ".css" odpowiadający jedynie za wygląd poszczególnych elementów strony. Wystarczyło jedynie umieścić w kodzie strony adres odpowiedniego pliku css, np. w taki sposób: "<link rel="stylesheet" href="plik. css" type="text/css" />". Poszczególne elementy strony ograniczano znacznikami, które znajdowały się również w pliku css. Przykładowy zapis ze z pliku html: "<P1>Tekst 1"</P> <P2> Tekst 2 </P> oraz w pliku css: "P1 { font-color: red;} P2 {font-size:20}" powodował, że "Tekst 1" wyświetlał się na czerwono, a "Tekst 2" miał rozmiar 20 pkt. Takie rozwiązanie pozwala nie tylko osiągnąć lepszą organizację i czytelność kodu, ale również użyteczność. Raz zdefiniowany w arkuszu css znacznik może być wielokrotnie używany w pliku html.