Как стилизовать часть страницы не используя классы в верстке?

Question

Нужно часть страницы стилизовать без классов, как это делать и зачем вообще такое иногда требуется? На что тогда привязывать css стили?

Answer 1

Каждому элементу будь-то div или p (или любой другой). Можно задать свойство style.

Пример.

<div style = "display: flex; align-items: center;">
   <p style = "padding: 10px;">TEST</p>
</div>

Answer 2

Я обычно делаю по тегам. Часто нужно при верстке страниц для CMS, когда конечный пользователь, не владеющий HTML, вводит текст и картинки.

Например:

h2 {
    font: 20px "Gilroy-Extrabold",sans-serif;
    color: #455582;
    margin-bottom: 28px;
    text-decoration: none;
}

h3 {
    font: 15px "Gilroy-Extrabold",sans-serif;
    font-weight: 700;
    color: #455582;
}

p {
   font: 15px "Gilroy-Extrabold",sans-serif;
}

h4 {
    font: 14px/1.5 "Robotobold",sans-serif;
    color: #455582;
    margin-top: 10px;
    margin-bottom: 18px;
}

ul {
    padding-left: 14px;
    margin-bottom: 50px;
}

<h2>История АО&nbsp;«Ромашка»</h2>
          <h3>Добро пожаловать !</h3>
          <p>Мы&nbsp;— крупнейший поставщик. Мы супер!</p>
          <p>Мы&nbsp;— динамично развивающееся компания, ключевым направлением деятельности которой является надежное и&nbsp;качественное обеспечение.</p>
          <h4>Для достижения этой цели АО&nbsp;«Ромашка»:</h4>
          <ul>
            <li>
              <p>Внедряет современные технологии;</p>
            </li>
            <li>
              <p>Сокращает потери и&nbsp;снижает затраты;</p>
            </li>
          </ul>
          <p>Мы все родные, друзья, знакомые или соседи, на&nbsp;жизни которых отражается качество нашей работы.</p>
          <p>Чтобы выполнять свою работу на&nbsp;достойном уроне, мы&nbsp;должны понимать друг друга, уважать друг друга, помогать друг другу. </p>

Answer 3

Можно подключить не только через класс, но и через идентификатор

#IdStyleExample {
  background-color: #c8f2bd;
}

<div id="IdStyleExample">уникальный, в отличии от класса</div>

Можно почитать в дополнение

Еще задают через body, как общий параметр на всю html страницу

body {
  background-color: powderblue;
  /* на всю страницу */
}

h1 {
  color: blue;
  /* на все заголовки 1 */
}

p {
  color: red;
  /* на все параграфы */
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="styles.css">
</head>

<body>

  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>

</body>

</html>

например бывает проект большой, и искать все заголовки и вписывать им класс, можно пропустить, а так задать через сам тег, общий стиль

БЛОГ НА HUSL

Как стилизовать часть страницы не используя классы в верстке?

Ответы (3 шт):