Methods of Applying CSS Styles to HTML Tags
Description
There are a number of different ways to apply styles to html tags.
Examples
Example 1 Using the HTML style attribute:
<p style="color:#ff0000; font-size: 12pt; font-style: italic;">
Heading 1
</p>
Example 2:
Using classes:
<style>
p { color:#ff0000; font-size: 12pt; font-style: italic;}
</style>
<p>Heading 1</p>
Heading 1
Example 3
For example you might not want all p tags to have the
same formatting. You can do this by using the class attribute:
<style>
p.style1 { color:#ff0000; font-size: 10pt; font-style: italic; }
p.style2 { color:#ff00ff; font-size: 12pt; font-style: bold; }
</style>
<p class="style1">text paragraph 1</p>
<p class="style2">text paragrapg 2</p>
Example 4
Use an external file to contain all the style commands. Then use the <link> tag to let the browser know to load the file. Here is the code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesfile.css" />
</head>
<body>
</body>
<html>