Introduction to CSS Font Color
Cascading Style Sheets or CSS is all about how a developer wants to put forth his page for the users. One must know what will appeal to the end-user for using the appropriate styling. One of the core foundations of styling a page is deciding on the color scheme. The color scheme should be chosen 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 deciding the color of the font, 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.
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, for id, and for a class. It will be a good idea to set the background color along. The syntax for text color is as follows:
color: Color Name / Hex Value/ RGB ValueWhile color name offers only a handful of options, the latter two parameters, i.e. Hex Value and RGB Value offers a wider range of option 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 inherit. 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 types of values i.e. color name, hex value or RGB value to set the color for various elements. We will be using an external style sheet, so we will start by creating the CSS file first.
- We will first define the color of the test for heading element i.e. <h1>. We will define the background color along, to keep the visibility of the font color in sync with the background. The code should be similar to:
h1{
color: cornflowerblue;
background-color:#8b008b ;
}- Similar to the above code snippet, we will set the font color and background color for a class. The idea is that this color scheme can be used by any element when required. It should be coded like:
.cls1{
color: rgb(220, 20, 60);
background-color: #000000;
}- 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:
CSS Code:
h1{
color: cornflowerblue;
background-color:#8b008b ;
}
.cls1{
color: rgb(220, 20, 60);
background-color: #000000;
}- Next, we will write an HTML page. Please note that we will be using the CSS file which was created separately, so we will be calling for the sheet through the HTML page.
- We will code the page in such a way that both <h1> and cls1 are used. The code should be similar to:
HTML Code:
<html>
<head>
<title>Testing Text Color</title>
<link rel = "stylesheet" href = "color.css">
</head>
<body>
<h1>Welcome to the page for text colors</h1>
<h2 class="cls1">We are testing colors through name and hex values along with using appropriate background colors</h2>
</body>
</html>- Save the html file and open in a browser The results should look like:
Output:
2. Text- Color Demonstration Using Internal CSS
- For this example, we will use internal CSS i.e. in our HTML code, we will include our styling definition within the style tag <stlyle />. We will start by creating an html file. Within the <head> tag, we will define the <style> tag. The coding will be:
CSS Code:
<style>
.colCls{
color: darkolivegreen;
font-size: 30px;
background-color:lightcoral;
border-style: inset;
border-color: rgb(255, 182, 193);
}
p{
color: #ff8c00 ;
font-style: italic;
font-size: 25px;
background-color: dimgrey;
border-color: goldenrod;
border-style: double;
}
</style>- Next, within the body tag, we will use the class and element, that we styled through internal CSS. The final html code should look like this:
HTML Code:
<html>
<head>
<title>Text color using internal CSS</title>
<style>
.colCls{
color: darkolivegreen;
font-size: 30px;
background-color:lightcoral;
border-style: inset;
border-color: rgb(255, 182, 193);
}
p{
color: #ff8c00 ;
font-style: italic;
font-size: 25px;
background-color: dimgrey;
border-color: goldenrod;
border-style: double;
}
</style>
</head>
<body>
<h1 class="colCls">Testing Text Color</h1>
<p>This is the paragraph style with defined text color, background color and borders.</p>
</body>
</html>- Saving this file and opening through a browser will give the following output:
Output:
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:
HTML Code:
<html>
<head>
<title>Text color using internal CSS</title>
</head>
<body>
<h1 style="color: darkolivegreen; font-size: 30px; background-color:lightseagreen; border-style: dotted;
border-color:lightskyblue;">Testing Text Color Through Inline CSS</h1>
<p style="color:forestgreen ;font-style: italic; font-size: 20px; background-color: lightcoral;
border-color: firebrick; border-style: dashed;">Testing Test Color Property through Inline CSS</p>
</body>
</html>- The elements <h1> (heading) and <p> (paragraph) were styled using inline CSS. The output of the code should be similar to the screenshot below:
Output:
The above three examples explained how to set a color for the text along and co-ordinating it with background and border colors. This can be done through External, Internal as well as Inline CSS, as we discussed in the example above. Like always, there is always room for any further experiments with other combinations of properties. Please note, that the selection of the color of text should be such that it is soothing for the users. It should be flashy when needed and subtle otherwise.
Recommended Articles
This is a guide to CSS Font Color. Here we discuss the Introduction and Text-Color Syntax and Uses along with different examples and its code implementation. You may also look at the following articles to learn more –
4.5 (8,758 ratings)
View Course
