CSS3 (Cascading Style Sheets)
3 minuty czytania
CSS, czyli Cascading Style Sheets, to jeden z podstawowych elementów tworzenia stron internetowych. Służą one do opisu wyglądu strony, czyli jak elementy na stronie mają być wyświetlane.
CSS (Cascading Style Sheets) to kaskadowe arkusze stylów, które odpowiedzialne są za wygląd witryny internetowej. Język ten został opracowany w 1996 r. przez firmę W3C, która zajmuje się wyznaczaniem standardów względem budowy stron www. Jest on zintegrowany z językiem HTML, który odpowiada za budowę struktury strony z wykorzystaniem nagłówków, akapitów, list, hiperłączy, załączonych plików w tym plików multimedialnych oraz strukturę formularzy do przesyłania danych. Język stylów odpowiedzialny jest za prezentacje strony, a dokładnie za opis wyżej wymienionych elementów HTML, poprzez określenie rodzaju czcionek, koloru tła poszczególnych elementów, rozmieszczenie i wyrównanie tych elementów, filtry, tabele, obramowania, marginesy, a także proste animacje.
CSS – prezentacja graficzna strony www
Każda reguła CSS składa się z selektora (np. kolor czcionki nagłówków) oraz deklaracji (np. niebieski). Co więcej, niezwykle przyspiesza pracę, ponieważ style (reguły opisu elementów HTML) zawarte w jednym dokumencie mogą być stosowane jednocześnie do wielu innych plików witryny. Takie rozwiązanie daje ogromną kontrolę nad wizualnym aspektem projektu, ponieważ poprzez zmianę stylów w nadrzędnym pliku kaskadowych arkuszy stylów można wprowadzić zmiany jednocześnie we wszystkich dokumentach, w których styl ten wystąpił. CSS razem z HTML i Java Script tworzą wielką trójkę języków, które pozwalają na stworzenie dynamicznej i interaktywnej strony www przez frontend developerów. Jest językiem kompatybilnym z wieloma przeglądarkami, dzięki czemu programiście nie muszą już kodować jednej witryny na wiele sposobów w zależności od typu przeglądarki.
JOB_LISTING
Dodatkowo język stylów umożliwia poprawne wyświetlanie się witryny w zależności od rozdzielczości urządzenia, na którym jest wyświetlana witryna, a zatem odpowiada za jej responsywność. Dzięki CSS można bardzo precyzyjnie określić pozycję względną i bezwzględną konkretnych elementów na stronie. Pozwala projektować bardzo efektowne i estetyczne witryny bogate w treści z wykorzystaniem minimalnej ilości kodu. Za pomocą kaskadowych arkuszy stylów można niezwykle uatrakcyjnić wygląd elementów, stosując subtelne cienie, zaokrąglenia rogów, a nawet całkowitą zmianę kształtu elementów lub też zastosować ciekawe gradienty. Język ten określa sposób zachowania się linków poprzez określony wygląd stanów: visited, active, hover czy focus. Z wykorzystaniem CSS kaskadowych arkuszy stylów można również wprowadzić ciekawą animację do statycznych elementów HTML, poprzez tworzenie płynnych przejść pomiędzy określonymi stanami.
Jednostki i wartości w CSS
W CSS istnieje wiele różnych jednostek, które pozwalają precyzyjnie określać rozmiary elementów, marginesy, odstępy i inne właściwości wizualne. Możemy podzielić je na jednostki absolutne i względne.
Jednostki absolutne to takie, które mają stałą wartość niezależnie od kontekstu. Do najczęściej używanych należą:
- px (piksele) – najpopularniejsza jednostka, określająca stałą liczbę pikseli na ekranie.
- cm, mm, in (cale) – rzadko używane jednostki drukarskie, przydatne w mediach o stałym rozmiarze.
Jednostki względne dostosowują się do innych elementów strony, co czyni je bardziej elastycznymi i przydatnymi w projektowaniu responsywnym. Przykłady:
- % (procenty) – wartość oparta na wielkości elementu nadrzędnego.
- em – jednostka zależna od rozmiaru czcionki rodzica; np. 2em to dwa razy większy tekst niż domyślny.
- rem – podobna do em, ale oparta na rozmiarze czcionki elementu html.
- vw, vh (viewport width/height) – określają szerokość i wysokość ekranu w procentach (1vw to 1% szerokości ekranu).
Dzięki różnorodności jednostek w CSS, projektanci mogą dostosowywać wygląd stron do różnych rozdzielczości i urządzeń, co jest kluczowe dla nowoczesnego, responsywnego designu.
SPRAWDŹ SWOJĄ WIEDZE Z TEMATU css3
Pytanie
1/5
Modele układu stron: Box Model
Model pudełkowy (Box Model) to fundamentalna koncepcja CSS, która określa sposób wyświetlania i rozmieszczania elementów na stronie. Każdy element w CSS jest traktowany jako prostokątne pudełko składające się z kilku warstw:
- Content (zawartość) – główna część elementu, w której znajduje się tekst lub inne treści.
- Padding (wewnętrzny odstęp) – przestrzeń wokół zawartości, zwiększająca rozmiar pudełka bez zmiany jego granic.
- Border (obramowanie) – linia otaczająca padding i content, może mieć różne style i grubości.
- Margin (zewnętrzny odstęp) – przestrzeń oddzielająca dany element od innych elementów na stronie.
Struktura Box Model pozwala na precyzyjną kontrolę nad rozmieszczeniem elementów. Na przykład, jeśli ustawimy szerokość elementu na 200px, a dodamy do niego 20px paddingu i 10px obramowania, jego całkowita szerokość wyniesie 260px (chyba że zastosujemy box-sizing: border-box, który zmienia sposób obliczania szerokości i wysokości).
Znajomość Box Model jest kluczowa dla każdego, kto chce efektywnie projektować układy stron w CSS. Pozwala lepiej kontrolować przestrzenie między elementami i unikać nieprzewidzianych zmian w wyglądzie strony.
Nasza oferta
Web development
Dowiedz się więcejMobile development
Dowiedz się więcejE-commerce
Dowiedz się więcejProjektowanie UX/UI
Dowiedz się więcejOutsourcing
Dowiedz się więcejPowiązane artykuły
Aplikacje mobilne — native czy hybrydowe?
28 mar 2025
Wybór odpowiedniej technologii do tworzenia aplikacji mobilnej to jedna z pierwszych i najważniejszych decyzji w procesie projektowania produktu cyfrowego. Dylemat: aplikacja natywna czy hybrydowa – dotyczy nie tylko aspektów technicznych, ale też strategicznych, takich jak czas realizacji, budżet czy skalowalność. Każde z tych podejść ma swoje zalety i ograniczenia, a optymalny wybór zależy od celów biznesowych i oczekiwań użytkowników.

