Introduction to CSS Text Color
In CSS (Cascading Style Sheet) code the text is one of the format type for creating the presentation in the web pages. Each text have different fonts, sizes, colors and alignments. Text is styled with some text formatting properties. We can use the headings and other areas like footers etc. Text-align property is used for aligning these in the web pages based on that additionally color property is added and used to set the colors of the given text specified the text with color name values like hexadecimal format also use RGB (Red Green Blue) format type in the CSS.
Syntax and Parameters:
The CSS codes are written with the html page using style tag we can follow some rules and syntax for customized the web pages more attractiveness. We use text format type in all the css properties and their attributes.
<html>
<head>
<style>
.firstcss{
background-color: ;
color:;
}
--we can write css styles based on the customer requirements the attributes and their properties are enabled in the codes---
</style>
</head>
<body>
</body>
</html>
The above code is one of the basic syntax for the css text and color based presentation in the web pages. We can use any number of css attributes and their properties parameters also passing here parameters named as attributes and properties values used for customized the web page.
How does Text Color work in CSS?
In CSS style codes we used lot of attributes, properties with default values. It will be both text, number, special characters etc using these type of values. We can enable the particular property of their css attributes for making the presentation with more attractiveness.We can use the css color codes in the html text based elements by using some default html tags, ID or Some built-in classes.
When we use css color in html tag based elements <h1> is one of the default and most widely used in the html codes for making them as color with the help of css styles also it helps any elements in the CSS. <h1> mostly we used in the <head> tag in the html because <style> also declare and initialized in there so <h1> heading line probably we used there in the web pages.
4.5 (7,195 ratings)
View Course
Next we can use the css colors with the help of ID in the html web pages same way we used <h1> heading tags but the element is provided by giving it in default ID these ids are declared in the heading part of the style code also the ID can be any used any styled the same as used in the html tags but important point is the id value should start with the special character like ‘#’ symbol after that we can used any number of formats like alphabets, numbers etc. We can use text color in css with the help of class its one of the method for adding the colors in the css style sheet. It also followed the above two methods but the difference is without ‘#’ symbol we used ‘.’ Symbol in the css code.
The prefix value should start compulsory in dot operator or else the css codes are not used in the html web pages the presentation is not shown in the screen. Apart from that the same classes are declared in the <style> tag the same class names are called in the <h1> tag element is <h1 class=””></h1>. These are the ways which has been declared and initialized the text color codes of the css elements in the html web pages.
Especially the css used different set of properties related with the text and color based some of them are “color, direction, letter-spacing, word-spacing, text-indent, text-align, text-decoration, text-transform, white-spaces and text-shadow” these are some default properties which has been used in the style codes for each property it has their own features and advantages of the CSS.
Examples of CSS Text Color
Given below are the examples mentioned:
Example #1
Code:
<!DOCTYPEhtml>
<html>
<head>
<title>Welcome To My Domain</title>
<style>
.first {
padding: 12px;
width: 73%;
margin: 2 auto;
background-color: green;
text-align: center;
color: red;
border-radius: 1 2 52px 53px;
border: 2px yellow;
}
.second{
margin: 12px;
padding: 13px;
color: green;
border: 3px blue;
}
.third{
width: 122px;
display: inline-block;
background-color: blue;
}
.four{
text-align: right;
}
.five{
text-align: center;
}
.six{
text-align: left;
}
.eleven {
width: 83%;
margin: 2 auto;
padding: 23px;
background: green;
}
.sam {
position: absolute;
right: 3px;
width: 303px;
background-color: yellow;
}
</style>
</head>
<body>
<divclass="sam">Siva</div>
<divclass="second">Raman</div>
<divclass="third">Arun</div>
<pstyle="color: #ffffff; background-color: #ff0000">Namer is: red, background-color is : blue</p>
<divclass="five">Sam</div>
<divclass="eleven">
<imgsrc="first.jpg"alt="centered image"/>
</div>
</div>
</body>
</html>
Output:
Example #2
Code:
<!DOCTYPEhtml>
<html>
<head>
<title>Welcome To My Domain</title>
<style>
.first {
padding: 12px;
width: 73%;
margin: 2 auto;
background-color:"#ffffff";
text-align: center;
color: rgb(105%, 0%, 0%);
border-radius: 1 2 52px 53px;
border: 2px yellow;
}
.second{
margin: 12px;
padding: 13px;
color: hsla(0, 105%, 50%, 0.5);
border: 3px blue;
}
.third{
width: 122px;
display: inline-block;
background-color: blue;
}
.four{
text-align: right;
}
.five{
text-align: center;
}
.six{
text-align: left;
}
.eleven {
width: 83%;
margin: 2 auto;
padding: 23px;
background: green;
}
.sam {
position: absolute;
right: 3px;
width: 303px;
background-color: yellow;
}
</style>
</head>
<body>
<divclass="first">Siva</div>
<divclass="second">Raman</div>
<divclass="third">Arun</div>
<pstyle="color: #ffffff; background-color: #ff0000">Namer is: red, background-color is : blue</p>
<divclass="five">Sam</div>
</body>
</html>
Output:
Example #3
Code:
<!DOCTYPEhtml>
<html>
<head>
<title>Welcome To My Domain</title>
<style>
.demo
{
color: orange;
color: #f00;
color: #ff0000;
color: rgb(253,0,0);
color: rgb(105%, 0%, 0%);
font-size:44px;
color: hsl(0, 100%, 50%);
}
.first {
padding: 12px;
width: 73%;
margin: 2 auto;
background-color:"#ffffff";
text-align: center;
color: rgb(105%, 0%, 0%);
border-radius: 1 2 52px 53px;
border: 2px yellow;
}
.third{
width: 122px;
display: inline-block;
background-color: blue;
}
</style>
</head>
<body>
<divclass="first">Siva</div>
<divclass="third">Arun</div>
<divclass="demo">Sam</div>
</body>
</html>
Output:
Conclusion
In CSS sheet the color is important contrast because it calculated the ratios for comparing the luminosities of the text based values with background-colors. The text is placed and inserted in the web pages in correct positions it does not affect the other contents like images and animations.
Recommended Articles
This is a guide to CSS Text Color. Here we discuss how does text color work in CSS along with appropriate syntax and respective examples. You may also have a look at the following articles to learn more –
