Logo
Hamburger icon Close icon
Go to top
WYNIKI WYSZUKIWANIA:
Co to jest CSS? Poznaj kaskadowe arkusze stylów

Co to jest CSS? Poznaj kaskadowe arkusze stylów

Nauka, wiedza, rozwijanie pasji, rozrywka - w Internecie znajdziemy dziś wszystko. Każdy z nas codziennie zagląda na karty przeglądarki w poszukiwaniu przeróżnych treści, a niemal wszystko, co znajdujemy, opiera się na zaledwie trzech językach: HTML, CSS i JavaScript. Jest to tzw. wielka trójka, która pozwala na budowanie kompletnych, nowoczesnych i interaktywnych stron internetowych. Przyjrzyjmy się jednemu z tych trzech języków. Z tego artykułu dowiesz się:

  • Co to jest CSS?
  • Jak jest zbudowany CSS?
  • Czy warto się uczyć CSS?
  • Jak się nauczyć CSS?

Kurs CSS3 - kodowanie ze stylem

Poznaj najnowsze trendy CSS3 - twórz piękne i zachwycające strony Dowiedz się więcej


CSS w Web Design

Co to jest CSS?

CSS, kaskadowe arkusze stylów lub po prostu arkusze stylów - to język, który odpowiada za warstwę wizualną witryny internetowej. Za jego pomocą określa się style wszystkich elementów, zawartych w treści strony www - np. obrazków, tekstu, fontów (wielkości, waga, rodzaj, kolor), tabeli, odnośników. Obok HTML, jest to jeden z podstawowych filarów, na jakich opiera się budowa każdej strony internetowej. Dlatego też znajomość tylko jednego z tych dwóch języków nie jest wystarczająca.

Celem stworzenia kaskadowych arkuszy stylów było uporządkowanie kodu witryny i odseparowanie warstwy wizualnej od warstwy strukturalnej. Wcześniej wszystkie informacje zarówno o strukturze, jak i o wyglądzie, były umieszczane w pliku HTML. Stwarzało to wiele trudności już na etapie tworzenia witryny, jak i jej późniejszych edycji. Kod stawał się nieczytelny, a nadawanie stylu każdemu obiektowi z osobna prowadziło do niespójności i wydłużało czas realizacji projektu. Ponadto, każda przeglądarka indywidualnie odczytywała zapisane pliki, co zmuszało wykonawców do przygotowywania osobnych plików pod różne przeglądarki.


kod CSS - stylowanie strony

Pierwsza oficjalna dokumentacja CSS została wydana w roku 1996, a wraz z nią rozwiązano wiele bolączek programistycznych. Jednocześnie, praca nad budową stron stała się znacznie prostsza i szybsza, ponieważ nie wymagała już żmudnego stylowania każdego z elementów z osobna. Dzięki CSS wszystkie elementy witryny można ostylować (określić sposób, w jaki będą się wyświetlać w przeglądarce) w jednym pliku. Co za tym idzie, jeśli zachodzi potrzeba modyfikacji wybranego obiektu, zmiany można szybko nanieść w jednym lub maksymalnie kilku plikach. Jest to ogromne ułatwienie, zwłaszcza w pracy nad rozbudowanymi serwisami.

stylowanie CSS

Jak jest zbudowany CSS?

Składnia arkuszy stylów składa się z reguł, określających cechy wizualne elementów dokumentu. W obrębie ich budowy można wyróżnić:

  • Selektor - czyli obiekt lub grupa obiektów, których dotyczy dana reguła. Selektor może występować w postaci znacznika HTML (np. h1, p, li) lub indywidualnie określonych klas.
  • Cecha - właściwość elementu, której nadaje się określoną wartość, np. kolor, wysokość, margines, tło.
  • Wartość - nadanie wybranym cechom konkretnych, pożądanych wartości, np. czarny (dla koloru nagłówka), 50 px (dla marginesu).

