12 nejlepších online kurzů a knih pro zvládnutí CSS

autor:
Tweet
Share
Share
Pin

Obsah

Webové stránky by bez kaskádových stylů (CSS) působily fádně a nezajímavě. Tento jazyk je totiž klíčový pro úpravu vzhledu textu, jeho velikosti, barvy a pozice na stránce.

Co přesně je CSS?

CSS, což je zkratka pro Cascading Style Sheets, je jazyk, který určuje, jakým způsobem se mají HTML elementy zobrazovat na monitoru či při tisku. Vytvořilo jej konsorcium World Wide Web Consortium (W3C) v roce 1996.

HTML elementy původně neměly značky pro formátování webové stránky. Vývojáři se tak museli soustředit pouze na samotné označení obsahu. Zavedení značek typu `` s HTML 3.2 přineslo vývojářům ale nové výzvy.

S nárůstem barevných pozadí, rozmanitých písem a různých stylů webových stránek se úprava kódu stávala nákladnou a obtížnou. Organizace W3C proto přišla s CSS, která se v průběhu let dále zdokonalovala, aby tyto problémy vyřešila.

Proč je CSS důležité?

#1. CSS je efektivní

Díky CSS nemusíme opakovaně vkládat značky pro úpravu písma, zarovnání, okrajů, barev, stylů pozadí či velikostí na každé jednotlivé webové stránce.

#2. Šetří čas

Vzhled celého webu můžeme snadno měnit úpravou externího souboru CSS.

#3. Kompatibilita s různými zařízeními

V současnosti uživatelé přistupují na web z různých zařízení s odlišnými velikostmi obrazovek, jako jsou počítače, tablety a mobilní telefony. CSS usnadňuje tvorbu webových stránek, které se dokáží přizpůsobit velikosti obrazovky.

#4. Jednoduchá údržba aplikací

Moderní webové aplikace se neustále vyvíjejí. CSS umožňuje jednoduše upravovat jednotlivé komponenty, či dokonce celý web, bez nutnosti zasahovat do samotné kódové báze.

Jak se CSS používá s HTML pro tvorbu webů?

HTML je standardní značkovací jazyk používaný pro vytváření obsahu webových stránek. CSS na druhou stranu definuje, jak se tento obsah (vytvořený pomocí HTML) vizuálně zobrazuje. Webová stránka vytvořená s využitím HTML a CSS typicky obsahuje HTML soubor s textem, odkazy na obrázky a HTML tagy.

Tento HTML soubor může být propojen se samostatným CSS souborem pomocí tagu ``, nebo může obsahovat interní či vložené CSS styly. HTML soubor může mít například nadpis označený jako `

` a odstavec označený jako `

`. Pomocí CSS můžeme prohlížeči říci, aby veškerý text v odstavci zobrazil tučně, nebo třeba aby nadpis měl velikost 50 pixelů a zelenou barvu.

Následující část se blíže podívá na to, jak HTML a CSS spolupracují.

Druhy CSS

#1. Externí CSS

Aby se CSS považovalo za externí, je potřeba mít HTML soubor a samostatný CSS soubor s příponou .css, například `style.css`. Tento CSS soubor se pak propojuje s HTML souborem pomocí tagu ``.

Příklad externího CSS souboru:

.main {
    text-align:center;
  }
  .GF {
    color:red;
    font-size:50px;
    font-weight:bold;
  }
  #TP {
    color:blueviolet
    font-style:bold;
    font-size:20px;
  }

CSS soubor lze propojit s následujícím HTML dokumentem:

  <html>
    <head>
      <link rel="stylesheet" href="https://wilku.top/12-best-online-courses-and-books-to-master-css/style.css"/>
    </head>
    <body>
      <div class = "main">
        <div class ="GF">Geek Flare!!!! </div>
        <div id ="TP">
          Your favourite tech portal
        </div>
      </div>
    </body>
  </html>

Tag `` propojuje externí styl s HTML dokumentem, zatímco atribut `href` udává cestu k danému externímu souboru.

Výsledná webová stránka se pak zobrazí takto:

Externí CSS je preferovanou metodou, protože usnadňuje vytváření opakovaně použitelných komponent a provádění změn v celém kódu.

#2. Interní CSS

Interní CSS se hodí v případě, že máme jeden HTML dokument, který chceme specificky upravit. Sada stylovacích pravidel se vkládá přímo do HTML dokumentu, konkrétně do sekce `

Zde je příklad interního CSS:

    <html>
      <head>
        <title>Internal CSS Example</title>
        <style>
          .main {
            text-align:center;
          }
          .GF {
            color:Red;
            font-size:70px;
          }
          .custom {
            font-style:bold;
            font-size:20px;
          }
        </style>
      </head>
      <body>
        <div class = "main">
          <div class ="GF">Internal CSS Demonstration</div>
          <div class ="custom">
            The Results
          </div>
        </div>
      </body>
    </html>

Vykreslená webová stránka se zobrazí takto:

Interní CSS není ve většině případů ideální, protože zbytečně navyšuje objem kódu v HTML dokumentu, což může mít vliv na rychlost načítání.

#3. Inline CSS

Inline CSS zahrnuje stylování přímo v těle HTML dokumentu. Můžeme tak stylovat například jednotlivé odstavce, nadpisy nebo i elementy `

