Цвет шрифта HTML

Цвет шрифта на сайте можно задать при помощи HTML-кода. Для этого существует тег font. По определению, тег font служит некой «обёрткой» или «контейнером» для текста, управляя свойствами которого можно изменять оформление текста.

Тег font применяется следующим образом:

Конструктор сайтов "Нубекс"

Самый простой способ, как изменить цвет шрифта в HTML, это использовать атрибут color тега font:

Конструктор сайтов "Нубекс"

Здесь задается синий цвет для слова, обрамленного тегом font.

Но помимо параметра color, тег имеет и другие атрибуты.

Атрибуты тега FONT

Тег font имеет всего три атрибута:

• color – задает цвет текста;
• size – устанавливает размер текста;
• face – задает семейство шрифтов.

Параметр color может быть определен названием цвета (например, “red”, “blue”, “green”) или шестнадцатеричным кодом (например, #fa8e47).

Атрибут size может принимать значения от 1 до 7 (по умолчанию равен 3, что соответствует 13,5 пунктам для шрифта Times New Roman). Другой вариант задания атрибута – “+1” или “-1”. Это означает, что размер будет изменен относительно базового на 1 больше или меньше, соответственно.

Рассмотрим применение этих атрибутов на нашем примере:

     
Конструктор сайтов "Нубекс"
  

Мы применили тег font к одному слову, задали для него размер 6, оранжевый цвет и семейство шрифтов “Serif”.

Задание цвета текста при помощи CSS

Если вам нужно применить определенное форматирование (например, изменить цвет текста) к нескольким участкам текста, то более правильно будет воспользоваться CSS-кодом. Для этого существует атрибут color. Рассмотрим способ его применения на нашем примере:

    .nubex < color:#fa8e47; font-size: 150%; >.constructor < color: blue; >.saitov 
Конструктор сайтов "Нубекс"
  

Здесь мы задали синий цвет для слова «Конструктор» (размер его, по умолчанию, 100% от базового), зеленый цвет и размер 125% для слова «сайтов», оранжевый цвет и размер 150% для слова «Нубекс».

Смотрите также:

Источник

CSS Font Color

Cascading Style Sheets (CSS) is all about how a developer wants to present their page to the users. One must understand what will appeal to the end user in order to use appropriate styling. Choosing the color scheme is one of the core foundations of page styling and should be done very carefully. Who the end audience is should be the priority consideration. Choosing a text-color falls in the same scheme. The text has many properties that can be decided through CSS; color is one such. However, while determining the font color, we must select the background color which is apt to go with it. What is the use of having a pastel font against a white background? It will be strenuous for the user and highly likely for them to leave the page.

Web development, programming languages, Software testing & others

Text-Color Syntax and Uses

The color of the text can be set by using the color property. This can be declared for an HTML element, an id, and a class. It will be a good idea to set the background color. The syntax for text color is as follows:

color: Color Name / Hex Value/ RGB Value

While color name offers only a handful of options, the latter two parameters, i.e., Hex Value and RGB Value, offer a wider range of options where one can select from a wide range of hues and shades of the color. These values can be looked upon on the internet and used for styling the respective elements. The global values for this property are initial and inherited. While initial sets the color of the text to its default color, inherit does the bit of setting the color of the text as that set in the parent element.

Examples of Font Color in CSS

Let us take a look at the following examples to see how the text color property works:

1. Using Different Types of Parameters for Setting Text Color

• In this example, we will use different values, i.e., color name, hex value, or RGB value, to set the color for various elements. We will use an external style sheet to create the CSS file first.
• We will first define the color of the test for the heading element, i.e., . We will define the background color to keep the visibility of the font color in sync with the background. The code should be similar to the following:

• Similar to the above code snippet, we will set a class’s font color and background color. The idea is that this color scheme can be used by any element when required. It should be coded like this:

• As we can see, the code has all three types of values, i.e., hex value (#000000 for Black), RGB value (rgb(220, 20, 60) for Crimson), and just the color names (cornflowerblue). Combing the two snippets, we will get the final CSS file:

• Next, we will write an HTML page. Please note that we will use the CSS file created separately to call for the sheet through the HTML page.
• We will code the page to use and cls1. The code should be similar to the following:

   
Welcome to the page for text colors
 
We are testing colors through name and hex values along with using appropriate background colors
  

2. Text- Color Demonstration Using Internal CSS

• For this example, we will use internal CSS, i.e., in our HTML code, and include our styling definition within the style tag . We will start by creating an html file. Within the tag, we will define the tag. The coding will be:

• Next, we will use the class and element we styled within the body tag through internal CSS. The final html code should look like this:

   .colCls < color: darkolivegreen; font-size: 30px; background-color:lightcoral; border-style: inset; border-color: rgb(255, 182, 193); >p 
Testing Text Color
 
This is the paragraph style with defined text color, background color and borders.
  

3. Text-Color Demonstration Using Inline CSS

• For this example, we will define the style for the elements within the tags using the style parameter. The coding for the HTML file should be similar to this:

    
Testing Text Color Through Inline CSS
 
Testing Test Color Property through Inline CSS
  

• The elements (heading) and

  (paragraph) were styled using inline CSS. The output of the code should be similar to the screenshot below:

The above three examples explained how to set a color for the text and co-ordinating it with background and border colors. You can achieve this through External, Internal, and Inline CSS, as discussed in the previous example. Like always, there is always room for further experiments with other combinations of properties. Please note that the selection of the text color should be such that it is soothing for the users. It should be flashy when needed and subtle otherwise.

Recommended Articles

We hope that this EDUCBA information on “CSS Font Color” was beneficial to you. You can view EDUCBA’s recommended articles for more information.

38+ Hours of HD Videos
9 Courses
5 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

149+ Hours of HD Videos
28 Courses
5 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

253+ Hours of HD Videos
51 Courses
6 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

CSS Course Bundle — 19 Courses in 1 | 3 Mock Tests
82+ Hours of HD Videos
19 Courses
3 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

Источник

How to Change Text Color in HTML – Font Style Tutorial

Joel Olawanle

Text plays a significant role on our web pages. This is because it helps users learn what the web page is all about and what they can do there.

When you add text to your web pages, this text defaults to a black color. But sometimes you will want to change the text color to be more personalized.

For example, suppose you have a darker color as the background of your website. In that case, you’ll want to make the text color a lighter, brighter color to improve your website’s readability and accessibility.

In this article, you will learn how to change the color of your text in HTML. We’ll look at various methods, and we’ll discuss which method is best.

How to Change Text Color Before HTML5

Before the introduction of HTML5, you’d use to add text to websites. This tag takes the color attribute, which accepts the color as a name or hex code value:

 Welcome to freeCodeCamp. // Or Welcome to freeCodeCamp. 

This tag got depreciated when HTML5 was introduced. This makes sense because HTML is a markup language, not a styling language. When dealing with any type of styling, it is best to use CSS, which has the primary function of styling.

This means for you to add color to your web pages, you need to make use of CSS.

In case you are in a rush to see how you can change the color of your text, then here it is:

// Using inline CSS 
Welcome to freeCodeCamp!
 // Using internal/external CSS selector

Suppose you are not in a rush. Let’s briefly dive right in.

How to Change Text Color in HTML

You can use the CSS color property to change the text color. This property accepts color values like Hex codes, RGB, HSL, or color names.

For example, if you want to change the text color to sky blue, you can make use of the name skyblue , the hex code #87CEEB , the RGB decimal code rgb(135,206,235) , or the HSL value hsl(197, 71%, 73%) .

There are three ways you can change the color of your text with CSS. These are using inline, internal, or external styling.

How to Change Text Color in HTML With Inline CSS

Inline CSS allows you to apply styles directly to your HTML elements. This means you are putting CSS into an HTML tag directly.

You can use the style attribute, which holds all the styles you wish to apply to this tag.

You will use the CSS color property alongside your preferred color value:

// Color Name Value 
Welcome to freeCodeCamp!
 // Hex Value 
Welcome to freeCodeCamp!
 // RGB Value 
Welcome to freeCodeCamp!
 // HSL Value 
Welcome to freeCodeCamp!
 

But inline styling isn’t the greatest option if your apps get bigger and more complex. So let’s look at what you can do instead.

How to Change Text Color in HTML With Internal or External CSS

Another preferred way to change the color of your text is to use either internal or external styling. These two are quite similar since both use a selector.

For internal styling, you do it within your HTML file’s tag. In the tag, you will add the tag and place all your CSS stylings there as seen below:

While for external styling, all you have to do is add the CSS styling to your CSS file using the general syntax:

The selector can either be your HTML tag or maybe a class or an ID . For example:

// HTML 
Welcome to freeCodeCamp!
 // CSS p

// HTML 
Welcome to freeCodeCamp!
 // CSS .my-paragraph

// HTML 
Welcome to freeCodeCamp!
 // CSS #my-paragraph

Note: As you have seen earlier, with inline CSS, you can use the color name, Hex code, RGB value, and HSL value with internal or external styling.

Wrapping Up

In this article, you have learned how to change an HTML element’s font/text color using CSS. You also learned how developers did it before the introduction of HTML5 with the tag and color attributes.

Also, keep in mind that styling your HTML elements with internal or external styling is always preferable to inline styling. This is because it provides more flexibility.

For example, instead of adding similar inline styles to all your

tag elements, you can use a single CSS class for all of them.

Inline styles are not considered best practices because they result in a lot of repetition — you cannot reuse the styles elsewhere. To learn more, you can read my article on Inline Style in HTML. You can also learn how to change text size in this article and background color in this article.

I hope this tutorial gives you the knowledge to change the color of your HTML text to make it look better.

Embark on a journey of learning! Browse 200+ expert articles on web development. Check out my blog for more captivating content from me.

Источник