- Prefer Styles to HTML Tags
- Encapsulate Styles
- Use Cascading Wisely
- Coding Style
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Use Cascading Wisely
Understanding CSS's hierarchical scope of effect—the cascading in Cascading Style Sheets—is vital for using CSS effectively.
Encapsulate Application Global Styles in External Files
The highest level in the hierarchy is the encapsulation of global styles in external files. This is most appropriate for styles that will apply to multiple pages in an application or to multiple applications. The Web developer should plan the organization of styles into external files with an eye toward efficiency.
When planning what styles to put in each external file, make it a practice to maintain related styles together. For example, all styles that are used to implement a dynamic menu system might be located in the same file. Care should be taken not to store many styles in the same file if only a few are used in any given application. Even if a given page does not use a style defined in a linked file, it still must be downloaded and parsed by the browser, causing unnecessary processing.
As demonstrated by Listing 3, a document can link multiple style sheets at once. If more than one style sheet specifies a value for the same attribute of an element, the last one encountered by the browser will apply.
Listing 3: Multiple Style Sheets Specified
<html> <head> <title>Stylesheet Example</title> <link rel="stylesheet" href="MenuText.css"> <link rel="stylesheet" href="HoverEffects.css"> <link rel="stylesheet" href="DataTable.css"> </head>
Override Page-Level Styles with Style Sheets in <head> Section
Styles that apply only to the elements in a single page could also be encapsulated in a .CSS file. However, if the Web developer needs to override a global style for a single page, the new style can be placed in the <head> section using the <style> tag. For example, Listing 4 is an external style sheet that specifies a global default style for table cells. The page in Listing 5 overrides this global default with a page-level embedded style in the document's <head> section.
Listing 4: Contents of ExStyles.css
TD {
font-family : Verdana;
font-size : 22pt;
font-weight : Bold;
text-align : Center;
color : DarkKhaki;
background-color : FireBrick;
}
Listing 5: Overriding the Style Sheet ExStyles.css in the Head Section
<html>
<head>
<title>Stylesheet Example</title>
<link rel="stylesheet" href="ExStyles.css">
<style>
TD {
font-family : Verdana;
font-size : 22pt;
font-weight : Bold;
text-align : Center;
color : DarkKhaki;
background-color : DarkBlue;
}
</style>
</head>
Styles are not all-or-nothing. Listing 6 shows the code for yet another HTML page that uses the global default style sheet. In this case, the developer needed only to override a single attribute of the global style for the <td> element; the other attributes will apply as defined in the external sheet.
Listing 6: Overriding Just the Attributes Desired
<!doctype html public "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>Stylesheet Example</title>
<link rel="stylesheet" href="ch6styles3.css">
<style>
TD {
background-color : DarkBlue;
}
</style>
</head>
Use Inline Styles Minimally
At the lowest level of scope is the inline style. Inline styles use the style attribute-value pair of an HTML element to specify formatting that applies only to that element and elements contained by it. The attribute value for the style attribute is a string containing the attribute-value pairs that define the style (see Listing 7). Inline styles can be used to override default styles for a special case or even to dynamically alter the style properties of elements at runtime using a client-side script.
Listing 7: Inline Style Specification
<p id="AlertNotice"
style="font-size:8pt;color:White;
background-color:DarkBlue;border-color:White">
The system will be down 1/1/2001, from 2:00 AM to 4:00 AM
</p>