What is HTML Styles ?
Cascading Style Sheets (CSSs) describe how documents are printed or displayed on the screens. Since the consortium was founded in 1994, W3C has actively supported the application of style sheets on the Web. A number of HTML Attributes and tags have become obsolete if the style attribute is added into HTML with CSS. Handling fonts and HTML colours, instead of stacking bulky formaatting tags inside each other, is now accomplished by using CSS styling.
Example:
<!DOCTYPE html>
<html>
<body>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>
</body>
</html>
Output:
You can use CSS in three ways in your HTML document
External Style Sheet
Define style sheet rules in a separate .css file and then include that file in your HTML document using HTML <link> tag.
Internal Style Sheet
Define style sheet rules in header section of the HTML document using <style> tag.
Inline Style Sheet
Define style sheet rules directly along-with the HTML elements using style attribute.
See all three cases with appropriate examples one by one.
External Style Sheet
You always recommend that you define a common style sheet in a separate file when using your style sheet in various pages. Cascading style is an extension in the form of.css and is included with < link > tag in HTML files.
Example:
Consider we define a style sheet file style.css which has following rules:-
.red {
color: red;
}
.thick {
font-size:20px;
}
.green {
color:green;
}
Here we defined three CSS rules which will be applicable to three different classes defined for the HTML tags. I suggest that you don't bother how these rules are defined because while you are studying CSS, you will learn them. Now let's make use of the above external CSS file in our following HTML document:-
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML External CSS</title>
<link rel = "stylesheet" type = "text/css" href = "/html/style.css">
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
</html>
Output:
Internal Style Sheet
If you want to apply Style Sheet rules to a single document only, then you can include those rules in header section of the HTML document using <style> tag.
Rules defined in internal style sheet overrides the rules defined in an external CSS file.
Example
Let's re-write above example once again, but here we will write style sheet rules in the same HTML document using <style> tag:-
<!DOCTYPE html>
<html>
<head>
<title>HTML Internal CSS</title>
<style type = "text/css">
.red {
color: red;
}
.thick{
font-size:20px;
}
.green {
color:green;
}
</style>
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
</html>
Output:
Inline Style Sheet
Using style attributes of the corresponding tag, you can directly apply sheet rules to any HTML element. This should only be done if you want to modify any HTML element in particular.
Rules defined inline with the element overrides the rules defined in an external CSS file as well as the rules defined in <style> element.
Example
Let's re-write above example once again, but here we will write style sheet rules along with the HTML elements using style attribute of those elements.
<!DOCTYPE html>
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style = "color:red;">This is red</p>
<p style = "font-size:20px;">This is thick</p>
<p style = "color:green;">This is green</p>
<p style = "color:green;font-size:20px;">This is thick and green</p>
</body>
</html>
Output:
The HTML Style Attribute
Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax:
<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.
HTML Text Color
The color property defines the text color for an HTML element:
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Output:
