Стилизиране  на уеб страници чрез CSS

CSS (Cascading Style Sheets) се използва за стилизиране на HTML елементи.

Виж!!!

Играйте си с текста
Цветове,  Кутийки
и още...

Как да използваме стилове в HTML Как да добавим стилове в <head> секцията.
Неподчертан линк Как да направим неподчертан линк с помощта на стилове.
Линк към външен style sheet Как да използваме <link> тага, за да добавим външен style sheet.

Стилизиране с помощта на CSS

CSS е представен заедно с HTML4, за да предостави по-добра възможност за стилизиране на документи. CSS може да бъде добавен в документа по следните 3 начина:

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

Inline Стилизиране

Инлайн стилизирането се използва когато искаме да добавим стил на един конкретен елемент. За да направим това, трябва да използваме style атрибута в отварящия таг на елемента. В този атрибут може да сложим всякакво пропърти от CSS. Долния пример показва как да сменим цвета на текста и левия марджин на параграф (повече за марджин в секцията за CSS):


HTML Пример за Стилизиране - Background Color

Пропъртито background-color дефинира цвета на фона на даден елемент:

Опитайте сами »

HTML Пример за Стилизиране - Font(шрифт), Color(цвят) и Size(размер)

Пропъртитата font-family, color, и font-size дефинират шрифта, цвета и размера на шрифта на текста в даден елемент:

Опитайте сами »

HTML Пример за Стилизиране - Text Alignment(подреждане на текст)

text-align определя хоризонталната подредба на текста (ляво, дясно, по средата):

Опитайте сами »

Стилизиране чрез style таг в head

Стиловете в <head> секцията, се дефинират за конкретната страница чрез <style> таг:


Стилизиране чрез външен Style Sheet

Външното стилизиране е най-добрия и удобен начин, да стилизираме много страници в един файл. Така можем да контролираме вида на целият ни сайт от едно място. Всяка страница трябва да е свързана към .css файла чрез <link> тага:

HTML Тагове за стилизиране

Таг Обяснение
<style> Дефинира информация за стиловете в определен документ
<link> Добавя външен CSS файл към документа