Учебник CSS для начинающих

CSS (Cascading Styles Sheet) или Каскадные таблицы стилей – это технология, позволяющая определять стили для документов HTML. В связи с тем, что HTML – это содержимое или контент, каскадные стили – это его визуальное представление.

Демо: Одна страница - несколько стилей!

Ниже приведена веб-страница с несколькими стилями. Чтобы увидеть разные стили, нажмите на соответствующую ссылку:

Для чего используется CSS?

CSS используется для определения визуальных стилей веб-страниц. Сюда входят дизайн элементов, макет или раскладка, а также варианты внешнего вида страницы при отображении на разных устройствах и при разных размерах экрана.

Пример CSS


body {
  position: relative;
  font-family: arial, serif;
}

p {
  padding-top: 10px;
}

h1 {
   font-weight: bolder;
}

CSS решил одну Большую Проблему

HTML изначально НИКОГДА не предназначался для визуального оформления веб-страницы!

HTML создавался для описания содержимого веб-страницы:

<h1>Большой заголовок</h1>

<p>Параграф или абзац.</p>

Когда в спецификацию HTML 3.2 были введены такие теги как <font> для определения шрифтов и атрибуты вроде color для определения цвета, веб-разработчики погрузились в сплошной кошмар. Разрабатывать большие проекты, где данные о шрифтах и цветах добавлялись на каждую страницу, стало долго и дорого.

Для решения данной проблемы Консорциум W3C и создал язык CSS.

CSS убрал определение стилей из кода веб-страницы!

Если вы не знакомы с языком HTML, то мы советуем сначала изучить наш Учебник HTML для начинающих.

CSS значительно экономит время!

Обычно стили хранятся во внешних файлах с расширением .css.

Внешние каскадные таблицы стилей позволяют изменить оформление целого сайта внося изменения только в один файл!

Как и учебник "HTML для начинающих", этот учебник "CSS для начинающих" не требует от читателя каких-либо знаний в области CSS. Его цель научить читателя основам, достаточным для полноценного использования CSS. В данном учебнике вы узнаете что такое CSS, для чего и как эта технология используется, а также множество других тонкостей, использование которых на практике позволит делать красивые и практичные веб-сайты.