CSS е съкращение от Cascading Style Sheets и представлява отделен език, съдържащ множество "инструменти", с които може да се влияе на външния вид на HTML страниците. От определена гледна точка CSS е нещо като "надстройка" на HTML.

CSS предлага големи удобства и улеснения при изграждането на даден HTML документ. В много случаи е по-добре даден елемент от HTML страница да бъде създаден с помощта на CSS, отколкото чрез ползване на добре познатите HTML тагове. Най-голямото улеснение, което предлага CSS е свързано с контрола на голям набор HTML документи, като контролирането на външния вид на страниците става чрез промяна на един единствен файл - CSS файла, без да е нужно да се променя HTML кода във всяка една от HTML страниците.

Ето един конкретен пример, чрез който ще изясним за какво става дума.
Да предположим, че имате сайт, съставен от 50 HTML страници. Ако ползвате тага за да задавате вида на шрифта, големината и цвета му, вие ще трябва във всяка една html страница да пишете кодове от сорта на

някакъв текст

Също така ще се наложи за всяка една страница да дефинирате например цвета на фона чрез атрибута bgcolor на тага body:



и т.н.

Ако някога решите да промените някои от тези параметри ще ви се наложи да отворите сорсовете на всичките 50 страници и да въведете промените във всеки един от тях. Цялото това усилие може да си го спестите като направите един CSS файл и разположите в него всички нужни параметри. След това трябва само да сложите по един линк към CSS файла във всяка от примерните 50 HTML страници, за да бъдат валидни зададените параметри за всяка една от тях.

Ще направим един най-прост CSS файл. Отворете някакъв текстов редактор, например Notepad и напишете в него следния код

body
{
background-color: #000000;
font-family: arial, sans-serif, helvetica;
font-size: 12px;
color: #cccccc
}

След това съхранете файла като му зададете разширение css - например file.css

Сега остава във всяка HTML страница в секцията head да сложите следния код:


ПРИМЕР:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">













Някакъв текст




Сега страницата ще се покаже с параметрите, които сте задали, а именно - черен фон на страницата и светлосив текст. Всички страници, в които сложите кода ще имат същия външен вид. Ако желаете да промените цвета на фона или някои от параметрите на текста ще трябва да направите промените единствено в CSS файла и те автоматично ще се отразят във всички HTML документи, в които има връзка към файла file.css

За да работи този ефект, както е направен линка към file.css в примера, е нужно CSS файла да се намира в същата директория (папка), в която се намират и HTML страниците. В противен случай трябва да се укаже пътя до CSS файла, например ако HTML страницата е в някаква вътрешна папка, а file.css е в основната директория линка ще бъде



и т.н.

Както се вижда, структурата на CSS файла включва название на елемента, за който ще се задават параметрите - в случая това е body, и след това самите параметри, които се ограждат в големи скоби - { }. Когато в големите скоби се поставят няколко параметъра (както е в случая), те се отделят един от друг чрез точка и запетая. В примера скобите и зададените параметри са поставени на отделни редове, но това е само за прегледност, иначе кода на CSS файла може да изглежда и така:


body {background-color:#000000;font-family:arial, sans-serif, helvetica;font-size:12px;color:#cccccc}


Когато се задава числова стойност на някакъв атрибут, например font-size: 16px, можете да оставите стъпка разстояние между двуеточието и цифрите (: 16), но не отделяйте цифрите от техните параметри, т.е. правилно е да се напише "16px", а не "16 px". Във втория случай кода няма да бъде разчетен от всички браузери, само InternetExplorer6 ще покаже ефекта.

Когато стойността на някакъв атрибут е съставена от две и повече думи, например sans serif, тези думи трябва да са свързани с тире (sans-serif) или трябва да се поставят в кавички ("sans serif").

Съществуват няколко вида CSS записи. Записа който направихме в горния пример се нарича външен стил (External Style Sheet) и се използва, както беше описано, когато трябва да се контролират множество HTML документи, като нужните параметри се задават във външен файл (в примера - file.css).

Съществува и вътрешен за HTML документа стил (Internal Style Sheet), който се използва за да се зададе вида на един отделен HTML документ, като нужните параметри се задават със специални тагове и атрибути в секцията head на HTML страницата.

Inline Styles - вътрешни за HTML таговете стилове - се използват, като специални CSS атрибути се разполагат директно в HTML таговете и имат ефект за определено място от страницата. Конкретната употреба на тези видове ще бъде обяснена по-нататък в материалите за CSS.

Понякога се налага да се използват всички видове CSS и в такъв случай първо се изпълнява ефекта от Inline Style (вътрешните за HTML таговете стилове), след тях на 2-ро място по приоритет са
Internal Style Sheet (стиловете от секцията head на HTML документа) и последни по приоритет са External Style Sheet, т.е. стиловете, декларирани във външен CSS файл-a.