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

~15-20 min poziom: początkujący

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

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">

Podstawowe właściwości

color: #2c3e50;                  /* kolor tekstu */
background-color: #f1f3f5;        /* tło */
font-family: "Segoe UI", sans-serif;
font-size: 1.1rem;
font-weight: 500;                 /* 400=normal, 700=bold */
text-align: center;
line-height: 1.6;

Przykładowy plik style.css

body {
    font-family: system-ui, sans-serif;
    background-color: #f8f9fa;
    color: #212529;
    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
font-size – rozmiar tekstu
font-weight – grubość / pogrubienie czcionki
text-align – wyrównanie tekstu
line-height – wysokość linii (odstęp między wierszami)

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

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

Następna lekcja

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

[ Miejsce na reklamę ]