CSS Text Color Explained with Syntax and HTML Examples
What Is CSS Text Color
This Blog You Will Learn
ஃ What Is CSS Text Color
ஃ Syntax
ஃ Purpose of Text Color
ஃ Real world Use Cases
ஃ What Is CSS Text Color Example
ஃ Output
ஃ Syntax
ஃ Purpose of Text Color
ஃ Real world Use Cases
ஃ What Is CSS Text Color Example
ஃ Output
What Is CSS Text Color
CSS text color refers to the color applied to text content on a web page using the color property in CSS. It controls how text appears visually and plays a major role in readability, accessibility, branding, and user experience.
Syntax
selector{
color:value;
}
Purpose of Text Color
✅Make content readable.
✅Highlight important information.
✅Match brand identity.
✅Create visual hierarchy.
✅Improve user experience.
Real world Use Cases
- Highlighting error messages.
- Emphasizing headings.
- Branding and theme design
- improving content readability.
ஃ structure diagram examples
What Is CSS Text Color
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: black;
}
h1 {
color: purple;
}
h2 {
color: orange;
}
</style>
</head>
<body>
<h1>CSS Text Color</h1>
<h2>What Is CSS Text Color?</h2>
<p>CSS text color is used to control the color of text displayed on
a web page</p>
<p>It is defined using the color property in CSS.</p>
<p>This property helps improve readability, design consistency,
and visual appeal of a website. </p>
</body>
</html>
What Is CSS Text Color
Explain Program
<!DOCTYPE html>
- This declare the document type.
- browser that the document is written in html
Step 2 ]
<html>.... . </html>
- html is the root element of the html page.
- Every thing inside it is part of the webpage.
Step 3]
<head>
- <head> section contains metadata and css styles,not visible content.
- Contains styles, metadata and page setting
Step 4] <style> tag Internal CSS
- Use to css directly inside the HTML file.
- Controls appearance of elements on the page.
<style>
body {
color: black;
}
- set the default text of entire page to black.
- Applies to text unless overridden by more specific selectors.
h1 {
color: purple;
}
- Change the color <h1> tag text color purple.
- use for main headings.
h2 {
color: orange;
}
- Change the color of <h2> text color orange.
- use for sub-headings.
</style>
</head>
- Closing Tag
Step 5] Body Section
<body>
<h1>CSS Text Color</h1>
<h2>What Is CSS Text Color?</h2>
<p>CSS text color is used to control the
color o
f text displayed on a web page</p>
<p>It is defined using the color property
in CSS.
</p>
<p>This property helps improve readability,
design consistency,
and visual appeal of a website.</p>
1) <body>
- Contains all visible content shown on the webpage.
- Displayed in purple.
- Style by h1 CSS rule.
- Displayed color orange.
- Styled by h2 css rule.
- Displayed in black.
- inherits color from body selector.
Closing tag
</body>
</html>
What Is CSS Text Color
Output
Post a Comment