This article is currently in the process of being translated into Czech (~38% done).
Propojení CSS s HTML
Jak jsme již vysvětlovali, CSS obsahuje informace o tom, jak by měl být váš kód (obvykle HTML) prezentován koncovému uživateli. To znamená, že oba jazyky musí být propojeny – prohlížeč potřebuje vědět, že chcete zkombinovat část kódu HTML s částí kódu CSS. Pro dosažení nejvyšší úrovně flexibility existuje několik způsobů, jak toho dosáhnout.
Vložení CSS pomocí atributu Style
Téměř každý HTML tag obsahuje atribut Style a pomocí tohoto atributu můžete pro daný element přímo specifikovat CSS. To ovšem potlačuje jednu z hlavních výhod CSS, a to opětovnou použitelnost, protože kód CSS použitý touto technikou se vztahuje pouze na jeden prvek a nelze jej znovu použít pro prvky jiné.
Je to však skvělý způsob, jak si činnost otestovat nebo specifikovat příkazy jednorázové použití. Zde je návod, jak to lze použít:
<span style="color: Blue; text-decoration: underline;">Hello, CSS!</span>Všimněte si, že pro stejný prvek mohu definovat několik vlastností, v tomto případě pravidla pro barvu textu a také pro vzhled textu. Toto je zdaleka nejjednodušší způsob použití CSS, protože nezahrnuje další tagy ani soubory – pouze lokálně definovaný CSS. Z již uvedených důvodů se však nejedná o preferovaný způsob použití CSS.
Další nevýhodou je skutečnost, že kód stylu bude nutné stahovat při každém požadavku na zobrazení stránky. U jednoho prvku s několika příkazy stylu to není problém, ale pokud máte smyčku, která mnohokrát vygeneruje stejný kód atributu stylu, zbytečně to zaplní váš dokument značek a místo toho, aby byl prohlížečem ukládán do mezipaměti a stahován pouze jednou pro návštěvníka, kód se stahuje znovu a znovu!
CSS v celém dokumentu prostřednictvím bloků STYLE
Druhým jednoduchým způsobem, jak aplikovat CSS na prvky v dokumentu, je použití bloku stylů. HTML obsahuje tag s názvem "style", do kterého lze vložit kód CSS. Zde můžete definovat příkazy, které pak můžete použít v celém dokumentu. Zde je příklad:
<!DOCTYPE html>
<html>
<head>
<title>Style blocks</title>
<style type="text/css">
.highlight {
color: Blue;
text-decoration: underline;
}
</style>
</head>
<body>
This is a piece of <span class="highlight">text</span> with <span class="highlight">highlighted</span> elements in <span class="highlight">it</span>.
</body>
</html>Všimněte si toho, jak mohu příkaz definovat na jednom místě a poté ho v dokumentu několikrát znovu použít. Pokud chcete, můžete definovat více stylových bloků a umístit je kamkoli v dokumentu. Za osvědčený postup se však považuje umístit stylový blok(y) do horní části dokumentu, do sekce záhlaví ("HEAD"), protože se načte před zobrazením dokumentu, tedy nezpomaluje výsledek.
Global CSS through external CSS documents
So, by using the style block as described above, you can re-use your CSS code all over the document, but you still have to include it on all of the pages of your website, which requires the browser to download it on each request instead of just downloading an external CSS file once and then cache it. This is a major disadvantage of the style block approach and why you should normally go for the third approach instead: The external CSS file!
A CSS file is simply a plain text file saved with a .css extension and then referenced in the file(s) where you want to apply the rules. If we re-use the example from the style block part, we can then move the "highlight" rule to a new file (without the HTML part) and save it under an appropriate name, e.g. style.css:
.highlight {
color: Blue;
text-decoration: underline;
}We can then reference it in our HTML document, using the link element:
<!DOCTYPE html>
<html>
<head>
<title>Style blocks</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
This is a piece of <span class="highlight">text</span> with <span class="highlight">highlighted</span> elements in <span class="highlight">it</span>.
</body>
</html>This example requires the HTML and CSS file to be in the same directory - if they are not, you need to update the href attribute to match the path.
Now we define all of our CSS code in its own file and then just reference it inside all of our sub pages to take advantage of the defined rules! If you want to, you can divide your CSS code into several external files and only include the ones you need - it all depends on how big your website is and how you prefer to organize your code.
Summary
We have talked about different ways for your webpage to consume CSS code in this chapter.
The first approach was the inline style attribute. Its biggest advantage is the fact that its so easy to use, but as a disadvantage, it cuts you off from some of the biggest benefits of CSS: Code re-usability and the ability to make layout changes in a single place and have it applied across your entire website.
The second approach uses the style block. It's only slightly less cumbersome to use than the inline style attribute, and allows re-using your CSS code. The biggest disadvantage is that code in a style block is global across the page, but not across multiple pages, meaning that you will have to include it on each subpage of your website.
The third approach is the one you most commonly see on websites: External CSS file(s). It only has the disadvantage of being slightly harder to work with, because you have to place the CSS in a separate file which you will have to open to make changes - a very small price to pay for the ability to re-use your CSS across your entire website!
Please be aware that throughout this tutorial, I will mainly be using the second and the first approach, but only because the examples presented in this tutorial are all small, separate entities and not a big website. It's simply a lot easier to demonstrate the various CSS properties this way, instead of having to separate markup and CSS into distinct files and explaining this fact each time. You are free to use the approach you prefer, but for anything other than small examples and very simple websites, the third approach is usually the superior way!