Co je to CSS - kaskádové styly

Pamatujete si HTML (Hypertext Markup Language)? Kódovací jazyk, který slouží jako základ pro veškerý vývoj webu? Pokud je HTML prvním jazykem, který se budete učit, pokud vás zajímá tvorba webů, jeho bratr CSS je těsně za ním.

Chystáte se tvořit web?

A víte jaké jsou nejlepší nástroje na tvorbu webů?

Máme pro vás veliké srovnání většiny v česku dostupných programů na tvorbu webů!

Co je to CSS? A jak souvisí s HMTL?

CSS znamená Cascading Style Sheets, česky kaskádové styly, či pouze “styly”. A zatímco HTML se používá ke strukturování webu (definování prvků, jako jsou nadpisy a odstavce, umožnění vkládání obrázků, videí a dalších médií), CSS určuje styl vašeho dokumentu – rozvržení stránky, barvy, písma a velikosti. Představte si HTML jako stavební základ a kostru domu, bez něj by dům nestál a nebyl funkční a CSS jako estetické volby typu barva omítky, tvar oken a jaké květiny budou na oknech, bez kterých by zase dům nevypadal hezky.

Jak funguje CSS?

CSS přináší styl vašim webovým stránkám interakcí s prvky HTML. Prvky jsou jednotlivé komponenty HTML webové stránky – například odstavec -, které v HTML mohou vypadat takto:

<p> Toto je můj odstavec! </p>

Pokud chcete, aby se tento odstavec zobrazoval lidem, kteří si prohlíží vaši webovou stránku prostřednictvím webového prohlížeče, růžově a tučně, použili byste kód CSS, který vypadá takto:

p  {  color:pink;  font-weight:bold;  }

color:pink značí, že bude odstavec růžový a font-weight:bold značí tučné písmo.

V tomto případě se „p“ (odstavec) nazývá „selektor“ – jedná se o část kódu CSS určující, který prvek HTML bude stylem CSS ovlivněn. V CSS je selektor zapsán nalevo od první složené závorky. Informace mezi složenými závorkami se nazývá deklarace a obsahuje vlastnosti a hodnoty, které se aplikují na selektor. Vlastnosti jsou například velikost písma, barva a okraje, zatímco hodnoty jsou nastavení pro tyto vlastnosti. Ve výše uvedeném příkladu jsou „color“ a „font-weight“ vlastnosti a „pink“ a „bold“ jsou hodnoty. Dalí přílady jsou třeba

body  {  background-color:lightblue;  }

. . .vytvoří pozadí vaší stránky světle modré, nebo. . .

p  {  font-size:20px;  color:red;  }

. . .vytvoří odstavec 20 bodového písma v červené barvě.

A tak bychom mohli pokračovat.

Shrnutí

p  {  color:pink;  font-weight:bold;  }

p = selektor (konkrétně prek odstavec)
color:pink = značí že selektor (odstavec) bude mít růžovou barvu
font-weight: bold = značí, že selektor (odstavec) bude tučným písmem

Externí, interní nebo vložené CSS?

Externí, interní nebo vložené CSS?

Možná by vás zajímalo, jak se tento kód CSS ve skutečnosti aplikuje do HTML. Stejně jako HTML je CSS napsán v jednoduchém prostém textu prostřednictvím textového editoru a existují tři hlavní způsoby, jak tento kód přidat do kódu HTML. Kód CSS může být externí, interní nebo vložený.

Externí šablony stylů se ukládají zvlášť jako soubory CSS a lze je použít k určení vzhledu celého webu prostřednictvím jednoho souboru (místo přidání jednotlivých instancí kódu CSS ke každému prvku HTML, který chcete upravit). Chcete-li použít externí šablonu stylů, musí vaše soubory .html obsahovat sekci záhlaví, která odkazuje na externí šablonu stylů a vypadá nějak takto:
<head> 
<link rel = ”stylesheet” type = ”text / css” href = mysitestyle.css ”> 
</head>

Tímto kódem odkazujete na váš externě vytvoření soubor CSS, který se tak s vaším souborem .html  propojí. Všechny pokyny CSS v tomto souboru se poté aplikují na vaše stránky v souborech .html.

Interní šablony stylů jsou pokyny CSS zapsané přímo do záhlaví konkrétní stránky .html. (To je zvláště užitečné, pokud máte na webu jednu stránku, která má jiný vzhled než ostatní.) Interní šablona stylů vypadá asi takto. . .
<head> 
<style> 
Body {background-color: thistle; } 
P {velikost písma: 20px; barva: mediumblue; } 
</style> 
</head>

. . . na tuto jedinou stránku HTML bude nyní použita barva pozadí modrá a odstavce s 20 bodovým, středně modrým písmem. 

A konečně, vložené styly jsou úryvky CSS zapsané přímo do kódu HTML a lze je použít pouze pro jeden prvek kódu. Třeba nadpis:
<h1 style = ”font-size: 40px; color: violet;”> Podívejte se na tento nadpis! </h1>

způsobí, že se tento konkrétní nadpis na této konkrétní stránce HTML zobrazí ve fialovém 40bodovém písmu.

Obecně řečeno, externí šablony stylů jsou nejúčinnější a nejběžnější metodou implementace CSS do webu (je snazší sledovat a implementovat styl webu z externího soubor, než se matlat ve změti kódu), zatímco interní šablony stylů a vložený styl lze v případě použít případ, kdy je třeba provést individuální změny jednoho či několika málo prvků.

Kam dál?

5 důvodů proč je copywriting důležitý & co je to?

7 největších grafických trendů používaných v roce 2020

5 důvodů, proč mít na svém webu https & Co to je?