Základy CSS

Úloha

1. Nastavte farbu pozadia na modrú v celom dokumente
2. Nastavte farbu písma na žltú v celom dokumente
3. Nastavte šírku obrázkov na 100%
4. Nastavte maximálnu šírku textu na stránke na 800 pixelov
5. Obsah stránky vystrediť ak je okno viac ako 800 pixelov
6. Nastavte pre html tag <p> nastavte dvojité riadkovanie, nejaký zaujímavý font a písmo zväčšite na 150%
7. Pomocou AI a CSS vytvorte nejakú animáciu nadpisu stránky
8. Pomocou AI a CSS aplikujte na obrázok nejaký filter

Teória

CSS (Cascading Style Sheets – po slovensky Kaskádové štýly) je jazyk, ktorý sa používa na určovanie vzhľadu a formátovania webových stránok.

Na čo slúži CSS?

Pomocou CSS môžeš ovplyvniť napríklad:

• farbu textu a pozadia,
• typ a veľkosť písma,
• rozloženie prvkov na stránke,
• animácie a efekty,
• responsívny dizajn pre mobily a tablety.

Príklad použitia CSS s HTML

HTML kód:

<p>Ahoj vole!</p>

CSS kód:

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

Výsledok: Text bude modrý a väčší.

Ahoj vole

Spôsoby použitia CSS

1. Interné CSS – priamo v HTML dokumente:

   <style>
   body {
     background-color: lightgray;
   }
   </style>

2. Externé CSS – v samostatnom súbore style.css:

   h1 {
     color: red;
   }

   A v HTML:

   <link rel="stylesheet" href="style.css">

3. Inline CSS – priamo v HTML tagu:

   <p style="color: green;">Toto je zelený text.</p>

🔹 Čo znamená „kaskádové“ v CSS?

Slovo kaskádové znamená, že ak je na jeden prvok použitých viacero štýlov, CSS rozhodne, ktorý má prednosť podľa tzv. kaskádového poradia.

🔹 Selektory v CSS

Selektory slúžia na výber HTML prvkov, ktoré chceme štýlovať:

🔹 Box model (model škatule)

Každý HTML prvok má 4 vrstvy – takzvaný box model:

• margin – vonkajší okraj
• border – rámček
• padding – vnútorný okraj
• content – samotný obsah (napr. text)

+-----------------------------+
|         margin             |
|  +----------------------+  |
|  |       border         |  |
|  |  +----------------+  |  |
|  |  |    padding     |  |  |
|  |  |  +----------+  |  |  |
|  |  |  | content  |  |  |  |
|  |  |  +----------+  |  |  |
|  |  +----------------+  |  |
|  +----------------------+  |
+-----------------------------+
    

🔹 Responzívny dizajn

Responzívny dizajn umožňuje prispôsobiť web stránku rôznym zariadeniam (telefón, tablet, PC). Používajú sa najmä:

• Media queries
• Flexbox
• Grid layout

Príklad media query:

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

🔹 Prečo sa CSS oplatí učiť?

• Oddelíš vzhľad od obsahu (HTML vs CSS)
• Získaš kontrolu nad dizajnom webu
• CSS je základ pre moderné webové technológie

Postup

1. Použite spôsob externý CSS súbor s názvom main.css