Учимся как правильно подключить css стили в html
Здравствуйте, уважаемые друзья и гости блога! Сегодня расскажу, как нужно правильно подключить css стили в html документе или по другому, веб-странице.
Существует масса способов, чтобы подключить css стили к сайту, но мы с вами сегодня рассмотрим три из них. Это самые верные и довольно простые методы изо всех существующих.
Давайте их и рассмотрим с вами сейчас подробно …
Подключить css стили на сайте! – три верных способа!
Для начала нам нужно создать любой html документ, чтобы на примере к нему подключить css стили. Давайте сделаем это. Вот пример простенькой html страницы:
<html>
<head>
<title>Как подключить CSS к HTML</title>
</head>
<body>
<h1>Первый заголовок </h1>
Здесь просто текст
<h2>Второй заголовок </h2>
<p>Тут ваш текст</p>
<p>Продолжение вашего текста</p>
</body>
</html> Теперь давайте подключим стили первым способом, который наиболее подходит для локального оформления отдельного участка на веб-странице:
<html>
<head>
<title>Как подключить CSS к HTML</title>
</head>
<body>
<h1>Первый заголовок </h1>
Здесь просто текст
<h2>Второй заголовок </h2>
<p>Тут ваш текст</p>
<p style=”color:yellow”
>Продолжение вашего текста</p> </body> </html>
Здесь мы с вами выделили текст желтым цветом. Но если вам нужно подключить css стили ко всей веб-странице, то этот способ не подойдет. Вернее он подойдет, но будет не удобно прописывать на каждой строке эти стили. Давайте рассмотрим более удобный вариант для подключения стилей css ко всей веб-странице.
В этом нам поможет второй способ, который позволит подключить css стили ко всей странице:
<html>
<head>
<title>Как подключить CSS к HTML</title>
<style type=”text/css”> p {color:yellow} </style>
</head>
<body>
<h1>Первый заголовок </h1>
Здесь просто текст
<h2>Второй заголовок </h2>
<p>Тут ваш текст</p>
<p>Продолжение вашего текста</p>
</body>
</html> Теперь весь ваш текст, который будет заключаться в теги <p></p> приобретет желтый цвет, то есть это ваши css стили, которые Вы подключили к вашей веб-странице. Удобно, не правда ли?!
Но если у Вас не одна веб-страница, а их несколько и ко всем нужно подключить css стили одинаково?
Тогда нам придет на помощь третий способ. Он нам позволит подключить css стили для всех веб-страниц. Как это сделать? Все довольно просто. На веб-странице прописываем следующую строку: <link rel=”stylesheet” href=”styles.css” type=”text/css” media=”screen” />.
<html>
<head>
<title>Как подключить CSS к HTML</title>
<link rel=”stylesheet” href=”styles.css” type=”text/css” media=”screen” />
</head>
<body>
<h1>Первый заголовок </h1>
Здесь просто текст
<h2>Второй заголовок </h2>
<p>Тут ваш текст</p>
<p>Продолжение вашего текста</p>
</body>
</html> Это мы с вами подключили все стили к нашим веб-страницам, которые у нас есть и еще нам нужно создать отдельный файл со стилями и называться он будет styles.css. И там пропишем наши стили для всех страниц нашего сайта.
Теперь все, наши стили будут применимы ко всем страницам, которые у нас есть!
А если Вы хотите узнать, как в html сделать кнопку на сайте, то смотрите вот здесь!
Если вам понравился материал пожалуйста сделайте следующее…
- Поставьте «лайк».
- Сделайте ретвит.
- Поделитесь этим постом с друзьями в социальных сетях.
- И конечно же, оставьте свой комментарий ниже
Спасибо за внимание!
Всегда ваш Валерий Бородин
Спасибо за советы. Сидим учимся вручную делать сайты… Ваш материал очень нам помог.
Очень рад,что оказался вам полезен!
Я хоть и в CSS не сильно шарю, так, чисто как пользователь, но они очень нужны и малое знание просто полезно, где-то подшаманить самому свой блог или сайт. Спасибо вам – оценка – молоток.
Спасибо Максим за вашу оценку моего поста!