If you ever need to tweak the appearance of a page on your business website, you may have to modify Cascading Style Sheet code. Developers use CSS to set the size, color and other attributes of objects on a Web page. After creating a CSS class that defines these attributes, you can assign that class to a DIV or any other Web page object to make it use those attributes. For instance, if a class defines a width of 100 pixels, all DIVS referencing that class will be 100 pixels wide. You can override a DIV's CSS class definition by updating the DIV's HTML code.
- Open an HTML document containing a DIV that references CSS classes. A typical DIV might appear as shown below:
The content inside this DIV is blue
The DIV in this example references a CSS class named "backgroundBlue." When adding class references to a DIV, developers type the word "class," followed by an equal sign, and then the class name within quotation marks, as shown above. - Type the following style attribute after the DIV's class definition:style="background-color:red"Include a space before the word "style." If you added that style attribute to the DIV shown in the previous step, the code would appear as follows:
The content inside this DIV is blue
Developers refer to the style attribute you added as "inline style" because it resides inside an element's HTML code. If the backgroundBlue class in this example has a color attribute of blue, the inline style you add will override the one in the CSS class and make the DIV's background color red. To override an attribute that a CSS class defines, simply append a new inline style after the DIV's class definition. - Save the document and view it in your browser. The background of the DIV is now red.
