Czym jest CSS i jak go podłączyć
Pierwsze kroki ze stylami: podłączanie i selektory CSS
CSS — ubranie dla HTML
HTML to nagie ciało (struktura). CSS to ubranie, makijaż, fryzura. Bez CSS strona wygląda jak dokument Worda z lat 90.: czarny tekst na białym tle. CSS zamienia ten sam HTML w nowoczesny, stylowy design.
Trzy sposoby podłączenia CSS
1. Zewnętrzny plik (najlepsza praktyka)
<!-- W <head> pliku HTML -->
<link rel="stylesheet" href="style.css">Plik style.css ze wszystkimi stylami podłączony do strony.
2. Wewnątrz <head> (wewnętrzny)
<style>
body { background: #f0f0f0; }
h1 { color: blue; }
</style>3. Atrybut style (inline — unikaj!)
<p style="color: red; font-size: 18px;">Tekst</p>Źle: style rozsiane po całym HTML, trudne w utrzymaniu.
Reguła: zawsze używaj zewnętrznego pliku CSS.
Selektory CSS — jak wskazać element
Selektor mówi przeglądarce, do których elementów zastosować styl:
/* Tag — wszystkie <p> na stronie */
p { color: gray; }
/* Klasa — wszystkie elementy z class='btn' */
.btn { background: blue; color: white; }
/* ID — tylko element z id='header' */
#header { height: 80px; }
/* Wszystkie elementy */
* { box-sizing: border-box; }
/* Potomek — <a> wewnątrz <nav> */
nav a { text-decoration: none; }
/* Hover — przy najechaniu myszką */
.btn:hover { background: darkblue; }Specyficzność (priorytet stylów): styl inline > #id > .class > tag
Jeśli dwie reguły kolidują — wygrywa bardziej szczegółowa.
Prawdziwy podstawowy plik CSS. rem — jednostka względna bazująca na rozmiarze czcionki korzenia (zwykle 16px). 1rem = 16px, 2.5rem = 40px.
Zawsze zaczynaj CSS od * { box-sizing: border-box; margin: 0; padding: 0; } — to CSS Reset. Usuwa różne domyślne marginesy przeglądarek i ujednolica zachowanie w różnych przeglądarkach.