Now that you know how classes, IDs, and element tags can be used as hooks for CSS rulesets, how can you best implement this knowledge to write markup that makes it easy to poinpoint specific elements?
- Apply classes liberally and consistently. Use classes for items that should be aligned in one direction or the other, and for any elements that appear repeatedly on a single web page.
- Apply IDs to items that appear only once on a web page. For example, use an ID on the
divthat contains your web page content, on theulthat that contains the navigation menu, and on thedivthat contains your web page header.
Ways of Linking CSS Rules to an HTML Document
There are three ways of adding CSS rules to a web page:
- Inline styles
- Internal stylesheets
- External stylesheets
In the vast majority of cases, external stylesheets should be used. However, there are instances where inline styles or internal stylesheets may be used.
Inline Styles
Inline styles are applied to specific HTML elements. The HTML attribute style is used to define rules that only apply to that specific element. Here’s a look at the syntax for writing inline styles.
<h1 style="color:red; padding:10px; text-decoration:underline;">Example Heading</h1>
That code would cause just that heading to render with red underlined text and 10 pixels of padding on all sides. There are very few instances where inline styles should be used. In nearly all cases they should be avoided and the styles added to a stylesheet.
Internal Stylesheets
The earlier examples in this tutorial make use of internal stylesheets. An internal stylesheet is a block of CSS added to an HTML document head element. The style element is used between the opening and closing head tags, and all CSS declarations are added between the style tags.
We can duplicate the inline styles from the code above in an internal stylesheet using this syntax.
<head>
<style>
h1 {
color: red;
padding: 10px;
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Example Heading</h1>
</body>
That code would produce the same results as the inline styles. However, the benefit to using internal stylesheets rather than inline styles is that all h1 elements on the page will be affected by the styles.
External Stylesheets
External stylesheets are documents containing nothing other than CSS statements. The rules defined in the document are linked to one or more HTML documents by using the link tag within the head element of the HTML document.
To use an external stylesheet, first create the CSS document.
/*************************************************
Save with a name ending in .css such as styles.css
*************************************************/
h1 {
color: red;
padding: 10px;
text-decoration: underline;
}
Now that we have an external stylesheet with some styles, we can link it to an HTML document using the link element.
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Example Heading</h1>
</body>
When this HTML document is loaded the link tag will cause the styles in the file styles.css to be loaded into the web page. As a result, all level 1 heading elements will appear with red text, underlined, and with 10 pixels of padding applied to every side.
When to Use Each Method
In nearly all cases external stylesheets are the proper way to style web pages. The primary benefit to using external stylesheets is that they can be linked to any number of HTML documents. As a result, a single external stylesheet can be used to define the presentation of an entire website.
Internal stylesheets may be used when designing a simple one-page website. If the website will never grow beyond that single initial page using an internal stylesheet is acceptable.
Inline styles are acceptable to use in two instances:
- When writing CSS rules that will only be applied to a single element on a single web page.
- When applied by a WYSIWYG editor such as the tinyMCE editor integrated into a content management system such as WordPress.
In all other cases, inline styles should be avoided in favor of external stylesheets.
