HTML background color
 
In this lesson you will have color codes at the end of this page
 
 
 Here we have a strong Paragraph 
 
 Here we have an italic Paragraph 
 
Visit our HTML tutorial - this is a link 
 
 
 

Note: In the above example I used inline CSS, but it is better to avoid and use external CSS
Note: HTML colors supports 140 standard color names.

HTML text color — using inline CSS

To put a text in a certain color can be done in several ways, as:
1. inside a paragraph

,
2. inside a box

Let’s have an example using:

 
 
 
  

 
 
Colored HTML text
 
 
your description here colored in green
 
 
your description here colored in red
 
 
 

Note: In the above example I used inline CSS, but it is better to avoid and use external CSS

More examples for a better understanding text color

 
 
 
  

 
 
Colored HTML text
 
 
your description here RGB colored
 
 
your description here HEX colored
 
 
your description here HSL colored
 
 
your description here colored in red
 
 
 

HTML border color — using inline CSS

To put border color to a text can be done in several ways, as:
1. border inside a paragraph

,
2. border for a box

Let’s have an example using:

 
 
 
 
 
 
HTML border color - using inline CS
 
 
your text here red color
 
 
your text here green color
 
 
 

Note: In the above example I used inline CSS, but it is better to avoid and use external CSS

HTML colors, Text color, Border Color, background color
HTML colors, background, text and border color — html tutorial

This tool makes it easy to create, adjust, and experiment with custom colors for the web.

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

Find here examples of creative and unique website layouts.

Find here examples of creative and unique website CSS HTML menu.

This tool makes it easy to create, adjust, and experiment with custom colors for the web.

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

Find here examples of creative and unique website layouts.

Find here examples of creative and unique website CSS HTML menu.

Источник

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

Источник