Как изменить размер шрифта в html?

Я пытаюсь создать веб-сайт, и я хочу знать, как изменить размер текста в абзаце. Я хочу, чтобы пункт 1 был больше, чем пункт 2. Не имеет значения, насколько больше, если оно больше. Как это сделать?

Мой код ниже:

<html>
<head>
<style>
  p {
    color: red;
  }
</style>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</body>
</html>

Ответ 1

Дайте им класс и добавьте свой стиль в класс.

<style>
  p {
    color: red;
  }
  .paragraph1 {
    font-size: 18px;
  }
  .paragraph2 {
    font-size: 13px;
  }
</style>

<p class="paragraph1">Paragraph 1</p>
<p class="paragraph2">Paragraph 2</p>

Отметьте ПРИМЕР

Ответ 2

Или добавьте стили inline:

<p style="font-size:18px">Paragraph 1</p>
<p style="font-size:16px">Paragraph 2</p>

Ответ 3

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

p:first-child
{
   font-size:   115%; // Will set the font size to be 115% of the original font-size for the p element.
}

Однако это изменит размер шрифта для каждого элемента p, который является первым ребенком любого другого элемента. Если вам интересно установить размер первого элемента p элемента body, используйте следующее:

body > p:first-child
{
   font-size:   115%;
}

Приведенный выше код будет работать только с элементом p, являющимся дочерним элементом элемента body.

Ответ 4

Если вы хотите сделать это без добавления классов...

p:first-child {
    font-size: 16px;
}

p:last-child {
    font-size: 12px;
}

или

p:nth-child(1) {
    font-size: 16px;
}

p:nth-child(2) {
    font-size: 12px;
}

Ответ 5

Вы не можете сделать это в HTML. Вы можете в CSS. Создайте новый файл CSS и напишите:

p {
 font-size: (some number);
}

Если это не работает, убедитесь, что у вас нет никаких "пред" тегов, которые делают ваш код немного меньше.