Na Wikipedii (otevřené encyklopedii) se o CSS dočtete toto: „Kaskádové styly (v anglickém originále Cascading Style Sheets se zkratkou CSS) je jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML.“, celý článek na Wikipedii (otevřené encyklopedii), ve kterém se dočtete zajímavé informace o tomto jazyku, otevřete pouhým kliknutím.
Kaskádové styly tedy slouží pro grafickou úpravu webu. Vzhled jednotlivých tagů lze sice nastavit u každého tagu jeho parametry, ale v dnešní době a stále častěji se preferuje nastavovat veškerou grafiku webu přes kaskádové styly. Protože je ale na každém, jaký způsob bude preferovat (jestli kaskádové styly nebo parametry u tagů), je tato příručka připravena na učení obou způsobů. Kaskádové styly lze nastavovat různě, můžeme je přiřadit nějakému tagu, ale také nějaké třídě nebo identifikátoru. Téměř každý tag, který v HTML existuje, může mít parametr class, který slouží pro přiřazení třídy kaskádových stylů k tomuto tagu. Za rovná se tohoto parametru class bude v uvozovkách vámi vymyšlené slovo, což bude třída, ke které pak později budete přiřazovat kaskádové styly. Toto slovo musí být ale bez diakritiky, bez velkých písmen a bez mezer. Pokud nějakému tagu chcete přiřadit hned dvě třídy kaskádových stylů, do uvozovek parametru class napište nejdříve první slovo, které bude třídou, a potom za mezeru hned druhé slovo, jež bude třídou. Pro tento určitý tag pak budou platit obě třídy, s nichž každá bude moci mít nastavené jiné kaskádové styly, které si ale nebudou moci navzájem odporovat. Pokud nechcete používat třídy s parametrem class, existuje alternativa – parametr id. Pro něj platí pak se vším stejná pravidla, ale identifikátory jsou na složitější weby, proto se o nich v této příručce již nebudeme učit, postačí nám třídy pomocí parametru class. Třídy se mohou v kódu jazyka HTML opakovat, jednou může být jedna třída u tagu např. <a>, později může být stejná třída u tagu např. <h1>.
Pokud jste se rozhodli upravovat všechnu grafiku webu pomocí kaskádových stylů, což je v dnešní době lepší, existují pro vás skvělé tagy – <div> a <span>. Oba dva tagy jsou párové a slouží pro úpravu vzhledu webu pomocí kaskádových stylů. Tag <div> se používá na rozdělení webové stránky do jednotlivých sekcí, např. hlavička, menu, text, patička. Tag <span> se používá na rozdělení do menších sekcí, ale hlavně na rozdělení nějakého textu, např. důležité, citát. Samy o sobě jsou v kódu jazyka HTML zbytečné, protože mají jeden povinný parametr, class, který má v uvozovkách třídu nebo třídy kaskádových stylů, které se následně mají přiřadit k daným oddílům. Pomocí nich se brzy také naučíte přiřadit jiné kaskádové styly nadpisu v oddílu hlavička a jiné kaskádové styly nadpisu v oddílu text. Tyto dva tagy jsou proto výborné a používat byste je měli.
Nyní tedy známe něco o tagu <div>, který rozděluje webovou stránku na jednotlivé sekce, o tagu <span>, který rozděluje webovou stránku na menší sekce, a o třídách, které můžeme přiřadit ke všem tagům, pomocí nichž se budou přiřazovat kaskádové styly určitému tagu. Nyní tedy můžeme vytvořit náš první soubor jazyka CSS. Otevřeme si např. Poznámkový blok u OS Windows a začneme psát své první kaskádové styly. Na začátek řádku napíšeme nejdříve něco, čemu chceme přiřadit následující kaskádové styly. Pokud chceme přiřadit kaskádové styly nějakému tagu, napíšeme tento tag, ale bez hranatých závorek. Tyto kaskádové styly pak budou platit pro všechny stejné tagy v kódu jazyka HTML. Pokud chceme přiřadit kaskádové styly nějaké třídě, napíšeme nejdříve tečku a poté hned název té třídy, což je slovo bez diakritiky, bez velkých písmen a bez mezer v uvozovkách tagu class. Pokud chceme přiřadit kaskádové styly tagům např. <h1> pouze v sekci hlavička, napíšeme nejdříve třídu té sekce (např. hlavicka), samozřejmě s tečkou před tímto slovem, protože je to námi vymyšlená třída, poté mezeru a následně teprve h1, to už bude bez tečky, ale také bez hranatých závorek. Pokud máme nějakou stejnou třídu u např. tagu <p> a <h1> a chceme přiřadit kaskádové styly pouze třídě u tagu <h1>, napíšeme na začátek řádku h1, poté hned tečku, za kterou bude následovat název třídy. Ve všech kombinacích nezapomínejte na to, že se píše tečka před třídy a že se píší tagy bez hranatých závorek. Takto existuje ještě spousta dalších kombinací a možností, ale toto pro ne úplně nejsložitější weby vědět stačí. Poté, co napíšeme něco, čemu chceme přiřadit následující kaskádové styly, uděláme mezeru, za kterou bude začátek složené závorky (Alt + 123). V této složené závorce již konečně budou kaskádové styly, které chceme přiřadit. Každý kaskádový styl začíná nejdříve nějakým výrazem, který vychází z anglického slova, poté následuje dvojtečka. Po dvojtečce následuje mezera, za kterou bude hodnota tohoto kaskádového stylu, což může být opět anglické slovo, ale i číslo. Následuje středník, za kterým bude mezera, po níž bude následovat další kaskádový styl. Takto můžeme psát k vybrané třídě nebo tagu kolik jen kaskádových stylů chceme, každý ale musí vypadat tak, jak se zde nyní psalo. Po všech kaskádových stylech ukončíme složenou závorku (Alt + 125), zalomíme řádek a na další řádek napíšeme další tag nebo třídu, kterým chceme nastavovat další kaskádové styly, a poté bude následovat opět složená závorka, kaskádové styly a vše podle předchozích pokynů. Takto pak bude vypadat celý soubor se spoustou kaskádových stylů. Soubor si nyní uložíme pod jakýmkoli názvem s příponou css. Nyní nám už zbývá pouze poslední krok – propojit soubor jazyka HTML s tímto souborem jazyka CSS, proto do části mezi <head> </head> v souboru jazyka HTML zkopírujte toto: <link rel="stylesheet" media="screen" href="nazev.css" type="text/css">. Nezapomeňte ale upravit název souboru v uvozovkách parametru href na název vašeho souboru s kaskádovými styly. Souborů s kaskádovými styly můžeme mít hodně a každý z nich můžeme propojit jen s tou webovou stránkou, kde ho potřebujeme, takto si pak můžeme ulehčit vývoj grafiky webu. Zde si nyní můžete vyzkoušet vytvořit složenou závorku:
Již zde bylo zmíněno, že nesmíte do uvozovek parametru class psát slova s diakritikou, s velkými písmeny a s mezerami. Nejlepší bude, když se vyvarujete i čísel. Dále je důležité zachovávat všechna pravidla, která se týkají přiřazování kaskádových stylů, tedy např. kam udělat mezeru, kam středník, dvojtečku, kam složenou závorku. Soubor, ve kterém budou uloženy kaskádové styly, také nesmí mít v názvu žádnou diakritiku, velká písmena, mezery a pro jistotu ani žádná čísla. V názvu by také neměla být žádná speciální znaménka, jako je %, °, ?, !, (, ) apod., ale na to by vás měl např. OS Windows upozornit, protože takto nesmí být pojmenován žádný soubor ve vašem počítači, ať už to je právě web, nebo třeba fotografie. Pokud tato pravidla budete dodržovat, vždy vám bude fungovat propojení kaskádových stylů v souboru jazyka CSS a kódu webu v souboru jazyka HTML na 100%. Někdy i malá chybka může změnit celé chování některých objektů na webu, tak se toho zkuste vyvarovat.