CSS soubor také vytváříme ve stejném editoru jako HTML soubor, avšak sám o sobě nemá význam, musí být spojen právě s ním. Aneb HTML soubor může sám o sobě existovat a být plně funkční, CSS soubor však ne.

HTML a práce ve dvou programech

S HTML se pracuje tak, že se jeden a tentýž soubor otevře ve dvou různých programech.

• Najděte si HTML soubor na disku. Otevřete ho v prohlížeči, nejčastěji prostě dvojklikem (prohlížeč je výchozí otevírací program)
• Jděte znovu na disk a tutéž stránku otevřte v Poznámkovém bloku nebo jiném editoru.

Nyní by měl být stav ten, že v jednom programu je soubor otevřený v prohlížeči (např. Internet Explorer, Firefox), ve druhém programu je soubor otevřený v editoru (např. tedy Poznámkový blok). Nyní:

• Změňte obsah v editoru.
• Uložte.
• Přepněte se do prohlížeče.
• Obnovte stránku (např. klávesou F5). Měla by být vidět změna.

CSS

Pokud píšete dokument v čistém HTML, musíte psát formátování rovnou do textu. To vede k nepřehlednosti kódu a zpětná úprava vzhledu je pracná ne-li nemožná.

Pokud pro formátování HTML dokumentu využijete styly, tak se HTML kód omezí pouze na rozložení stránky ve smyslu: toto je hlavní nadpis, toto je podnadpis, toto je normální odstavec, tento text je důležitý, toto je postranní lišta.

K takovému dokumentu pak připojíte externí soubor se styly, který určí, jak má vypadat hlavní nadpis, podnadpis, normální text a že postranní pruh se zobrazí jako postranní. Změny ve vzhledu se pak provádí pouze úpravou CSS souboru, do HTML kódu se vůbec nemusí sahat.

V jednom programu máte nyní otevřený HTML soubor v prohlížeči, ve druhém programu je soubor otevřený v editoru (např. Poznámkový blok) a ve třetím programu máte otevřený CSS soubor v editoru (např. Poznámkový blok).