Как подключить css стили в html?

подключить css стили

Учимся как правильно подключить 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 сделать кнопку на сайте, то смотрите вот здесь!

Если вам понравился материал пожалуйста сделайте следующее…

  1. Поставьте «лайк».
  1. Сделайте ретвит.
  1. Поделитесь этим постом с друзьями в социальных сетях.
  1. И конечно же, оставьте свой комментарий ниже :)

Спасибо за внимание!

Всегда ваш Валерий Бородин

Вы будете первым, кто поставит оценку!
Понравилась статья? Поделиться с друзьями:
Комментарии: 4
  1. Кира

    Спасибо за советы. Сидим учимся вручную делать сайты… Ваш материал очень нам помог.

    1. Валерий Бородин (автор)

      Очень рад,что оказался вам полезен!

  2. МАКСИМ

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

    1. Валерий Бородин (автор)

      Спасибо Максим за вашу оценку моего поста!

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