Основни правила на синтаксиса на CSS

Чрез CSS правилата се задава оформлението на елементите в уеб страница, т.е. позицията им и външния им вид. Синтаксисът на CSS стилово правило е:


selector {property: value; 
          property: value; 
          …}

Селекторът определя HTML елемента, за който се отнася стилът. Двойката „свойство: стойност;“ задава как да се изобрази селекторът. При това свойството е характеристика на елемента (например цвят), а стойността се отнася за нея (напр. червен). <!DOCTYPE html> <html> <head> <style> p {color: red; background-color: yellow;} </style> </head> <body> ... </body> </html>
Всяка стилова таблица може да съдържа произволен брой стилови правила.
С цел по-кратък код CSS синтаксисът позволява групиране на повече селектори, като те са отделени със запетая, а свойствата се отнасят за всеки от селекторите. Възможно е и групиране на повече свойства чрез свойство-чадър (shorthand property), на което се задават наведнъж стойностите на тези свойства.

<!DOCTYPE html> <html> <head> <style> h1, h2, p {color: red;} h3 {font: bold 12pt „Arial“;} </style> </head> <body> ... </body> </html>

Има три основни начина за прилагане на стилове:

Локално – задава се стил за един конкретен HTML елемент в дадена уеб страница
Вътрешно – определя стилове за елементите на една уеб страница
Външно – пише се в друг файл и се отнася за повече уеб страници

Локалният стил се прилага само за един от елементите в уеб страницата – той е уникален за него и не важи за другите елементи на тази страница. Задаването става чрез атрибут style (на този елемент) като стойността му е списък със стилови правила.

<!DOCTYPE html> <html> <body> <h1 style="color: blue; margin-left: 30px; background-color: orange;">Учебник по CSS </h1> </body> </html>

Резултат:

Учебник по CSS

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