W praktyce, najprostsza reguła prezentuje się w następujący sposób:

selektor { cecha: wartość; }
h1 { color: black; }

Powyższa reguła obejmuje tylko jeden selektor i tylko jedną cechę - nagłówek H1 ma być wyświetlany w kolorze czarnym. Przykład bardziej rozbudowanego stylu:


selektor, selektor { cecha: wartość; cecha: wartość; cecha: wartość; }
h1, h2 { font-style: italic; font-weight: bold; color: black; }

W ten sposób zostały określone cechy zarówno dla nagłówka H1, jak i H2 - pochyły, pogrubiony font w kolorze czarnym.


Styl css
Fundamenty CSS - stylowanie stron od podstaw

Fundamenty CSS - stylowanie stron od podstaw

Zobacz kurs Arrow
Kurs Metodologia BEM - jak pisać dobry kod CSS

Kurs Metodologia BEM - jak pisać dobry kod CSS

Zobacz kurs Arrow
Kurs Błyskawiczne tworzenie stron z Tailwind CSS

Kurs Błyskawiczne tworzenie stron z Tailwind CSS

Zobacz kurs Arrow

Czy warto się uczyć CSS?

Znajomość CSS może się wydawać zbędna, odkąd w budowie stron internetowych dominuje automatyzacja w postaci CMS, czyli systemów zarządzania treścią. Jest tu przecież ogrom gotowych szablonów, z którymi można stworzyć dowolną witrynę. Niestety, jest to błędne przekonanie, gdyż rzadko spotyka się szablon spełniający wszystkie wymagania użytkowników. Możliwości nanoszenia zmian w panelu administratora również są ograniczone - nawet, jeśli będziesz korzystać z topowych site builderów. W rezultacie więc, modyfikacje kodu bezpośrednio w plikach źródłowych to niemal codzienność Web Developera. Dobra znajomość CSS pozwala również świadomie i profesjonalnie dopasowywać layout witryny do różnych urządzeń, a to jest obecnie bardzo ważny aspekt tworzenia stron internetowych.

Co więcej, opanowanie CSS na zaawansowanym poziomie otwiera nowe perspektywy zawodowe, a mianowicie możliwość projektowania i budowania własnych szablonów do celów komercyjnych.

książki do nauki CSS i JS

Jak można się nauczyć CSS?

Jeśli interesują Cię języki webowe, a wśród nich również CSS, mamy dla Ciebie dobrą wiadomość. Jego składnia jest uznawana za jedną z najprostszych, a do nauki nie potrzebujesz nic poza chęciami, czasem i dostępem do Internetu. Jak w przypadku innych języków, dobrze jest tu zacząć od dobrego kursu, w którym zdobędziesz rzetelną wiedzę i porady praktyczne od prawdziwych Web Developerów. Potem pozostaje już tylko ćwiczyć, tworzyć własne style i strony internetowe. Tym sposobem nabierzesz biegłości, a jednocześnie zbudujesz portfolio, którym pochwalisz się na rozmowie rekrutacyjnej. Studia kierunkowe nie są w tym przypadku koniecznością.

Web Developer

Web Developer

Zobacz kurs Arrow
Fundamenty CSS - Level 1

Fundamenty CSS - Level 1

Zobacz kurs Arrow
Fundamenty CSS - Level 2

Fundamenty CSS - Level 2

Zobacz kurs Arrow

Opublikowane 31 stycznia 2022 r. w kategorii: Programowanie


ŚCIEŻKA KARIERY
Users icon 13130 uczestników
Watch icon 79 godzin
Video icon 708 wykładów

Twórz atrakcyjne i funkcjonalne strony internetowe z użyciem nowoczesnych technik. Opanuj kluczowe podstawy, niezbędne narzędzia i zacznij tworzyć wspaniałe strony! Dowiedz się więcej

Interesują Cię nowe technologie?

Zapisz się do naszego newslettera!