Co je CSS

CSS je zkratka pro "Cascading Style Sheets" (kaskádové styly) a je primárním jazykem používaným k popisu vzhledu a formátování webových stránek na internetu a dokumentů se značkovacím kódem (např. HTML a XML) obecně.

Jazyk značek např. HTML byl původně navržen tak, aby sám poskytoval informace o formátování a vzhledu, ale brzy se ukázalo, že by dávalo mnohem větší smysl rozdělit činnost do dvou vrstev: "Obsah dokumentu" a "Vzhled dokumentu", přičemž CSS by plnilo úlohu té druhé části. Historicky proto HTML obsahuje tagy jako druh písma(font), jejichž jediným účelem je lokálně upravovat vzhled písma, barvu a velikost, což je úkol, který dnes řeší CSS. To umožňuje vývojářům používat pravidla formátování opakovaně, na několika místech ve stejném dokumentu a dokonce i na více dokumentů. Zde je příklad, který dokazuje můj názor, a nebojte se, pokud vám není zcela jasné, co dělá – všechny aspekty budou vysvětleny v tomto tutoriálu:

Old style text formatting, using only HTML:

This is a piece of
<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>text</b></i></font> with
<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>highlighted</b></i></font> elements in
<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>it</b></i></font>.

A more modern approach with CSS:

<style type="text/css">
.highlight {
	color: Blue;
	font-style: italic;
	font-weight: bold;
	font-size: 120%;
	font-family: Tahoma, Verdana, Arial;
}
</style>

This is a piece of
<span class="highlight">text</span> with
<span class="highlight">highlighted</span> elements in
<span class="highlight">it</span>.

Všimněte si, jak jednoduše znovu používám stejnou sadu pravidel pro několik HTML tagů. Trojnásobné použití, jako v příkladu je již výhodné, ale tím to nekončí – vložte CSS do externího souboru stylů (o tom později) a můžete použít stejná pravidla napříč CELÝM webem. A co když se rozhodnete, že zvýrazněný text by měl být červený místo modrý? U prvního přístupu byste museli ručně upravovat tagy všude, kde jste je použili – s CSS stačí změnit jediné pravidlo „.highlight“!

Summary

CSS allows you to easily apply rules about formatting and layout to your HTML elements and then re-use those rules across multiple elements and even pages. In this introduction, we looked at some CSS code, but we did not talk about how it works and why it looks the way it does - this will be the subject for the next couple of chapters, where we start from scratch and explain it all in details.