Text and Background Color Utilities in W3.CSS
In any HTML, JavaScript, or webpage design language, the W3.CSS scripting language allows you to easily manage text and background color utility classes on user-defined web object elements. The Text, Paragraph, and Background Color classes defined in HTML web pages help web developers apply immediate color themes to text content and backgrounds on their web pages without writing custom CSS source code. The Text and Background Color schemes in W3.CSS scripting are defined based on a set of predefined color schemes that are used on most common web elements, making it easy to decorate, format, or style text, object, and paragraph elements on your web pages.
Let’s take a closer look at the text color and background color utility classes in W3.CSS.
Text color utility concept in W3.CSS.
The default color of webpage text paragraphs can be managed and controlled by applying predefined text color utility classes in W3.CSS web development scripts. Text color utility classes allow web developers to change or modify the color of existing text on any webpage element object, such as text, paragraphs, headings, subheadings, links, and sentences.
Basic W3.CSS text color class names.
- .w3-text-{color} – Helps you change or modify the color of text defined in W3.CSS web development scripts to a desired new color.
- w3-text-color choice – Here you can select red, blue, green, yellow, black, white, purple, gray, orange, etc. as the text color for your web text element.
- Text Color Class Syntax – .w3-text-{color}
Common text color classes used in W3.CSS.
- .w3-text-red – This applies the red text color class effect to HTML, JavaScript, webpage design text, paragraphs, sentences, headings, subheadings, etc.
- .w3-text-blue – This applies the blue text color to HTML, JavaScript, webpage design text, paragraphs, sentences, headings, subheadings, etc.
- .w3-text-green – This applies the green text color to HTML, JavaScript, webpage design text, paragraphs, sentences, headings, subheadings, etc.
- .w3-text-yellow – This applies the yellow text color to HTML, JavaScript, webpage design text, paragraphs, sentences, headings, subheadings, etc.
- .w3-text-orange – This applies the orange text color to HTML, JavaScript, webpage design text, paragraphs, sentences, headings, subheadings, etc.
- .w3-text-purple – This applies purple text color to HTML, JavaScript, webpage design text, paragraphs, sentences, headings, subheadings, etc.
- .w3-text-black – This applies black text color to HTML, JavaScript, webpage design text, paragraphs, sentences, headings, subheadings, etc.
- .w3-text-white – This applies white text color to HTML, JavaScript, webpage design text, paragraphs, sentences, headings, subheadings, etc.
- .w3-text-grey – This applies gray text color to HTML, JavaScript, webpage design text, paragraphs, sentences, headings, subheadings, etc.
Example of the .w3-text-{color} text color class in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<title>Lets explore w3-text-color Text Color classes</title>
</head>
<body>
<!– text display with Red Text class–>
<p class=”w3-text-red”>This text display with red text color class.</p>
<!– text display with Blue Text –>
<p class=”w3-text-blue”>This text display with blue text color class.</p>
<!– text display with Green Text –>
<p class=”w3-text-green”>This text display with green text color class.</p>
<!– text display with Yellow Text –>
<p class=”w3-text-yellow”>This text display with yellow text color class.</p>
<!– text display with Orange Text –>
<p class=”w3-text-orange”>This text display with orange text color class.</p>
<!– text display with Purple Text –>
<p class=”w3-text-violet”>This text display with purple text color class.</p>
<!– text display with Black Text –>
<p class=”w3-text-black”>This text display with black text color class.</p>
<!– teal Text color with light pink background) –>
<p class=”w3-text-teal” style=”background-color: #fabc;”>This text display with teal text color class with a light pink background behind.</p>
</body>
</html>
Explanation of the .w3-text-{color} text color class in W3.CSS.
- In this example, each paragraph text sentence is displayed with a different text color by applying the .w3-text-{color} class to the <p> tag.
- The last example displays lime text on a light background and a pink background for enhanced contrast.
Background Color Utilities Concept in W3.CSS Scripting.
In HTML, JavaScript, and webpage design, the background color of text webpage object elements is also used or handled by applying the background utility class. W3.CSS web development scripts provide web developers with a variety of background color choices that can be applied to various webpage elements, such as containers, sections, div blocks, and paragraphs, within the current webpage.
Basic W3.CSS Scripting background color class names.
- .w3-{bgcolor} – This allows you to change or apply the background color set to a webpage element defined in a W3.CSS web development script.
- w3-{bgcolor} Background color choices – This allows you to apply a background color such as red, blue, green, yellow, black, white, gray, etc. to your web object’s background element.
- Background color class syntax – .w3-{bgcolor}
Common W3.CSS .w3-{bgcolor} background color class names.
- .w3-red – Applies a red background color to containers, sections, div blocks, paragraphs, etc. within the current webpage element object.
- .w3-blue – Applies a blue background color to containers, sections, div blocks, paragraphs, etc. within the current webpage element object.
- .w3-green – A green background color is applied to containers, sections, and div blocks, paragraphs, etc., within the current webpage element object.
- .w3-yellow – A yellow background color is applied to containers, sections, and div blocks, paragraphs, etc., within the current webpage element object.
- .w3-orange – An orange background color is applied to containers, sections, and div blocks, paragraphs, etc., within the current webpage element object.
- .w3-purple – A purple background color is applied to containers, sections, and div blocks, paragraphs, etc., within the current webpage element object.
- .w3-black – A black background color is applied to containers, sections, and div blocks, paragraphs, etc., within the current webpage element object.
- .w3-white – A white background color is applied to containers, sections, and div blocks, paragraphs, etc., within the current webpage element object.
- .w3-grey – Applies a grey background color to containers, sections, and div blocks, paragraphs, etc. in the current webpage element object.
Example of the .w3-{bgcolor} background color class in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<title>Lets explore w3-bgcolor Background Color classes</title>
</head>
<body>
<!– it displays Gray Background behind the block p tag text–>
<div class=”w3-container w3-grey”>
<p>This paragraph tag display with gray background.</p>
</div>
<!– it displays Red Background behind the white p tag text–>
<div class=”w3-container w3-red”>
<p>This paragraph tag display with red background.</p>
</div>
<!– it displays Blue Background behind the white p tag text –>
<div class=”w3-container w3-blue”>
<p>This paragraph tag display with blue background.</p>
</div>
<!– it displays no background behind the white p tag text –>
<div class=”w3-container w3-green”>
<p>This paragraph tag display with green background.</p>
</div>
<!– it displays Yellow Background behind the p tag text –>
<div class=”w3-container w3-yellow”>
<p>This paragraph tag display with yellow background.</p>
</div>
<!– it displays Orange Background behind the p tag text –>
<div class=”w3-container w3-orange”>
<p>This paragraph tag display with orange background.</p>
</div>
<!– it displays Brown Background behind the lime p tag text –>
<div class=”w3-container w3-brown w3-text-lime”>
<p>This paragraph tag displays with a brown background and lime text.</p>
</div>
</body>
</html>
Explanation of the .w3-{bgcolor} background color class in W3.CSS.
- In this example, you can display a different background color by applying a special .w3-{bgcolor} background class to each div paragraph tag element.
- In the last example, the div paragraph block is displayed with a brown background color and lime text color for easier reading.
Text and Background Color Combinations in W3.CSS.
To develop more detailed and complex webpage designs in HTML, JavaScript, and webpages, web developers can group or merge text color classes and display background color classes. This allows web developers to set or modify the default background color of a webpage element with a new color, and also customize text color to ensure good color contrast and readability.
Example of text and background colors together in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<title>Group example of Text and Background Colors class</title>
</head>
<body>
<!– it displays yellow background with black Text –>
<div class=”w3-container w3-yellow w3-text-black”>
<p>This paragraph tag display with yellow background and black text.</p>
</div>
<!– it displays orange background with white Text –>
<div class=”w3-container w3-orange w3-text-white”>
<p>This paragraph tag display with orange background and white text.</p>
</div>
<!– it displays a green background with lime text –>
<div class=”w3-container w3-green w3-text-lime”>
<p>This paragraph tag displays a green background and lime text.</p>
</div>
<!– it displays a teal background with white text –>
<div class=”w3-container w3-teal w3-text-white”>
<p>This paragraph tag displays a teal background and white text.</p>
</div>
</body>
</html>
Explanation of text and background colors together in W3.CSS.
- Here, the first div paragraph block contains black text with a yellow background.
- The second div paragraph block contains white text with an orange background.
- The third div paragraph block contains lime text with a green background.
- The last div paragraph block contains white text with a teal background.
Background Transparency (Opacity) Concept in W3.CSS.
In HTML, JavaScript, and web development, web developers can use the opacity attribute for the background Colors class to make a webpage’s text background slightly transparent. The transparent effect isn’t a built-in feature in direct W3.CSS scripting. However, web developers can manually apply custom CSS code to adjust the opacity as needed.
Example of a transparent background in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<style>
.transparent-bg {
background-color: rgb(11, 144, 139, 0.3); /* teal background color with 30% opacity effect*/
}
.transparent-bg1 {
background-color: rgb(237, 235, 6, 0.8); /* yellow background color with 80% opacity effect*/
}
</style>
<title>Let’s explore Transparent Background Opacity class</title>
</head>
<body>
<!– here it displays transparent teal background color effect –>
<div class=”w3-container transparent-bg”>
<p>This paragraph tag display with transparent 30% teal background effect.</p>
</div>
<!– here it displays transparent yellow background color effect –>
<div class=”w3-container transparent-bg1″>
<p>This paragraph tag display with transparent 80% yellow background effect.</p>
</div>
</body>
</html>
Explanation of a transparent background in W3.CSS.
- In this example, the opacity class uses RGBA values, where the first RGBA value (0.3) sets the transparency to 30%. This makes the background color light teal, but with some transparency, allowing the content behind it to display slightly transparent.
