Kaskádové styly

Styly určují formátování stránky, což může mít zcela zásadní dopad na její vzhled. Jazyk CSS (Cascade Stylesheet) sestává z pravidel, která se nějak vztahují k HTML prvkům. Selektor pravidla určuje, na které prvky se má použít samotné tělo pravidla. Tělo je seznam vlastností, které se mají nastavit na nějakou hodnotu.

Například:

ul {
	list-style-type: circle;
}
Tohle pravidlo stanoví, že všechny seznamy budou mít před každou odrážkou namalovaný kroužek. Mohli bychom místo toho napsat třeba list-style-type: square, což by vypadalo:

Jako obvykle, na řádkování v CSS nezáleží. Důležité jsou středníky a složené závorky. Všimněte si, že se používá zápis vlastnost: hodnota místo javascriptového proměnná = hodnota.

Základní formátování

Základ
  1. Změňte barvu (color) a velikost textu (font-size) obou odstavců na velký zelený.
  2. Nastavte styl odrážek na obrázek rozsvícené žárovky (list-style-image: url('lightbulb_on.png');)

Řádkování
  1. Nastavte vysoké odřádkování mezi odstavci (padding-top).
  2. Zrušte odřádkování mezi nadpisem a prvním odstavcem (h1 + p).
  3. Nastavte odsazení prvního řádku, jak se v češtině sluší (text-indent)
Třídy
  1. Nastavte důležitým odstavcům tučné písmo (font-weight: bold)
  2. Nastavte tučnému textu v důležitých odstavcích podtržení (text-decoration: underline).
Vlastnosti a pseudo-selektory
  1. Nastavte všem obrázkům se žárovkou černý rámeček (src*=lightbulb, border: solid 1px black)
  2. Na konec každého odstavce napište "Howgh." (:first-of-type ::after, content)