CSS-i keele põhitöö

Oleme juba läbi võtnud HTML-i keele põhisildid ja nüüd on aeg teha ilus. Sooviksime omada võimalust muuta teksti värvi, selle suurust, tausta ja palju muud. See tehakse CSS-i keele abil.

Tavaliselt hoitakse CSS-i käske (stiilid) eraldi failis, mis ühendatakse spetsiaalse sildiga kõigi meie veebisaidi HTML-lehtedega.

Selle lähenemise eelis on see, et CSS fail on üks, aga HTML faile võib olla suvaline arv, isegi tuhat. Kui teeme muudatuse ühes kohas CSS-failis, näiteks värvime kõik lõigud punaseks, siis need muudatused rakenduvad kõigil tuhandel HTML- lehtedel, millele meie CSS-fail on ühendatud. Väga mugav ja kiire.

Stiilide faili laiendus peab olema .css. Et ühendada selline fail HTML-lehega, tuleb siltides head kirjutada selline konstruktsioon:

html<link rel="stylesheet" href="fileName.css">

Järgmises näites ühendatakse meie HTML-failiga CSS-fail styles.css:

html<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>This is the title</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <p>
      This is a paragraph with text.
    </p>
  </body>
</html>