CSS styling — jak změnit vzhled své stránky

Autor

Senior Web Developer & Školitel

Co je CSS a proč to potřebuješ

CSS je to, co z HTML stránky dělá něco pěkného. Bez CSS by webové stránky vypadaly jako starý dokument — jen text, bez barev, bez rozvržení, bez stylu. CSS ti umožňuje měnit barvy, fonty, velikosti, odsazení a prakticky všechno, co vidíš na obrazovce.

Jestli jsi někdy videl/a web, který vypadal skvěle, měl hezké barvy a vše bylo pěkně uspořádáno — to všechno dělá CSS. Je to jazyk, kterým říkáš prohlížeči, jak má tvoje stránka vypadat.

Notebook s CSS kódem a barevnými swatchy

Jak CSS funguje — selektory a vlastnosti

CSS pracuje na jednoduchém principu: vyberou si element (třeba všechny nadpisy nebo odstavce) a pak jim řeknou, jak mají vypadat. Tenhle výběr se jmenuje selektor a to, co se změní, se jmenuje vlastnost.

Například: když chceš, aby všechny nadpisy h2 byly modré a větší, napíšeš něco jako h2 { color: blue; font-size: 24px; } . Prostě, ne? Selektor h2 znamená „vezmi všechny h2 nadpisy”, a pak ty vlastnosti (color, font-size) řeknou, jak mají vypadat.

Existuje spoustu selektorů. Můžeš vybrat všechny elementy určitého typu, elementy s určitou třídou, nebo konkrétní element podle jeho ID. Začátečníci často používají třídy — jsou univerzální a snadné na práci.

Textový editor s CSS selektory a vlastnostmi zvýrazněnými

Webová stránka zobrazující barevné karty a typografii

Barvy, fonty a rozvržení — základní vlastnosti

Když začneš s CSS, budeš používat tři věci nejvíc: barvy, fonty a rozvržení.

Barvy změníš pomocí color: (pro text) nebo background: (pro pozadí). Můžeš používat jména barev (red, blue, green) nebo kódy (např. #FF5733 nebo rgb(255, 87, 51)). Nejsnadnější je používat jména barev nebo hex kódy.

Fonty se mění s font-family: a velikost s font-size: . Rozvržení je zajímavější — můžeš používat display: flex nebo display: grid aby se věci zarovnávaly vedle sebe místo pod sebou.

Praktické tipy pro psaní CSS

Jak psát CSS, aby to bylo čisté a fungovalo správně

Používej třídy místo ID

Třídy jsou flexibilnější a můžeš je použít vícekrát. ID je pro jednu věc. Takže radši `class=”red-button”` než `id=”button-1″`.

Udržuj CSS organizované

Seskupuj pravidla podle sekce stránky. Nejdřív hero, pak obsah, pak footer. Usnadní ti to orientaci, když se vrátíš k kódu za týden.

Testuj na mobilech

Tvoje stránka musí vypadat dobře i na mobilu. Používej media queries (`@media (max-width: 768px)`) aby se všechno přizpůsobilo.

Neopakuj se zbytečně

Když vidíš, že píšeš stejný CSS kód pětkrát, vytvoř si třídu a použij ji všude. To se jmenuje DRY — Don’t Repeat Yourself.

Box model — odsazení a okraje

Jeden z nejdůležitějších konceptů v CSS je box model. Každý element na stránce je ve skutečnosti krabička. Ta krabička má obsah uprostřed, pak kolem obsahu je padding (vnitřní odsazení), pak border (okraj), a nakonec margin (vnější odsazení).

Když třeba chceš, aby text v tlačítku měl více místa kolem sebe, zvětšíš padding. Když chceš, aby tlačítko bylo dál od ostatních věcí, zvětšíš margin. Border je čára kolem věci. Prostě čtyři vrstvy kolem obsahu.

Důležité: margin a padding se počítají jinak. Margin je mimo element, padding je vnitřní. A pozor na `margin collapse` — někdy se marginy sčítají divně, ale to se naučíš postupem času.

Diagram CSS box modelu s vrstvami padding, border a margin

Teď už víš, jak CSS funguje

CSS není těžké. Je to jen způsob, jak říkáš prohlížeči, jak má věci vypadat. Začni malým projektem — třeba změň barvu odstavců, velikost nadpisů nebo odsazení kolem textu. Každý web, který vidíš, je postaven přesně takhle. CSS selektory, vlastnosti, a pak opakování.

Nejlepší způsob, jak se CSS naučit, je prostě si hrát. Vytvoř si jednoduchou stránku a zkoušej věci. Změní barvu? Super! Nefunguje to jak očekáváš? To je v pořádku — všichni si to prochází. Pokud se chceš dozvědět víc, máme tu spoustu dalších článků o HTML, responzivním designu a tvorbě webů.

Zpátky na HTML a CSS kurz

Poznámka

Obsah tohoto článku je informativní a vzdělávací. Cílem je poskytnout základní znalosti o CSS. Webový vývoj se neustále mění a technologie se vyvíjejí — vždy si ověř aktuální postupy v oficiální dokumentaci nebo u zkušeného vývojáře. Tento článek není náhradou za odborné školení nebo konzultaci s profesionálem.