HTML/Úvod do CSS

Zatím jsme všude psali ke každému tagu jeho formátování zvlášť. S pomocí CSS ale můžeme nastavit všem tagům s nějakou společnou vlastností stejný formát (např. jméno tagu, atribut 'class' nebo atribut 'id'). Například:

h1{
    color:red;
}

Toto nastaví všem tagům 'h1' červenou barvu.

Zápis do HTML

Jsou dva způsoby, jak přidělat CSS k HTML. První je pomocí tagu <style>.

<style type="text/css">
/* zde je CSS */
</style>

Tímto zápisem se CSS píše přímo do HTML dokumentu. Druhý způsob přidá CSS z jiného souboru.

<link rel="stylesheet" href="styl.css" type="text/css" />

V souboru styl.css (ve sejném adresáři jako html soubor) je CSS styl.

Class a Id

U každého tagu můžeme definovat dva atributy vhodné pro CSS. Jsou to 'class' a 'id'. Používáme je k označování tagů.

Class

Atribut 'class' - česky třída - můžeme dát mnoha různým tagům. Například si uděláme modrý rámeček.

<!-- HTML -->
<div class="ramecek">Tento text je v rámečku. Těchto rámečků může být na stránce více</div>

/* CSS */
/* class atribut označíme .název_třídy */
.ramecek{
    /* pozadí bude takové světle-modré */
    background-color: rgb(201, 201, 255);
    /* a šířka bude 200 pixelů */
    width:200px;
}

Id

Atribut 'id' se stejnou hodnotou můžeme dát jen jednomu elementu. Takže můžeme dát například id hlavičce.

<!-- HTML -->
<div id="hlavicka">
    <img src="logo" /> 
    <h1>Nadpis</h1>
</div>

/* CSS */
/* id atribut označíme #název_atributu */
#hlavicka{
    /* pozadí bude zase takové světle-modré */
    background-color: rgb(201, 201, 255);
}