Как связать css с html

1 Урок. Основы css, как связать html с css

Стили css не могу работать сами по себе, без страницы html. Первое, что мы сделаем, это создаем файл с расширением .css и пусть он для удобства будет находиться в одной папке с каким либо файлом .html.

Например, создали файлы index.html и файл style.css. Style.css как раз и будет содержать стили.

Как связать css с html?

В файле index.html, между тегами <head> </head> мы напишем следующее:

То есть, в html странице мы пишем примерно следующее:

То есть мы привязали нашу страницу index.html к файлу стилей, который мы назвали style.css. Причем файл стилей должен лежать в одной папке с файлом html, к которому мы прописывали эту строчку.

Основы Css

Посмотрим, как вообще работают стили. Попробуем разобраться на примере параграфа — <P>. По идее, текст в html разделен на параграфы. Так вот, если в css файле мы напишем:

То весь текст, который в html страницах заключен в параграфы, станет красным цветом.

Запомните структуру: пишем сперва элемент, к которому хотим задать стили, в данном случае p, затем в кавычках <> пишем уже стили. Каждый новый стиль через точку с запятой.

Преимущества Css

Css удобно тем, что, при желании что-то изменить на своем сайте, Вам не надо будет изменять каждую страницу, а просто можно изменить некоторые атрибуты в css файле. И во всех страницах (при условии, что у них прописана строчка связи с css) произойдут изменения.

Возьмем наш пример с параграфом. Мы можем одним движением в файле css изменить текст во всех параграфах, которые есть на сайте.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *