--- site_name: WPlama site_description: "Správa, opravy a vývoj WordPress webů a e-shopů" site_url: https://www.wplama.cz contact_email: info@wplama.cz title: SERIÁL „ZAČÍNÁME S PROGRAMOVÁNÍM“ – CSS 1. část url: https://www.wplama.cz/serial-zaciname-s-programovanim-css-1-cast/ date: 2014-06-13 modified: 2014-06-13 author: Zdeněk Vojáček type: post categories: [Snippety] tags: [css, Kódování, WordPress návody] --- Snippety # SERIÁL „ZAČÍNÁME S PROGRAMOVÁNÍM“ – CSS 1. část [ZV **Zdeněk Vojáček**](https://www.wplama.cz/author/wojda/) Publikováno 13. 6. 2014 2 min čtení Pozor: Článek je z roku 2014. Některé postupy se mohly změnit. ![HTML](https://www.wplama.cz/wp-content/uploads/2014/06/HTML.jpg "HTML") Obsah článku (4 kapitoly) 1. [CSS – Cascading Style Sheets](https://www.wplama.cz/serial-zaciname-s-programovanim-css-1-cast/#css-cascading-style-sheets) 2. [Napojení](https://www.wplama.cz/serial-zaciname-s-programovanim-css-1-cast/#napojeni) 3. [class, id, tag](https://www.wplama.cz/serial-zaciname-s-programovanim-css-1-cast/#class-id-tag) 4. [Kombinace](https://www.wplama.cz/serial-zaciname-s-programovanim-css-1-cast/#kombinace) Abychom mohli pokračovat s HTML, musíme si říci i něco málo o CSS kvůli formátování a struktuře těla stránky. ## CSS – *Cascading Style Sheets* CSS styly použijeme v podstatě kdekoliv, kde potřebujeme nějak ovlivnit vzhled webu. Ať už umístění jednotlivých prvků, jejich barvu či typ písma. ## Napojení **externí soubor** – Použití externího souboru pro CSS styly je nejpřehlednější a nejlepší způsob. Styly se Vám pak nemotají nikde v kódu a snadno je použijete kdekoliv na webu. Soubor se připojuje v hlavičce webu pomocí jednoduchého příkazu **v hlavičce** – Tyto styly se zapisují do hlavičky webu mezi tagy **přímý zápis** – Slouží pouze k ovlivnění prvku, u kterého jsou zapsány. Nepíše se zde, co má ovlivnit pouze, jak to má ovlivnit. V našem případě barvu textu, který je v tagu nastaví na modrou. text ## class, id, tag **tagy** – Styly můžeme napojit přímo na HTML tagy. V takovém případě nám daný styl ovlivní všechny takové tagy na stránce. a { color:red;} Takto zapsaný styl nám u všech odkazů na webu nastaví červené písmo. **class** – Použijeme-li class, tak vytvoříme třídu, kterou následně můžeme přiřadit HTML prvkům, které chceme ovlivnit. .podrtzeni { text-decoration:underline; } nějaký ten text nějaký ten text nějaký ten text **id** – Používá se velmi podobně class. Class definuje celou třídu prvků, „id“ se používá pro nastylování jednoho prvku (například konkrétní container pro menu). #tucne { font-weight:bold; } **nějaký ten text** nějaký ten text **nějaký ten text** ## Kombinace Při používání můžeme zápisy libovolně skládat a kombinovat. p a { color:red } -> všechny odkazy uvnitř odstavce obarví na červeno, ale ty, které v odstavci nejsou, zůstanou v původní barvě .blok .cervene { color:red } -> Najde prvky které mají třídu *blok* a v nich najde prvky, které mají třídu *cervene* a obarví je na červeno Příště si povíme něco nejpoužívanějších stylech a co znamenají. - [#css](https://www.wplama.cz/stitek/css/) - [#Kódování](https://www.wplama.cz/stitek/kodovani/) - [#WordPress návody](https://www.wplama.cz/stitek/navody/) Sdílet - - [](mailto:?subject=SERIÁL „ZAČÍNÁME S PROGRAMOVÁNÍM“ – CSS 1. část&body=SERIÁL „ZAČÍNÁME S PROGRAMOVÁNÍM“ – CSS 1. část https://www.wplama.cz/serial-zaciname-s-programovanim-css-1-cast/) - [](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.wplama.cz%2Fserial-zaciname-s-programovanim-css-1-cast%2F) - [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.wplama.cz%2Fserial-zaciname-s-programovanim-css-1-cast%2F) ZV Autor Zdeněk Vojáček Milovník žen, masa a PHP kódu 11 článků [Všechny články autora →](https://www.wplama.cz/author/wojda/) ## Komentáře Zatím tu nikdo nekomentoval. Napište první komentář. ### Přidat komentář [Zrušit odpověď](https://www.wplama.cz/serial-zaciname-s-programovanim-css-1-cast/#respond) [← Předchozí článek Jak hromadně nainstalovat oblíbené pluginy](https://www.wplama.cz/jak-hromadne-nainstalovat-oblibene-pluginy/) [Další článek → 7 způsobů jak bojovat se spamem u WordPressu](https://www.wplama.cz/7-zpusobu-jak-bojovat-se-spamem-u-wordpressu/) Související ## Mohlo by vás zajímat [Všechny články z rubriky Snippety →](https://www.wplama.cz/wordpress/kodovani/) ![wordpress programovani](https://www.wplama.cz/wp-content/uploads/2025/10/wordpress-programovani.jpg "wordpress programovani") Snippety ### [Jak ve WordPressu (včetně Gutenberg) automaticky nahradit „a, i, k, o, s, u, v, z“ pevnou mezerou](https://www.wplama.cz/jak-ve-wordpressu-vcetne-gutenberg-automaticky-nahradit-a-i-k-o-s-u-v-z-pevnou-mezerou/) 8. 10. 2025 3 min čtení --- ![wordpress editor](https://www.wplama.cz/wp-content/uploads/2024/02/wordpress-editor.png "wordpress editor") Snippety ### [Editor souborů ve WordPress](https://www.wplama.cz/editor-souboru-ve-wordpress/) 25. 3. 2024 2 min čtení --- ![cookies](https://www.wplama.cz/wp-content/uploads/2023/06/cookies.jpg "cookies") WordPress návody ### [Jak u pluginu Complianz upravit lištu a zvýšit počet lidí, který s použitím cookies souhlasí](https://www.wplama.cz/jak-u-pluginu-complianz-upravit-listu-a-zvysit-pocet-lidi-ktery-s-pouzitim-cookies-souhlasi/) 3. 7. 2023 1 min čtení ---