Kaskadowe arkusze stylów CSS (ang. Cascading Style Sheets) to kod służący do nadawania wyglądu strony. CSS Podstawy przeprowadzi cię przez bazowe zagadnienia, abyś mógł zacząć modyfikować wygląd swojej strony. Odpowiemy na takie pytania jak: Jak zrobić, żeby mój tekst był czarny albo czerwony? Jak wyświetlić poszczególną zawartość strony w wybranych miejscach ekranu? Jak dekorować stronę obrazami czy nadać kolor tła?
Czym właściwie jest CSS?
Podobnie jak HTML, CSS nie jest językiem programowania. Nie jest jednak też językiem znaczników — jest językiem arkuszy stylów (ang. style sheet language). Oznacza to, że pozwala on selektywnie stosować style do elementów w dokumentach HTML. Na przykład, aby zaznaczyć wszystkie paragrafy na stronie HTML i zmienić w nich kolor tekstu na czerwono, należy napisać ten kod CSS:
p {
color: red;
}Sprawdźmy: wklej te trzy linie kodu do nowego pliku. Plik nazwij style.css i umieść go w katalogu styles.
Wciąż jednak musimy powiązać ten kod CSS z twoim dokumentem HTML. W przeciwnym wypadku stworzony kod CSS nie będzie miał wpływu na wygląd twojej strony. (Jeśli nie śledzisz naszego projektu od poczatku, przeczytaj Struktura plików witryny oraz HTML podstawy, żeby dowiedzieć się co wpierw należy wykonać.)
- Otwórz plik
index.htmli wklej poniższy kod gdzieś w sekcji nagłówka (czyli pomiędzy elementami<head>i</head>):<link href="styles/style.css" rel="stylesheet" type="text/css"> - Zapisz plik
index.htmla następnie otwórz go w przeglądarce. Powinieneś móc zobaczyć coś takiego:
Jeśli tekst twoich akapitów jest czerwony, gratulacje! Właśnie napisałeś swój pierwszy skuteczny kod CSS.