Najważniejsze technologie do tworzenia aplikacji webowych na 2025 rok
27 mar 2025
Tworzenie aplikacji webowych zmienia się z roku na rok – pojawiają się nowe narzędzia, frameworki i podejścia, które ułatwiają pracę programistom i poprawiają jakość końcowych produktów. W 2025 roku szczególnie widać nacisk na wydajność, automatyzację i lepsze doświadczenia użytkownika. Technologie stają się coraz bardziej inteligentne, szybkie i dostępne. W tym artykule przedstawiamy najważniejsze trendy i rozwiązania, które kształtują web development w nadchodzącym czasie.
Wized – czym jest i jak może pomóc w tworzeniu aplikacji bez kodu?
26 mar 2025
Tworzenie aplikacji webowych nigdy nie było tak dostępne jak dziś. Dzięki narzędziom no-code takim jak Wized, możesz zbudować rozbudowaną platformę internetową bez znajomości programowania. W połączeniu z Webflow, Wized daje twórcom ogromną swobodę – łącząc estetyczny front-end z dynamiczną logiką i integracjami zewnętrznymi. Jak to wszystko działa i co właściwie można zbudować z Wized? Sprawdź poniżej.
Co to jest v0 AI?
20 mar 2025
W świecie, gdzie sztuczna inteligencja coraz bardziej wpływa na różne aspekty naszej pracy, narzędzia takie jak v0 AI zaczynają rewolucjonizować sposób, w jaki tworzymy interfejsy użytkownika. Dzięki możliwości generowania gotowego kodu na podstawie prostych opisów tekstowych, v0 AI obiecuje przyspieszyć i uprościć proces projektowania UI, zwłaszcza w ekosystemie React i Tailwind CSS. Czy oznacza to koniec ręcznego kodowania interfejsów? A może jest to jedynie narzędzie wspierające developerów i designerów w ich codziennej pracy?
HTML Header – co to jest i jak go poprawnie używać?
21 lut 2025
Nagłówek HTML jest fundamentalnym elementem struktury każdej strony internetowej. Bez niego, przeglądarki i wyszukiwarki internetowe mieliby problem z interpretowaniem informacji zawartych na stronie. W tym artykule przyjrzymy się bliżej temu elementowi, zdefiniujemy jego podstawowe właściwości oraz przedstawimy praktyczne wskazówki, które pomogą w poprawnym i efektywnym użytkowaniu nagłówków HTML.
Pierwsze kroki z GitHub Pages: Praktyczne wprowadzenie
16 lut 2025
Github Pages to prosty, ale potężny narzędzie, które pozwala na tworzenie i hostowanie stron internetowych bezpośrednio z repozytorium Github. Czy jesteś developerem chcącym pokazać swój projekt, czy blogerem chcącym podzielić się swoją wiedzą - Github Pages jest dla Ciebie. Ten artykuł pomoże Ci w pierwszych krokach z tym serwisem.
CSS Outliner – Odkryj, czym jest i jak działa
9 lut 2025
Czy kiedykolwiek zmagaliście się z zawiłościami stylowania w CSS? Trudno zrozumiałymi selektorami, niekończącymi się łamaniami tekstu? Oto rozwiązanie twojego problemu, CSS Outliner. Odkryj, czym jest i jak może on przyczynić się do bezbłędnego kodowania.
Zobacz wszystkie artykuły