1. Pierwsze style CSS – kolor, czcionka, tło

~18-22 min podstawowy

CSS odpowiada za wygląd. Zaczynamy od najprostszych i najczęściej używanych właściwości.

Dlaczego to ważne?

Podstawowe style budują fundamenty wyglądu strony. Zrozumienie podłączania CSS i specyficzności zapobiega konfliktom styli.

Trzy sposoby podłączania CSS

Inline (najgorszy wybór)
<h1 style="color: navy;">Tekst</h1>
Wewnętrzny – w <head>
<style> body { background: #f8f9fa; } </style>
Zewnętrzny – zalecany
<link rel="stylesheet" href="css/style.css">

Specyficzność CSS

Inline > Wewnętrzny/zewnętrzny (selektory). !important nadpisuje wszystko, ale unikaj.

/* Specyficzność: ID > klasa > tag */
#id { color: red; } /* wyższa */
.class { color: blue; }
p { color: green; }

Podstawowe właściwości

color: #2c3e50;                  /* kolor tekstu */
background-color: #f1f3f5;        /* tło */
font-family: 'Inter', system-ui, sans-serif;
font-size: 1.1rem;
font-weight: 500;                 /* 400=normal, 700=bold */
text-align: center;
line-height: 1.6;
text-decoration: underline;       /* dekoracja tekstu */
letter-spacing: 0.05em;           /* odstęp liter */

Przykładowy plik style.css z zmiennymi

:root {
    --main-color: #2c3e50;
    --bg-color: #f8f9fa;
}

body {
    font-family: 'Inter', system-ui, sans-serif;
    background-color: var(--bg-color);
    color: var(--main-color);
    line-height: 1.6;
}

h1, h2, h3 {
    color: #1a3c5e;
}

a {
    color: #0d6efd;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.container {
    max-width: 920px;
}

index.html

https://example.com/

Witaj na mojej stronie!

To jest przykładowy akapit tekstu.

Kliknij tutaj – link zmienia się po najechaniu.

Tekst wygląda nowocześnie dzięki CSS.

color – kolor tekstu
background-color – kolor tła
font-family – rodzaj / rodzina czcionki (używaj nowoczesnych jak 'Inter')
font-size – rozmiar tekstu
font-weight – grubość / pogrubienie czcionki
text-align – wyrównanie tekstu
line-height – wysokość linii (odstęp między wierszami)
text-decoration – dekoracja tekstu (np. underline)
letter-spacing – odstęp między literami

Do zapamiętania: Zewnętrzny CSS podłączasz tak: <link rel="stylesheet" href="css/style.css"> w sekcji <head>. Używaj zmiennych CSS dla łatwiejszej edycji.

Zadanie

Stwórz plik css/style.css i podłącz go do index.html. Ustaw:

tło body na jasnoszare
czcionkę sans-serif
kolor linków na niebieski + podświetlenie przy hover
wyśrodkowanie h1
dodaj dark mode z @media (prefers-color-scheme: dark)

Następna lekcja

2. Jak działają selektory i model pudełkowy