CSS font color
In this online tutorial we'll show you how to manipulate CSS to color any HTML text element using an HTML tag, ID or class.
CSS text color - font color using an HTML tag - example
For the beginning let's color a simple text or paragraph. In the following example, we will use the <h1> tag and <p> tag.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS text color - font color using an HTML tag - example</title>
<meta name="description" content="Tutorial to learn how tu use CSS text color - font color using an HTML tag - example" />
<style type="text/css">
h1 { color: red; }
p { color: blue; }
</style>
</head>
<body>
<h1>This is how to color the heading title. Any written text between <h> </h1> tags will get red color.</h1>
<p>Any written text between <p> </p> tags will get blue color.</p>
</html>
This is how to color the heading title. Any written text between <h> </h1> tags will get red color.
Any written text between <p> </p> tags will get blue color.
CSS text color using an ID - How to create.
Another way to color <h1> element is by giving it an ID; in the next example we'll show you how to use the ID of 'heading'. IDs can be styled using CSS in the same way as HTML tags, but starting with '#' symbol.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS text color - font color using an HTML tag - example</title>
<meta name="description" content="Tutorial to learn how tu use CSS text color - font color using an HTML tag - example" />
<style type="text/css">
#heading { color: #033; }
#paragraph { color: blue; }
</style>
</head>
<body>
<h1 id="heading">This is how to color the heading title. Any written text between <h> </h1> tags will get red color.</h1>
<p id="paragraph">Any written text between <p> </p> tags will get blue color.</p>
</html>
This is how to color the heading title. Any written text between <h> </h1> tags will get - #003 - color.
Any written text between <p> </p> tags will get blue color.
CSS text color using class
A third method for adding color to HTML elements is by using class – what is similar to ID, but the difference it makes is a dot "." prefixed instead of a "#".
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS text color - font color using an HTML tag - example</title>
<meta name="description" content="Tutorial to learn how tu use CSS text color - font color using an HTML tag - example" />
<style type="text/css">
.heading { color: #033; }
.paragraph { color: blue; }
</style>
</head>
<body>
<h1 class="heading">This is how to color the heading title. Any written text between <h> </h1> tags will get red color.</h1>
<p class="paragraph">Any written text between <p> </p> tags will get blue color.</p>
</html>
This HTML code will produce the following result −
This is how to color the heading title using class. Any written text between <h> </h1> tags will get - #003 - color.
Any written text between <p> </p> tags will get blue color.
CSS font color
CSS font color - css 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.