The to tags also supports the Event Attributes in HTML.

Set the background color and text color of headings (with CSS):

Hello World

Hello World

Example

Set the alignment of headings (with CSS):

This is heading 1

This is heading 2

This is heading 3

This is heading 4

Related Pages

Default CSS Settings

Most browsers will display the element with the following default values:

Example

h1 <
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
>

Most browsers will display the element with the following default values:

Example

h2 <
display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
>

Most browsers will display the element with the following default values:

Example

h3 <
display: block;
font-size: 1.17em;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
>

Most browsers will display the element with the following default values:

Example

h4 <
display: block;
font-size: 1em;
margin-top: 1.33em;
margin-bottom: 1.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
>

Most browsers will display the element with the following default values:

Example

h5 <
display: block;
font-size: .83em;
margin-top: 1.67em;
margin-bottom: 1.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
>

Most browsers will display the element with the following default values:

Example

h6 <
display: block;
font-size: .67em;
margin-top: 2.33em;
margin-bottom: 2.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
>

Источник

CSS Font Size

Being able to manage the text size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs.

Always use the proper HTML tags, like — for headings and

for paragraphs.

The font-size value can be an absolute, or relative size.

• Sets the text to a specified size
• Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
• Absolute size is useful when the physical size of the output is known

• Sets the size relative to surrounding elements
• Allows a user to change the text size in browsers

Note: If you do not specify a font size, the default size for normal text, like paragraphs, is 16px (16px=1em).

Set Font Size With Pixels

Setting the text size with pixels gives you full control over the text size:

Example

Tip: If you use pixels, you can still use the zoom tool to resize the entire page.

Set Font Size With Em

To allow users to resize the text (in the browser menu), many developers use em instead of pixels.

1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.

The size can be calculated from pixels to em using this formula: pixels/16=em

Example

h2 font-size: 1.875em; /* 30px/16=1.875em */
>

p font-size: 0.875em; /* 14px/16=0.875em */
>

In the example above, the text size in em is the same as the previous example in pixels. However, with the em size, it is possible to adjust the text size in all browsers.

Unfortunately, there is still a problem with older versions of Internet Explorer. The text becomes larger than it should when made larger, and smaller than it should when made smaller.

Use a Combination of Percent and Em

The solution that works in all browsers, is to set a default font-size in percent for the element:

Example

Our code now works great! It shows the same text size in all browsers, and allows all browsers to zoom or resize the text!

Responsive Font Size

The text size can be set with a vw unit, which means the «viewport width».

That way the text size will follow the size of the browser window:

Hello World

Resize the browser window to see how the font size scales.

Example

Hello World

Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.

Источник

font — size

Значение в em высчитывается относительно текущего шрифта. Поэтому дочерняя строка в 1.5 раза больше, чем родительская.

   Размер этого текста в 1.5 раза больше, чем стандартный размер вашего браузера,  а этот текст в 1.5 раза больше, чем в родительском контейнере.   div class="parent"> Размер этого текста в 1.5 раза больше, чем стандартный размер вашего браузера, span class="child"> а этот текст в 1.5 раза больше, чем в родительском контейнере. span> div>    Скопировать Скопировано Не удалось скопировать   

 .parent  font-size: 1.5em;> .child  font-size: 1.5em;> .parent  font-size: 1.5em; > .child  font-size: 1.5em; >    Скопировать Скопировано Не удалось скопировать   

А вот как сочетается значение em , когда родительский элемент задан в процентах.

Очень часто можно встретить ситуацию, когда размер шрифта у html равен 62 . 5 % . Это магическое число появилось не просто так. Всё дело в том, что стандартный размер шрифта в браузере — 16 пикселей. А 62.5% от него равно 10 пикселям. Что крайне удобно для расчётов.

    Здесь основной текст такой же, как в стандартных настройках браузера, а эта фраза в 1.6 раз больше, чем основной текст.   div> span> Здесь основной текст такой же, как в стандартных настройках браузера, span>а эта фраза в 1.6 раз больше, чем основной текстspan>. span> div>    Скопировать Скопировано Не удалось скопировать   

