Spis treści
CSS (ang. cascading style sheets, kaskadowe arkusze stylów) – to język stylów który pozwala tworzyć wygląd strony na podstawie języka HTML lub XML. CSS jest jedną z głównych technologii używanych do budowy stron internetowych i aplikacji. CSS, HTML i JavaScript to 3 najważniejsze języki, których używają programiści Frontend.
Style CSS – co to?
Style CSS to termin odnoszący się do definicji stylów, które są używane do dokumentów HTML za pomocą css. Oznacza to, że definiuje on jak dany element ma wyglądać. Dzięki style CSS można tworzyć ręcznie nowy układ graficzny strony.
Jakie element HTML można zmienić za pomocą CSS?
W CSS możliwości zmian jest wiele. Możemy zmienić np.:
- układ strony – kaskadowe arkusze stylów pozwalają na zmianę układu elementów na stronie, ich pozycji, rozmiaru, odstępów między sobą,
- kolor i tło – wprowadzenie właściwości dla kolorów czcionki, tła czy obrazów,
- responsywność strony – CSS pozwala dostosować układ strony do prezentacji jej na różnego rozmiaru urządzeniach, w innej orientacji,
- efekty wizualne – kaskadowe arkusze stylów pozwalają tworzyć zaawansowane efekty, jak gradienty, cienie, animacje czy przejścia.
rozmiar czcionki (font size), wyrównanie tekstu (text align)i kolor tła (background) itd. Język ten jest cały czas rozwijany, posiada nowe selektory i znaczniki, które są kompatybilne z wcześniejszymi wersjami.
Jak wygląda kod CSS?
Przykład kodu:
body {
background-color: white;
}
h1 {
color: red;
font-size: black;
margin-left: 20px;
text-align: centre;
}Jak połączyć CSS z HTML?
- Zewnętrzne arkusze stylów – style CSS to osobny plik, który zawiera w jednym arkuszu spis deklaracji dotyczących wyglądu strony. Taki plik jest linkowany w pliku HTML.
- Wewnętrzne arkusze stylów – deklaracja stylów jest wprowadzona wewnątrz elementu <style> w sekcji <head> dokumentu HTML.
- Inline styles – wygląd jest definiowany bezpośrednio w atrybutach stylu do wybranego elementu HTML.
Dlaczego CSS jest ważny dla SEO?
Kaskadowe arkusze stylów mają bardzo duży wpływ na SEO. Jest on ważny z kilku powodów:
- prędkość ładowania strony jest jednym z głównych czynnik rankingowych Google. Optymalizacja kodu CSS i zasobów, pozwala poprawić pozycję strony w przeglądarce,
- struktura i semantyka – utrzymanie czystego i przejrzystego kodu HTML jest bardzo ważne. Oddzielenie CSS pozwala robotom wyszukiwarek lepiej zrozumieć stronę i ją zaindeksować.
- responsywność strony – kaskadowe arkusze stylów (CSS) pozwalają tworzyć responsywną stronę, która może się wyświetlać na różnych urządzaniach, o innych wymiarach (tablet, smartfon czy komputer). Google premiuje strony, które są responsywne, ponieważ dostarczają lepszych doświadczeń użytkownikowi, niezależnie od urządzenia, na którym jest wyświetlana strona.
