Úvod do CSS

Obsah

CSS je jazyk, který používáme ke stylování webové stránky.

Co je CSS?

CSS je zkratka pro Cascading Style Sheets
CSS popisuje, jak mají být prvky HTML zobrazeny na obrazovce, papíru nebo v jiných médiích
CSS ušetří spoustu práce. Může ovládat rozložení více webových stránek najednou
Externí šablony stylů jsou uloženy v souborech CSS

CSS Demo - Jedna HTML stránka - Více stylů!

Zde ukážeme jednu HTML stránku zobrazenou se čtyřmi různými styly. Klikněte na "Stylesheet 1", "Stylesheet 2", "Stylesheet 3", "Stylesheet 4" odkazy níže pro zobrazení různých stylů:

Proč používat CSS?

CSS se používá k definování stylů pro vaše webové stránky, včetně designu, rozvržení a variace zobrazení pro různá zařízení a velikosti obrazovky.

Příklad CSS

body
{
  background-color: lightblue;
}

h1
{
  color: white;
  text-align: center;
}

p
{
   
font-family: verdana;
  font-size: 20px;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}
</style>
</head>
<body>

<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>

</body>
</html>

CSS vyřešilo velký problém

HTML NIKDY nemělo obsahovat značky pro formátování webové stránky!

HTML bylo vytvořený k popisu obsahu webové stránky, například:

<h1>Toto je nadpis</h1>

<p>Toto je odstavec.</p>

Když byly do HTML 3.2 přidány značky jako a atributy barev specifikace, to odstartovalo noční můru pro webové vývojáře. Rozvoj velkých webové stránky, kde byly ke každému přidány informace o písmech a barvách stránku, se stal dlouhý a nákladný proces.

K vyřešení tohoto problému vytvořilo World Wide Web Consortium (W3C) CSS.

CSS odstranilo formátování stylu ze stránky HTML!

Pokud nevíte, co je HTML, doporučujeme vám přečíst si náš HTML tutoriál.

CSS ušetří spoustu práce!

Definice stylů jsou obvykle uloženy v externích souborech .css.

Pomocí externího souboru šablony stylů můžete změnit vzhled celého webu změnou pouze jednoho souboru!