HOME | PHP Tutorial | CSS
facebook icon
AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP
PHP Tutorial

PHP forms
HTML Tutorial

CSS Tutorial

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.

Example 1:
<!DOCTYPE html>
<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>

</body>
</html>
HTML cod above will display this result -

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.

Note: There are no browser defaults for any ID or Class

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.

Example 2:
<!DOCTYPE html>
<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>

</body>
</html>
The HTML cod above will display this result -

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 "#".

Example 3:
<!DOCTYPE html>
<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>

</body>
</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.

Note: CSS text color using class

CSS font color CSS font color - css tutorial

3182. CSS Border Style Width and Color, css tutorial
CSS Border Style Width and Color css tutorial
https://www.agernic.com/css-tutorial/css-border-style-width-and-color.html

2805. CSS Border Style Width and Color, css tutorial
CSS Border Style Width and Color css tutorial
http://www.agernic.com/css-tutorial/css-border-style-width-and-color.html

822. CSS selectors - CSS tutorials - w3resource

https://www.w3resource.com/css/selectors/CSS-selectors.php

2706. CSS Links - CSS tutorial
EchoEcho.Com : The complete CSS tutorial
http://www.echoecho.com/csslinks.htm

2226. CSS Tutorial - Build a navigation bar
Normally to create a navigation bar (horizontal or vertical menu) the HTML lists are a good start point. You can then use CSS to give it some awesomeness. You will also use a link inside the li element. So let
https://tutorialehtml.com/en/css-tutorial-build-a-navigation-bar/

2704. CSS Layers - CSS tutorial
EchoEcho.Com : The complete CSS tutorial
http://www.echoecho.com/csslayers.htm

Your add here
PHP printf() function

PHP isset() Function

PHP htmlspecialchars() function

PHP lcfirst() function

PHP ltrim() function

PHP empty() Function

PHP strcmp() function

PHP htmlspecialchars_decode() function

PHP implode() function

PHP str_split() function

PHP rtrim() function

PHP print() function

PHP ucwords() function

PHP strip_tags() function

PHP trim() function

PHP explode() function

How to include, how to incorporate CSS in HTML
CSS Style Scrollbar in Div
HTML Image Link
HTML link open in new tab or window - how to create link
CSS Text Decoration
PHP Operator Types