CoderTools Web site

Methods of Applying CSS Styles to HTML Tags


There are a number of different ways to apply styles to html tags.


Example 1 Using the HTML style attribute:
    <p style="color:#ff0000; font-size: 12pt; font-style: italic;">
        Heading 1
Example 2: Using classes:
        p { color:#ff0000; font-size: 12pt; font-style: italic;}
    <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:
        p.style1 { color:#ff0000; font-size: 10pt; font-style: italic; }
        p.style2 { color:#ff00ff; font-size: 12pt; font-style: bold; }
    <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:
        <link rel="stylesheet" type="text/css" href="stylesfile.css" />

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).

12/16/2017 11:54:38 AM
Terms Of Use | Privacy Statement | Copyright 2006-2015 © Independence Software LLP