CoderTools Web site

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>

TotalEdit Now Completely Free

CoderTools TotalEdit - The Free Text Editor

A powerful editor and notepad replacement TotalEdit makes it easier to complete your file editing and software development tasks. TotalEdit is FREE for commercial and non-commercial purposes (its freeware).

8/19/2017 6:53:13 PM
Terms Of Use | Privacy Statement | Copyright 2006-2015 © Independence Software LLP