Strony internetowe bez CSS byłyby pozbawione wyrazu. To właśnie ten język stylów decyduje o wyglądzie, rozmiarze, barwie i rozmieszczeniu elementów na stronie.
Czym jest CSS?
Kaskadowe Arkusze Stylów, w skrócie CSS, to język, który definiuje sposób prezentacji elementów HTML na ekranie monitora lub w wydruku. CSS został opracowany przez World Wide Web Consortium (W3C) w roku 1996.
Elementy HTML pierwotnie nie zawierały znaczników formatujących strony, a programiści tworzyli jedynie podstawową strukturę. Wprowadzenie tagów, takich jak <font> w HTML 3.2, wywołało nowe trudności dla twórców stron.
Wraz z pojawieniem się kolorowych teł, różnorodnych czcionek i stylów, ręczne przepisywanie kodu stało się kosztowne i czasochłonne. W odpowiedzi na te wyzwania W3C stworzyło CSS, który od tamtej pory ewoluował.
Dlaczego CSS jest tak ważny?
# 1. CSS to efektywność
Dzięki CSS nie musimy już dodawać do każdej strony tagów definiujących czcionkę, wyrównanie, obramowanie, kolor, styl tła czy rozmiar. CSS pozwala na scentralizowane zarządzanie wyglądem elementów.
#2. Oszczędność czasu
Możesz łatwo zmienić wygląd całej witryny, modyfikując zewnętrzny plik CSS. To sprawia, że aktualizacje są szybkie i bezproblemowe.
#3. Kompatybilność z różnymi urządzeniami
Współcześni użytkownicy przeglądają strony internetowe na różnorodnych urządzeniach, takich jak komputery, tablety i smartfony. CSS umożliwia projektowanie responsywnych stron, które dostosowują się do rozmiarów ekranu.
#4. Łatwa aktualizacja aplikacji
Nowoczesne aplikacje internetowe są dynamiczne i stale rozwijane. CSS ułatwia modyfikację pojedynczych komponentów lub całej witryny bez konieczności zmian w podstawowym kodzie.
Jak CSS współpracuje z HTML przy tworzeniu stron?
HTML to standardowy język znaczników służący do tworzenia struktury stron internetowych. Z kolei CSS definiuje, jak te strony mają być wyświetlane. Strona internetowa oparta na HTML i CSS składa się z pliku HTML zawierającego tekst, odnośniki do obrazów i znaczniki HTML.
Do pliku HTML można dołączyć zewnętrzny plik CSS za pomocą znacznika <link>, albo osadzić style wewnątrz dokumentu (wewnętrzne lub wbudowane style). Plik HTML zawiera elementy takie jak nagłówki (np. <h1>) i akapity (<p>). Za pomocą CSS możemy nadać akapitom pogrubioną czcionkę, a nagłówkom – rozmiar 50 pikseli i zielony kolor.
W dalszej części pokażemy, jak współdziałają HTML i CSS.
Rodzaje CSS
# 1. Zewnętrzny CSS
Aby CSS był zewnętrzny, potrzebny jest plik HTML i oddzielny plik CSS z rozszerzeniem .css (np. style.css). Plik CSS jest łączony z plikiem HTML za pomocą znacznika <link>.
Przykład zewnętrznego pliku CSS:
.main {
text-align:center;
}
.GF {
color:red;
font-size:50px;
font-weight:bold;
}
#TP {
color:blueviolet
font-style:bold;
font-size:20px;
}
Plik CSS można powiązać z dokumentem HTML w następujący sposób:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://wilku.top/12-best-online-courses-and-books-to-master-css/style.css"/>
</head>
<body>
<div class = "main">
<div class ="GF">Geek Flare!!!! </div>
<div id ="TP">
Your favourite tech portal
</div>
</div>
</body>
</html>
Znacznik <link> łączy zewnętrzny arkusz stylów z plikiem HTML, a atrybut href określa jego lokalizację.
Tak będzie wyglądać strona:
Zewnętrzny CSS jest najbardziej polecany ze względu na możliwość tworzenia wielokrotnie używanych komponentów i wprowadzania zmian w całym kodzie w jednym miejscu.
#2. Wewnętrzny CSS
Wewnętrzny CSS jest odpowiedni, gdy chcemy nadać unikalny styl konkretnemu dokumentowi HTML. Reguły stylu umieszcza się w sekcji <head> pliku HTML.
Przykład wewnętrznego CSS:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
.main {
text-align:center;
}
.GF {
color:Red;
font-size:70px;
}
.custom {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="GF">Internal CSS Demonstration</div>
<div class ="custom">
The Results
</div>
</div>
</body>
</html>
Wyrenderowana strona internetowa będzie wyglądać tak:
Wewnętrzny CSS nie jest optymalnym rozwiązaniem w większości przypadków, ponieważ zwiększa rozmiar kodu HTML, co może negatywnie wpływać na szybkość ładowania.
#3. Wbudowany CSS
Wbudowany CSS umieszcza style CSS bezpośrednio w ciele dokumentu, np. w akapicie, nagłówku czy elemencie div.
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style = "color:red; font-size:50px;
font-style:bold; text-align:center;">
Inline CSS Demonstration
</p>
</body>
</html>
Wyrenderowany dokument będzie wyglądał tak:
Wbudowany CSS nie jest dobrym wyborem, jeśli planujemy skalowanie aplikacji, gdyż dodawanie stylów do każdego tagu HTML jest czasochłonne.
Zachęcamy do zapoznania się z najlepszymi kursami i książkami online, które pomogą w nauce CSS.
Tworzenie responsywnych stron za pomocą HTML i CSS
Ten kurs uczy, jak projektować responsywne strony przy użyciu HTML5 i CSS3. Nie jest wymagana wcześniejsza wiedza na temat tworzenia stron. Kurs obejmuje zagadnienia takie jak model pudełkowy, rozwiązywanie konfliktów selektorów, pozycjonowanie elementów i dziedziczenie stylów.
Kurs ten jest idealny dla osób, które chcą nauczyć się, jak przeprowadzać analizę, planować, szkicować, kodować, testować i optymalizować profesjonalne strony internetowe.
Zaawansowany CSS i Sass
Ten zaawansowany kurs wprowadza w tajniki działania CSS, analizując takie aspekty jak kaskada, specyficzność i dziedziczenie stylów.
Kurs prezentuje wiele nowoczesnych technik CSS do tworzenia zaawansowanych, responsywnych stron internetowych. Wprowadza również do Saas i pokazuje, jak go używać w projektach CSS, włączając zmienne globalne i zarządzanie zapytaniami o media.
Kurs jest również odpowiedni dla osób, które chcą nauczyć się animacji CSS, gdyż omawia @keyframes, animacje i przejścia.
Nauka CSS
Kurs Learn CSS by Codecademy uczy, jak za pomocą CSS przekształcać HTML w atrakcyjne wizualnie strony. Składa się z 8 lekcji i 6 projektów sprawdzających przyswojoną wiedzę.
Uczestnicy kursu dowiedzą się, jak dodawać style do elementów HTML, łączyć pliki HTML i CSS oraz tworzyć unikalne układy stron.
Zbuduj swoją pierwszą stronę z HTML i CSS
Ten kurs uczy, jak za pomocą HTML5 i CSS3 tworzyć responsywne strony. Bezpłatny kurs składa się z 4 modułów i zajmuje około 10 godzin. Nie jest wymagana wcześniejsza wiedza z zakresu programowania.
Podstawy CSS
Kurs Podstawy CSS został opracowany przez W3Cx. Uczestnicy poznają najlepsze praktyki projektowania stron internetowych, podstawowe selektory CSS i sposób wyboru właściwości CSS. Kurs składa się z 5 modułów i wymaga około 5 tygodni nauki po 5-7 godzin tygodniowo.
Wprowadzenie do CSS3
Ten kurs przybliża kaskadowe arkusze stylów CSS3. Opracowany przez University of Michigan uczy, jak pisać reguły CSS, wykształcać dobre nawyki programistyczne i testować kod. Kurs zajmuje około 12 godzin i jest zakończony certyfikatem.
Wprowadzenie do HTML i CSS
Ten kurs uczy, jak za pomocą HTML i CSS tworzyć stylowe i dobrze ustrukturyzowane strony internetowe. Uczestnicy nauczą się tworzyć strony z wykorzystaniem struktury drzewiastej i stylizować je za pomocą CSS.
Ten bezpłatny kurs jest przeznaczony dla początkujących i oparty na modelu nauki we własnym tempie. Ukończenie kursu, prowadzonego przez ekspertów z branży, zajmuje około 3 tygodni.
Samouczek CSS
CSS Tutorial to darmowy kurs dostępny na platformie W3schools. Kurs podzielony jest na rozdziały dla łatwiejszego przyswajania wiedzy. Każdy rozdział zawiera przykłady i ćwiczenia. Na stronie można eksperymentować z różnymi koncepcjami, korzystając z przycisku „Wypróbuj sam”.
CSS: przewodnik ostateczny
Książka CSS: The Definitive Guide jest doskonałym źródłem wiedzy o podstawach CSS, począwszy od selektorów i specyficzności, po kaskadę. Zawiera szczegółowe informacje o flexboxie, pozycjonowaniu i floatach.
Jest to wartościowa pozycja dla osób, które chcą nauczyć się, jak za pomocą CSS tworzyć transformacje, przejścia i animacje 2D i 3D. Książka jest dostępna w wersji Kindle oraz w miękkiej oprawie.
Responsywne projektowanie stron internetowych z HTML5 i CSS
Książka ta uczy, jak tworzyć przyszłościowe, responsywne strony internetowe przy użyciu HTML5 i CSS.
Dzięki wiedzy zdobytej z tej książki tworzone strony będą poprawnie wyświetlane na komputerach, tabletach i telefonach. Książka jest napisana przystępnym językiem i dostępna jest w miękkiej oprawie oraz w formacie Kindle.
HTML i CSS: projektowanie i tworzenie stron internetowych
Ta książka o HTML i CSS jest skierowana do wszystkich, niezależnie od poziomu zaawansowania.
Autor przedstawia treść w przejrzysty sposób, wykorzystując infografiki i zdjęcia, co ułatwia zrozumienie różnych koncepcji. Książka ma unikalną strukturę, dzięki czemu łatwo można przeglądać poszczególne rozdziały.
Nowoczesne CSS
Książka Modern CSS: Opanuj kluczowe koncepcje CSS dla nowoczesnego tworzenia stron internetowych uczy CSS poprzez przykłady kodu, diagramy i zrzuty ekranu.
W pierwszych rozdziałach wprowadzane są kolory, selektory, model pudełkowy, kombinatory i specyficzność. Kolejne rozdziały omawiają style tekstu, pozycjonowanie, gradienty, obramowania, indeks Z i konteksty układania. W książce poruszane są także zaawansowane tematy, takie jak przejścia, animacje, transformacje, flexbox i siatki CSS.
Podsumowanie
Rola CSS we współczesnych witrynach internetowych jest nieoceniona. Oprócz tego, że strony są atrakcyjne wizualnie, CSS ułatwia poruszanie się po nich.
Nauka CSS może być przyjemna, jeśli skorzystamy z wymienionych zasobów. Niektóre kursy są darmowe, inne płatne.
Na koniec zachęcamy do zapoznania się z ściągawkami CSS dla programistów i projektantów.
newsblog.pl
Maciej – redaktor, pasjonat technologii i samozwańczy pogromca błędów w systemie Windows. Zna Linuxa lepiej niż własną lodówkę, a kawa to jego główne źródło zasilania. Pisze, testuje, naprawia – i czasem nawet wyłącza i włącza ponownie. W wolnych chwilach udaje, że odpoczywa, ale i tak kończy z laptopem na kolanach.