CSS podstawy – styling dla developerów

Przez /

TL;DR: CSS to język stylów definiujący wygląd stron internetowych. Każdy developer powinien znać podstawowe selektory (.class, #id, element), właściwości (color, font-size, margin, padding) i model pudełkowy (box model). CSS działa według zasady kaskadowości – style nadpisują się według specyficzności i kolejności.

Dlaczego developer musi znać CSS?

Jako developer często musisz szybko poprawić wygląd interfejsu, zrozumieć dlaczego coś się nie wyświetla poprawnie, lub stworzyć prototyp. Bez podstawowej znajomości CSS każda zmiana w wyglądzie aplikacji oznacza czekanie na frontend developera lub designer-a.

Co się nauczysz:

  • Czym jest CSS i jak działa kaskadowość stylów
  • Najważniejsze selektory CSS i jak wybierać elementy HTML
  • Model pudełkowy (box model) – fundament layoutu
  • Właściwości tekstowe i kolorystyczne
  • Podstawy pozycjonowania i układania elementów
  • Responsywność – jak dostosować stronę do różnych urządzeń
Wymagania wstępne: Podstawowa znajomość HTML (przeczytaj HTML podstawy dla programistów backend), umiejętność pracy z edytorem tekstu.

Czym jest CSS?

CSS (Cascading Style Sheets) – język stylów opisujący prezentację dokumentów HTML. CSS oddziela treść od wyglądu, pozwalając kontrolować kolory, czcionki, rozmieszczenie elementów.

CSS to jak ubranie dla HTML. HTML to szkielet (struktura), a CSS to wygląd (styl). Podobnie jak w programowaniu obiektowym oddzielasz dane od prezentacji, CSS oddziela treść od wyglądu.

/* Podstawowa składnia CSS */
selektor {
    właściwość: wartość;
    inna-właściwość: inna-wartość;
}

/* Przykład */
p {
    color: blue;
    font-size: 16px;
    margin: 10px;
}

CSS to jak konfiguracja w aplikacji. Tak jak wydzielasz ustawienia do application.properties w Spring Boot, CSS wydziela stylowanie z HTML. Jeden plik CSS może stylować setki stron HTML.

Trzy sposoby dodawania CSS

<!-- 1. Inline style (nie zalecane) -->
<p style="color: red; font-size: 18px;">Czerwony tekst</p>

<!-- 2. Wewnętrzny CSS w <head> -->
<head>
    <style>
        p { color: blue; }
    </style>
</head>

<!-- 3. Zewnętrzny plik CSS (zalecane) -->
<head>
    <link rel="stylesheet" href="styles.css">
</head>
Pro tip: Zawsze używaj zewnętrznych plików CSS. To jak wydzielanie konfiguracji do osobnych plików w aplikacjach – łatwiej zarządzać, cache’ować i reużywać w wielu miejscach.

Selektory CSS – jak wybierać elementy

Podstawowe selektory

/* Selektor elementu - wszystkie paragrafy */
p {
    color: black;
}

/* Selektor klasy - elementy z class="highlight" */
.highlight {
    background-color: yellow;
}

/* Selektor ID - element z id="header" */
#header {
    font-size: 24px;
}

/* Selektor uniwersalny - wszystkie elementy */
* {
    margin: 0;
    padding: 0;
}

Kombinatory selektorów

/* Selektor potomka - wszystkie <p> wewnątrz <div> */
div p {
    color: gray;
}

/* Selektor dziecka - bezpośrednie dzieci */
div > p {
    font-weight: bold;
}

/* Selektor sąsiada - pierwszy <p> po <h2> */
h2 + p {
    margin-top: 0;
}

/* Selektory atrybutów */
input[type="email"] {
    border: 2px solid blue;
}

/* Pseudoklasy - super przydatne dla interakcji */
a:hover {
    color: red;
}

button:active {
    background-color: darkblue;
}