Теперь 1 em будет равен 10 px (62.5% от 16), а размер шрифта будет 10 * 1.6 = 16px:

 html  font-size: 62.5%;> span  font-size: 1.6em;> html  font-size: 62.5%; > span  font-size: 1.6em; >    Скопировать Скопировано Не удалось скопировать   

Пример, где размер шрифта не зависит от родительского элемента, потому что мы задали его в rem .

   Теперь один контейнер находится внутри другого, но относительный размер текста больше не зависит от родительского элемента.  span> Теперь один контейнер находится span>внутри другогоspan>, но относительный размер текста больше не зависит от родительского элемента. span>    Скопировать Скопировано Не удалось скопировать   

Размер 1em равен 16px, как в стандартных настройках браузера:

 html  font-size: 100%;> span  font-size: 2rem;> html  font-size: 100%; > span  font-size: 2rem; >    Скопировать Скопировано Не удалось скопировать   

И ещё три примера, как можно задать размер шрифта.

Текст параграфа будет очень большим:

 p  font-size: xx-large;> p  font-size: xx-large; >    Скопировать Скопировано Не удалось скопировать   

Заголовок будет в 2.5 раза больше, чем текст вокруг него:

 h1  font-size: 250%;> h1  font-size: 250%; >    Скопировать Скопировано Не удалось скопировать   

Размер текста внутри тега будет равен 16px, независимо ни от чего:

 span  font-size: 16px;> span  font-size: 16px; >    Скопировать Скопировано Не удалось скопировать   

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Если не задать никакое значение font — size , то браузер использует размер по умолчанию. Обычно это 16px .

💡 У font — size не бывает отрицательных значений.

💡 Размер шрифта наследуется.

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

🛠 Для использования относительных единиц измерения — em , rem или проценты — нужно чётко понимать, от чего будет отсчитываться 1 единица. На начальном этапе я бы не советовала использовать эти единицы для размера шрифта. Велика вероятность, что вы запутаетесь в вычислениях.

🛠 Если в вёрстке используются строчно-блочные ( inline — block ) элементы, то не забывай задавать родителю свойство font — size со значением 0 .

Между строчно-блочными ( inline — block ) элементами, как и между словами в тексте, есть небольшие отступы — пробелы. Устанавливайте размер шрифта в ноль чтобы эти отступы не влияли на положение вложенных элементов и можно было получить более ожидаемый результат от задания внешних отступов.

🛠 Единицы измерения pt не используются в вёрстке веба. Эта единица измерения возникла ещё во времена вёрстки печатной продукции, например, газет.

Сперва она перекочевала в Фотошоп, к дизайнерам. Многие из них также перешли из печатки в веб. По инерции эта единица просочилась и в CSS, но свою логическую составляющую она потеряла. Совершенно не понятно что принимать за пункт в вебе. Гораздо логичнее оперировать пикселями — точками на экране.

Источник

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

HTML заголовки дают возможность посетителям быстро сориентироваться на странице, на которой зачастую бывает море информации, быстро пробегая глазами по заголовкам, они сразу отмечают для себя, на чём стоит остановиться. Правильное использование тегов заголовков даст возможность не только визуально ориентироваться на странице (этого можно добиться используя любые теги совместно с CSS), но и даст возможность так же уверенно находить нужное людям с ограниченными возможностями, которые используют к примеру речевые браузеры.

Атрибуты

Теги — поддерживают Глобальные атрибуты и События

Стиль по умолчанию

h1, h2, h3, h4, h5, h6 < display: block; margin-left: 0; margin-right: 0; font-weight: bold; >h1 < font-size: 2em; margin-top: 0.67em; margin-bottom: 0.67em; >h2 < font-size: 1.5em; margin-top: 0.83em; margin-bottom: 0.83em; >h3 < font-size: 1.17em; margin-top: 1em; margin-bottom: 1em; >h4 < font-size: 1em; margin-top: 1.33em; margin-bottom: 1.33em; >h5 < font-size: .83em; margin-top: 1.67em; margin-bottom: 1.67em; >h6

Пример

Заголовок 1 уровня
 
Заголовок 2 уровня
 
Заголовок 3 уровня
 
Заголовок 4 уровня
 
Заголовок 5 уровня
 
Заголовок 6 уровня
 

Результат данного примера в окне браузера: