Nechceme ale zase začínat úplně od začátku, že? Opět použijeme něco, co již bylo vytvořeno jinými programátory a sdíleno na internetu pro použití zdarma. Vymýšlet znovu, co již před námi někdo vymyslel, to by nebyla žádná legrace.

Byl napsán programátory, kteří pracovali pro Twitter a je nyní vyvíjeno dobrovolníky z celého světa.

To nepřidá žádné soubory do projektu. Jen to odkazuje na soubory, které existují na internetu. Jen do toho, otevři tvůj web a aktualizuj stránku. Tady to je!

Konečně se podíváme zblízka na téma, které jsme již zmínili, **statické soubory**. Statické soubory jsou všechny naše CSS soubory a obrázky, které nejsou dynamické, takže jejich obsah není závislý na kontextu požadavku a budou stejné pro každého uživatele.

Django automaticky najde všechny složky s názvem "static" uvnitř vašich složek aplikací, a bude moci využívat jejich obsahu jako statické soubory.

Vytvoř soubor CSS, chceš-li na stránku www přidat svůj vlastní styl. Vytvoř nový adresář s názvem `css` uvnitř adresáře `static`. Vytvoř nový soubor s názvem `blog.css` uvnitř tohoto adresáře `css`. Připraveno?

Čas k napsání nějakého CSS! Otevři soubor `blog/static/css/blog.css` v editoru kódu.

Nepůjdeme příliš hluboko do přizpůsobení webu a učení o CSS, protože je to docela snadné, a můžeš se o tom dozvědět sama po tomto workshopu. Opravdu můžeme doporučit [Codeacademy HTML & CSS kurz][2] kde se dozvíš vše, co potřebuješ vědět, aby tvoje stránky s CSS vypadaly dobře.

Ale pojďme něco málo udělat. Možná bychom mohli změnit barvu našeho záhlaví? Pro interpretaci barev, počítače používají speciální kódy. Začínají `#` a následuje 6 písmen (A-F) a číslic (0-9). Kódy barev můžeš najít například zde: http://www.colorpicker.com/. Můžeš také použít [předdefinované barvy][3], `červená/red` a `zelená/green`.

`h1` je CSS selector. To znamená, že budeme aplikovat naše styly na jakýkoliv `a` element uvnitř `h1` (např. když máme v kódu něco jako: `< h1 >< href = "" > odkaz < /a >< / h1 >`). V takovém případě sdělujeme, že barvu elementu měníme na `#FCA205`, což je oranžová. Samozřejmě zde můžeš vložit vlastní barvu!

V CSS souboru určujeme styly pro prvky v souboru HTML. Prvky jsou identifikovány pomocí názvu prvku (tj, `a`,`h1`, `body`), atributem `class` nebo atributem `id`. Třídy/Class a id jsou jména, které pojmenovávají samotný prvek. Třídy definují skupiny prvků a Id poukazují na konkrétní prvky. Například, následující tag může identifikovat pomocí CSS tag `a`, třídu `external_link` nebo id `link_to_wiki_page`:

Právě nahráváme statické soubory :). Pak mezi `< head >` `a/< / head >`, za odkazy na soubory Bootstrap CSS (prohlížeč načte soubory v pořadí, ve kterém jsou zapsány, takže kód v našem souboru může přepsat kód v Bootstrap souborech), přidejte tento řádek:

Dobrá práce! Možná bychom také chtěli provzdušnit náš web a zvětšit okraj na levé straně? Pojďme to zkusit!

Možná můžeme také chtít přizpůsobit písmo v našem záhlaví? Vlož mezi tag `< head >` v souboru `blog/templates/blog/post_list.html`:

Jak bylo uvedeno výše, CSS má koncept tříd, který v podstatě umožňuje pojmenovat části kódu HTML a styly aplikovat pouze na tyto části bez ovlivnění ostatních částí. Je to super užitečné, pokud máš dva div tagy, ale každý dělá něco jiného (jako záhlaví a příspěvek), takže nechceš, aby vypadaly stejně.

A nyní přidej třídu, `post` do svého `div` obsahující blog post.

Pak obklopující HTML kód, který zobrazuje příspěvek s deklaracemi tříd. Nahraď tímto:

Woohoo! Vypadá to super, ne? Kód, který jsme vložili není opravdu tak těžký pochopit a měla bys být schopna pochopit jeho většinu, jen jeho čtením.

Neobávej se trochu poupravit CSS a pokusit se změnit některé věci. Když něco rozbiješ, neboj se, můžeš jej vždy vrátit zpět!

Mimochodem opravdu doporučujeme tento bezplatný online [Codeacademy HTML & CSS kurz][2] jako post-workshop úkol, naučíš se vše, co potřebuješ vědět, aby tvoje stránky byly hezčí s CSS.