Html bold color codes

HTML Bold

This page contains various HTML bold codes — HTML codes for creating bold text.

There’s more than one way in HTML to bold text. This can be slightly confusing — especially if you aren’t familiar with HTML coding. However, once you get your head around it, you’ll find that each method has its place, and you can — and probably should — use a combination of these whenever you want HTML bold text.

CSS Bold: font-weight Property

CSS provides the font-weight property to make your text bold.

You can also specify the «boldness factor» (instead of just specifying bold ). In other words, you can apply different levels of boldness to different text. Plus you can even specify that text should not be bold. To learn more about this, read about the font-weight property.

The above example uses inline style sheets, however, I highly recommend learning how to use external style sheets and CSS classes, as this will enable you to apply your styles across your whole website in one go.

HTML Bold: Tag

When most people think «HTML bold», they usually think of text that has been boldened using the HTML tag.

Here’s an example of creating «HTML bold» using the tag:

So Which «HTML Bold» Tag Should I Use?

The HTML specification includes several tags for presented boldened/emphasized/highlighted text. Each tag has its own special meaning.

The following table outlines the HTML tags in question:

HTML Tag	When to use this tag
	Use on text to be stylistically offset from the normal prose without conveying any extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is boldened.
	This element represents stress emphasis of its contents. Use this tag whenever you want to place emphasis on a particular word or phrase.
, , , , , &	Use these tags for defining different levels of headings.
	This element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. Use this tag when you want to highlight a particular word or phrase for reference purposes.
	This element represents strong importance for its contents. Use this tag whenever you want to convey importance for a particular word or phrase.

Here’s what the HTML specification says about HTML bold and other emphasized/highlighted text:

Combining CSS Bold and HTML Bold

Actually, a combination of CSS and HTML is often the best way to bold text in HTML documents.

You should use HTML to define the meaning of the marked up text, then use CSS to define the way that the text looks.

As the HTML specification says:

Источник

Жирный текст с помощью HTML и CSS

Сегодняшней публикацией начинаю цикл статей про жирные шрифты. Изначально думал разместить все нюансы и вопросы по теме в одном месте, но информации оказалось слишком много. Лучше воспринимать ее постепенно. Поэтому перед тем, как перейти к разным обзорам шрифтов для создания фотошоп иллюстраций рассмотрю вопросы, связанные с версткой. Подборки фонтов найдете тут: интересные жирные, разные bold и русские толстые шрифты.

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

Жирный текст на HTML

Для выделения определенного текста жирным используются специальные HTML теги — и . Например следующий код:

Обычный текст.
 
Жирный текст.
 
Жирный текст strong.

Обычный текст.

Жирный текст.

Жирный текст strong.

На выходе дает такую картинку:

Последние два варианта визуально выглядят одинаково, однако они между собой немного отличаются. Тег задает простое стилистическое выделение слова жирным шрифтом, тогда как добавляет при этом некое семантическое «усиленное» (важное) значение. То есть последняя строка — это не просто жирный текст, а какая-то важная информация. В принципе, для поисковиков рекомендуют использовать именно .

Вы также можете встретить прописанный в HTML жирный шрифт с помощью стилей:

Пример жирного текста.
 
Пример текста с жирным словом.

На сайте это отображается так:

Не смотря на то, что код жирного текста для HTML работает корректно, так делать не следует. Все стили оформления должны быть вынесены в CSS файл. Поэтому в примере выше вы должны были для тегов

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

Жирный текст на CSS

Дабы сделать в CSS жирный шрифт используется свойство font-weight. С его помощью указывается «насыщенность» фрагмента текста. Значения могут быть от 100 до 900, но наиболее часто используемые это:

Есть также варианты значений bolder и lighter, которые меняют шрифт в зависимости от родителя на более или менее жирный соответственно.

Чтобы задать жирный текст в CSS нужно тому или иному элементу задать какой-то стиль, например:

Обычный текст с по центру.

Далее в CSS стилях вы определяете для него жирность вместе с другими свойствами по типу подчеркивания текста и т.п.:

. my-bold-font { color: black; font-weight: 700; }

. my-bold-font { color: black; font-weight: bold; }

Разницы нет никакой. Кстати, если говорить о HTML теге , то для него по умолчанию прописан такой стиль:

Тут хотелось отметить один небольшой нюанс, который мне рассказали на курсах верстки — если вы создаете для какого-то элемента новый класс, то желательно использовать более-менее «понятное название». Например, в примере выше стиль выглядит логичнее чем т.к. можно отчасти понять его назначение. Это плюс для тех, кто будет смотреть и использовать вашу верстку в дальнейшем.

В следующей статье расскажу про интересные жирные шрифты, которые мне удалось найти.

Источник

Text Color

In HTML, you can change the text color using Cascading Style Sheets (CSS). You can change the text color using inline style sheets, embedded style sheets, or external style sheets.

For the purposes of these examples, we’ll use inline style sheets, however, I encourage you to use external style sheets whereever possible.

In HTML, you can specify color using the color name, hexadecimal value (also known as the «hex value» or «hex color codes»), or the RGB value.

Color Name

You can use the color name to change the text color:

You can change the text color of a whole sentence or paragraph.

. or you can change the text color of one word or even a single l e tter.

Hexadecimal Value

You can specify text color by using the hexadecimal value.

Full Hexadecimal Notation

You can use the full hexadecimal value to change the text color:

You can change the text color of a whole sentence or paragraph.

. or you can change the text color of one word or even a single l e tter.

Hexadecimal Shorthand

Depending on the full hexadecimal value, you can shorten it from six digits to three digits. You can only do this if the six digit value is made up of three doubles (each double representing red, green, or blue). For example 990000 can be shortened to 900 . You can do this because in the shorthand version, each digit represents two digits.

You couldn’t shorten for example, fe0f00 because the red and green values are made up of different numbers ( fe and 0f respectively).

Here’s an example of changing the text color using hexadecimal shorthand:

You can change the text color of a whole sentence or paragraph.

. or you can change the text color of one word or even a single l e tter.

RGB Value

You can also specify text color using the RGB value. You can specify either integer values or percentage values. For example, you could express the color red as rgb(255,0,0) or rgb(100%,0%,0%) .

RGB Integer Range

You can change the text color of a whole sentence or paragraph.

. or you can change the text color of one word or even a single l e tter.

RGB Percentage Range

You can change the text color of a whole sentence or paragraph.

. or you can change the text color of one word or even a single l e tter.

RGBA Value

Using CSS3, you can specify text color using an RGBA value. In this context, the «A» refers to «Alpha Transparency» or opacity.

Note that at the time of writing, CSS3 is still in draft status and browser support for the RGBA method of specifying color is limited. Therfore, if your browser isn’t displaying this example properly, it’s probably because it doesn’t support the RGBA method.

HSL Value

CSS3 also allows you to set text color using the HSL color value. HSL stands for hue-saturation-lightness, and is a more intuitive way to create colors.

Note that at the time of writing, browser support for this method was limited. Therefore, if this example doesn’t display properly for you, it’s probably because your browser doesn’t support the HSL method for specifying colors.

You can change the text color of a whole sentence or paragraph.

. or you can change the text color of one word or even a single l e tter.

HSLA Value

Similar to the RGBA model, the HSLA model allows you to specify alpha transparency.

HTML Text Color Generator

You can also use the text generator to quickly generate color codes for your HTML.

Источник