`. 

    <html>
      <head>
        <title>Inline CSS</title>
      </head>
      <body>
        <p style = "color:red; font-size:50px;
        font-style:bold; text-align:center;">
          Inline CSS Demonstration
        </p>
      </body>
    </html>

Výsledný dokument se zobrazí takto:

Inline CSS není ideální pro rozsáhlé webové aplikace, protože by přidávání CSS vlastností ke každému HTML tagu zabralo příliš mnoho času.

Podívejte se na několik z nejlepších online kurzů a knih, které vám pomohou zvládnout CSS.

Vytváření responzivních webů pomocí HTML a CSS

Tento kurz zaměřený na tvorbu responzivních webů učí, jak vytvářet weby, které se přizpůsobují různým zařízením pomocí HTML5 a CSS3. Pro účast na kurzu, který se zabývá tématy jako box model, řešení konfliktů selektorů, schémata umísťování a dědičnost, nejsou potřeba žádné předchozí zkušenosti s vývojem webu.

Je to také ideální kurz, pokud chcete získat dovednosti v brainstormingu, plánování, skicování, kódování, testování a optimalizaci profesionálních webů.

Pokročilé CSS a Sass

Pokročilý kurz CSS a Sass vás seznámí s tím, jak CSS funguje v pozadí. Probírá témata jako kaskáda, specificita a dědičnost.

Kurz nabízí mnoho moderních technik CSS pro tvorbu výkonných responzivních webových stránek. Představuje také Sass a jeho využití v projektech při úpravě architektury CSS, globálních proměnných a správě mediálních dotazů.

Je vhodný i v případě, že se chcete naučit CSS animace, jelikož se věnuje @keyframes, animacím a přechodům.

Naučte se CSS

Kurz Naučte se CSS od Codecademy vás naučí používat CSS k vizuální transformaci HTML do poutavých webových stránek. Je rozdělen na 8 lekcí a obsahuje 6 projektů, které ověří vaše porozumění.

Hlavní věci, které se v kurzu naučíte, zahrnují přidávání stylů HTML elementům, propojení HTML a CSS souborů a vytváření jedinečných rozvržení webových stránek.

Vytvořte si svou první webovou stránku pomocí HTML a CSS

Kurz Tvorba první webové stránky vás naučí používat HTML5 a CSS3 pro vytváření responzivních webů. Tento bezplatný kurz se skládá ze 4 modulů a pro jeho dokončení potřebujete přibližně 10 hodin. Ke studiu nejsou nutné žádné předchozí programátorské zkušenosti.

Základy CSS

Základy CSS vytvořila W3Cx. Naučíte se zde například správné postupy ve webovém designu, základní CSS selektory a jak vybírat vlastnosti CSS. Kurz je rozdělen na 5 modulů a jeho dokončení zabere přibližně 5 týdnů při studiu 5-7 hodin týdně.

Úvod do CSS3

Tento kurz CSS3 představuje kaskádové styly. Vytvořila ho University of Michigan a učí psát pravidla CSS, vytvářet dobré programovací návyky a testovat kód. Kurz trvá přibližně 12 hodin a po jeho dokončení získáte sdílitelný certifikát.

Úvod do HTML a CSS

Tento úvodní kurz do HTML a CSS učí, jak vytvářet stylové a dobře strukturované webové stránky pomocí HTML a CSS. Studenti se učí vytvářet webové stránky pomocí stromové struktury a následně je stylovat pomocí CSS.

Tento bezplatný kurz je vhodný pro začátečníky a nabízí výuku vlastním tempem. Dokončení kurzu, který vyučují odborníci v oboru, trvá přibližně 3 týdny.

CSS tutoriál

CSS Tutorial je bezplatný kurz na W3schools. Je rozdělen do kapitol pro snadné pochopení. Každá kapitola obsahuje příklady a cvičení. Platforma má online editor, kde si můžete vyzkoušet různé koncepty pomocí tlačítka „Try it Yourself“.

CSS: Průvodce

Kniha CSS: The Definitive Guide je užitečná, pokud se chcete naučit základy CSS, od selektorů a specificity až po kaskády. Kniha se také detailně věnuje flexboxu, polohování a trikům s plovoucími prvky.

Je to také ideální zdroj, pokud se chcete naučit používat CSS pro vytváření 2D a 3D transformací, přechodů a animací. Průvodce je k dispozici v elektronické i tištěné verzi.

Responzivní web design s HTML5 a CSS

Tato kniha o responzivním web designu s HTML5 a CSS vás naučí vytvářet responzivní weby, které bez problémů poběží na počítačích, tabletech i mobilních telefonech. Je psána srozumitelným jazykem a je k dispozici v tištěné a elektronické verzi.

HTML a CSS: Navrhujte a stavte webové stránky

Tato kniha o HTML a CSS je vhodná pro všechny, ať už jste nadšenci, studenti nebo profesionálové.

Autor prezentuje obsah knihy pomocí infografik a fotografií, aby usnadnil pochopení různých konceptů. Kniha je strukturována unikátním způsobem, který usnadňuje orientaci v jednotlivých kapitolách.

Moderní CSS

Kniha Modern CSS: Master the Key Concepts of CSS for Modern Web Development učí CSS prostřednictvím příkladů kódu, diagramů a snímků obrazovky.

V úvodních kapitolách se věnuje barvám, selektorům, box modelu, kombinátorům a specificitě. Následně představuje styly textu, polohování, přechody, ohraničení, Z-index a překrývání. Naučíte se zde také pokročilá témata, jako jsou přechody, animace, transformace, flexbox a CSS grid.

Závěrem

Role CSS v moderních webových stránkách je zcela zásadní. CSS nejenže činí webové stránky vizuálně atraktivnějšími, ale také usnadňuje jejich procházení.

Naučit se CSS může být jednoduché, pokud využijete výše zmíněné zdroje. Některé z kurzů jsou bezplatné, jiné placené.

Dále se můžete podívat na cheat sheety pro vývojáře a designéry.