Všechny návody

Externí, interní a inline CSS styly

CSS je možné do HTML dokumentu vložit třemi způsoby, ukážeme si jaké jsou výhody a nevýhody jednotlivých možností a kdy je použít.

Inline styly

Tento zápis využívá HTML atributu style="" a styly takto definované se aplikují pouze na jeden konrétní HTML prvek. Inline styly mají nejvyšší specificitu, což může být někdy výhodné. Obecně bychom však měli tento způsob používat jen, když to je nutné, jelikož jeho použití bývá často nevhodné (vysoká specificita, kombinování stylů a HTML kódu atd.).

<p style="color: red; font-style: italic;">Lorem ipsum dolor sit amet.</p>

Interní styly

Interní styly se zapisují do tagu <style></style>, který je zanořený v <head></head>. Tyto styly jsou aplikovány pouze na stránce, kde se nachází jejich zápis. Výhoda tohoto zápisu spočívá v jednoduchosti úpravy stylu, který má být jiný jen na konktétních stránkách. Používání tohoto způsobu ve větší míře se nedoporučuje, protože styly jsou jen lokální a kód by byl nepřehledný.

<head>
    <style>
        .main-navigation {
            background-color: orange;
        }

        .main-navigation__item {
            color: white;
        }
    </style>
</head>

Externí styly

Nejčastěji se styluje pomocí externích stylů. Tyto styly se na stránku vkládají pomocí tagu <link> mezi <head></head>. Veškeré formátování je tak oddělono od HTML v samostatném souboru, změny jsou tedy globální.

<head>
    <link rel="stylesheet" type="text/css" href="styly/hlavni.css">
</head>