Uwaga: Specyficzność ma znaczenie! ID (#) > Klasa (.) > Element. Style o wyższej specyficzności nadpisują te o niższej. To jak scope zmiennych w programowaniu – im bardziej specyficzne, tym wyższy priorytet.

Model pudełkowy (Box Model) – fundament CSS

Każdy element HTML to pudełko składające się z czterech warstw:

.box {
    width: 200px;            /* Szerokość treści */
    height: 100px;           /* Wysokość treści */
    padding: 20px;           /* Odstęp wewnętrzny */
    border: 5px solid black; /* Ramka */
    margin: 15px;            /* Odstęp zewnętrzny */
}

/* Całkowita szerokość = width + padding*2 + border*2 + margin*2 */
/* 200 + 40 + 10 + 30 = 280px */

Box-sizing – ułatwienie życia developera

/* Domyślnie - content-box (problematyczne) */
.box-default {
    width: 200px;
    padding: 20px;
    /* Rzeczywista szerokość: 240px - WTF! */
}

/* Lepsze podejście - border-box */
.box-border {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    /* Rzeczywista szerokość: 200px - jak należy! */
}

/* Globalne ustawienie (zalecane dla każdego projektu) */
* {
    box-sizing: border-box;
}
Typowy błąd: Zapomnienie o box-sizing i dziwienie się dlaczego elementy nie mieszczą się w kontenerze. Zawsze ustaw box-sizing: border-box globalnie.

Właściwości tekstowe i kolorystyczne

Stylowanie tekstu

.text-styling {
    /* Czcionka */
    font-family: Arial, sans-serif;  /* Fallback fonts ważne! */
    font-size: 16px;                 /* Lub em, rem */
    font-weight: bold;               /* normal, bold, 100-900 */
    font-style: italic;              /* normal, italic */
    
    /* Wyrównanie i spacing */
    text-align: center;              /* left, center, right, justify */
    line-height: 1.5;                /* Wysokość linii - czytelność */
    letter-spacing: 1px;             /* Odstęp między literami */
    
    /* Dekoracje */
    text-decoration: underline;      /* none, underline, line-through */
    text-transform: uppercase;       /* lowercase, uppercase, capitalize */
}

Kolory – różne sposoby definiowania

.colors {
    /* Różne sposoby definiowania kolorów */
    color: red;                      /* Nazwa koloru */
    color: #ff0000;                  /* HEX - najczęściej używane */
    color: rgb(255, 0, 0);           /* RGB */
    color: rgba(255, 0, 0, 0.5);     /* RGBA z przezroczystością */
    color: hsl(0, 100%, 50%);        /* HSL - intuicyjne */
    
    background-color: #f0f0f0;       /* Tło */
    border-color: #333;              /* Kolor ramki */
}

Layout i pozycjonowanie elementów

Display – jak elementy się zachowują

/* Najpopularniejsze wartości display */
.block {
    display: block;       /* Blokowy - pełna szerokość, nowa linia */
}

.inline {
    display: inline;      /* W linii - nie można ustawić width/height */
}

.inline-block {
    display: inline-block; /* W linii ale z możliwością wymiarów */
}

.hidden {
    display: none;        /* Ukryty - nie zajmuje miejsca w DOM */
}

.flex {
    display: flex;        /* Flexbox - nowoczesny layout */
}

Position – kontrola nad umiejscowieniem

.positioning {
    position: static;      /* Domyślne - w normalnym przepływie */
    position: relative;    /* Względem normalnej pozycji */
    position: absolute;    /* Względem rodzica z position != static */
    position: fixed;       /* Względem okna przeglądarki - sticky header */
    position: sticky;      /* Hybrydowe - relative + fixed */
    
    top: 10px;             /* Współpracuje z position */
    right: 20px;
    bottom: 15px;
    left: 5px;
}

Flexbox – nowoczesny sposób na layout

.flex-container {
    display: flex;
    justify-content: center;      /* Wyrównanie poziome: center, space-between */
    align-items: center;          /* Wyrównanie pionowe: center, flex-start */
    flex-direction: row;          /* row, column, row-reverse */
    flex-wrap: wrap;              /* wrap, nowrap */
    gap: 20px;                    /* Odstęp między elementami - super wygodne */
}

.flex-item {
    flex: 1;                      /* Elastyczny rozmiar - wypełnia przestrzeń */
    flex-basis: 200px;            /* Bazowy rozmiar przed elastycznością */
    flex-grow: 1;                 /* Współczynnik rozrastania */
    flex-shrink: 0;               /* Współczynnik kurczenia */
}

Flexbox rozwiązuje większość problemów z layoutem CSS. Zamiast kombinować z float i clearfix, użyj flexbox. To jak przejście z ręcznego zarządzania pamięcią na garbage collector.

Responsywność – media queries

/* Mobile first approach - zalecane */
.responsive {
    width: 100%;
    padding: 10px;
    font-size: 14px;
}

/* Tablet */
@media (min-width: 768px) {
    .responsive {
        width: 50%;
        padding: 20px;
        font-size: 16px;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .responsive {
        width: 30%;
        padding: 30px;
        font-size: 18px;
    }
}

/* Popularne breakpoints */
/* Mobile: 320px - 767px */
/* Tablet: 768px - 1023px */
/* Desktop: 1024px+ */
Pro tip: Projektuj mobile-first. Łatwiej dodawać style dla większych ekranów niż odejmować dla mniejszych. To jak progressive enhancement w web developmencie.

Praktyczny przykład – stylowanie formularza

Ostylujmy formularz z artykułu o HTML:

/* Reset podstawowy - zawsze na początku */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    line-height: 1.6;
}

/* Kontener formularza */
.form-container {
    max-width: 500px;
    margin: 50px auto;
    padding: 30px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.form-title {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
    font-size: 24px;
    font-weight: 300;
}

/* Grupa pól formularza */
.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    margin-bottom: 5px;
    color: #555;
    font-weight: 500;
}

/* Stylowanie inputów */
.form-input {
    width: 100%;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    transition: border-color 0.3s ease;
}

/* Focus state - ważne dla UX */
.form-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

/* Stylowanie przycisku */
.form-button {
    width: 100%;
    padding: 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Hover effect */
.form-button:hover {
    background-color: #0056b3;
}

/* Active state - feedback dla użytkownika */
.form-button:active {
    transform: translateY(1px);
}

/* Responsywność */
@media (max-width: 600px) {
    .form-container {
        margin: 20px;
        padding: 20px;
    }
    
    .form-title {
        font-size: 20px;
    }
}

CSS w praktyce – integracja z backendem

Struktura plików w Spring Boot

src/
  main/
    resources/
      static/
        css/
          styles.css        <- Główne style
          admin.css         <- Style dla panelu admin
          components.css    <- Style dla komponentów
        js/
        images/
      templates/
        index.html          <- Template z linkami do CSS
        admin/
          users.html

Thymeleaf + CSS – dynamiczne klasy

<!-- Template Thymeleaf -->
<div th:class="${user.isActive() ? 'user-active' : 'user-inactive'}">
    <span th:text="${user.name}">Jan Kowalski</span>
    <span th:text="${user.email}">jan@example.com</span>
</div>

<!-- Linki do CSS w <head> -->
<link rel="stylesheet" th:href="@{/css/styles.css}">

/* Odpowiadające style CSS */
.user-active {
    color: #28a745;
    background-color: #d4edda;
    border-left: 4px solid #28a745;
    padding: 10px;
}

.user-inactive {
    color: #6c757d;
    background-color: #e2e3e5;
    border-left: 4px solid #6c757d;
    padding: 10px;
}

Częste problemy i rozwiązania

Problem z centrowanie (klasyk!)

/* Centerowanie poziome - tekst */
.text-center {
    text-align: center;
}

/* Centerowanie poziome - blok */
.block-center {
    margin: 0 auto;
    width: 300px; /* Musi mieć określoną szerokość! */
}

/* Centerowanie pionowe i poziome - flexbox magic */
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

Problem ze specyficznością

/* Słaba specyficzność - może być nadpisana */
p {
    color: blue;
}

/* Mocniejsza specyficzność */
.content p {
    color: red;
}

/* Jeszcze mocniejsza */
#main .content p {
    color: green;
}

/* Nuclear option - unikaj !important */
p {
    color: purple !important;
}
Uwaga: !important to jak goto w programowaniu – czasem potrzebne, ale zazwyczaj oznacza problemy z architekturą CSS. Lepiej przepisać selektory.

Debugowanie CSS – narzędzia

Developer Tools w przeglądarce:
1. F12 – otwórz narzędzia deweloperskie
2. Elements – podgląd HTML i CSS na żywo
3. Computed – zobacz wszystkie style elementu
4. Box Model – wizualizacja padding, border, margin

CSS Reset/Normalize – czysta karta

/* Prosty reset - wystarczy na początek */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

/* Lub użyj gotowego Normalize.css */
/* https://necolas.github.io/normalize.css/ */
Czy muszę znać wszystkie właściwości CSS?

Nie! Wystarczy znać podstawy: model pudełkowy, selektory, flexbox, kolory i umieć googować resztę. CSS ma setki właściwości, ale 80% pracy robi się 20% z nich.

Flexbox czy CSS Grid?

Flexbox do układów 1D (rząd lub kolumna), Grid do układów 2D (siatka). Dla większości przypadków wystarczy flexbox. Grid przydaje się do kompleksowych layoutów jak dashboard.

Jak debugować problemy z CSS?

Użyj Developer Tools (F12), sprawdź Computed styles, wyłączaj style jeden po drugim. Dodaj border: 1px solid red; żeby zobaczyć granice elementów.

Co z IE i starymi przeglądarkami?

W 2016 już można ignorować IE8 i niższe. IE9+ obsługuje większość nowoczesnego CSS. Używaj caniuse.com do sprawdzania kompatybilności.

Czy warto używać frameworków CSS?

Bootstrap czy Foundation przyspieszają development, ale dodają weight. Dla prototypów – tak, dla produkcji lepiej custom CSS. To jak używanie bibliotek w programowaniu.

Następne kroki:

Przydatne zasoby:

🚀 Zadanie dla Ciebie

Ostyluj formularz HTML z poprzedniego artykułu:

  • Użyj maksymalnej szerokości 400px i wycentruj go
  • Dodaj padding 20px i subtle box-shadow
  • Ostyluj inputy z focus states (niebieski border)
  • Zrób przycisk z hover effect (ciemniejszy background)
  • Dodaj responsywność dla mobile (max-width: 480px) – mniejszy padding

Bonus: Stwórz prostą tabelę użytkowników z zebra striping (naprzemienne kolory wierszy) używając :nth-child(even).

Czy już używasz CSS w swoich projektach? Jakie masz największe problemy ze stylowaniem? Flexbox czy nadal walczysz z float? Podziel się swoimi doświadczeniami!

Powiązane wpisy

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Przewijanie do góry