A Tutorial Series CSS for Beginners: Specifying CSS in Different Ways and the Resulting Cascading Order Impact
Goals for this Tutorial
The tutorials presented thus far in this series which began with the tutorial entitled, A Tutorial Series CSS for Beginners: Cascading Style Sheets - An Introduction have looked at a number of styling properties without addressing the "formal" structure of their inclusion in the HTML file and we have not really discussed the use of independent Cascading Style Sheets. This will be the major thrust of this tutorial. We will also try to reuse some of the attributes we have previously used as a way of review. We will also introduce some new styling elements to add to our "knowledge base".
Ways to Specify CSS Styling
There are three ways to specify CSS styling.:
- an external style sheet (which we have not used as yet)
- an internal style sheet which resides in the HTML file, and
- "inline" styling.
The following sections discuss each method.
Creating and Using an External Style Sheet
An external style sheet is a great way to create a uniform style for a large number of web pages and can be a way of avoiding problems and conflict in style if it is implemented for a group of web developers. One developer can be a controller and arbiter for the external file.
The way an external file sheet is created is with the use of a plain text editor such as Notepad++ which is completely free. It uses color to highlight language keywords, has line number features, and block beginning and ending recognition which can aid in identifying typos. There are other editors in the marketplace, some have 30-day free trial periods and they work with other languages as well (e.g. HTML, XML, etc.).
To specify a external stylesheet you must use a link in the <head> of the HTML document. The stylesheet should also be specified with the .css type.
The following is a simple example. In the .html file:
<head>
.......whatever precedes it, then the CSS link is specified........
<link rel="stylesheet" type="text/css" href="astylesheet.css" />
......whatever follows
</head>
The contents of the style sheet should be identical to what we have been placing in the internal <style> block in the HTML file. The style sheet should not contain anything other than CSS code or CSS comment. The CSS individual statements (if you remember consist of a selector, followed by a declaration contained in curly braces. Within the declaration, we have CSS properties separated from their values by a colon, and terminated by semi colon. Example:
h1 {color:red; font-family:"Times New Roman", Arial, serif; text-align: center;}
One thing to note about the declarations. They tend to be "space sensitive". Don't leave a space between the property value and unit. Certain terms must be enclosed in quotations (e.g. in out example "Times New Roman" and always end the declaration with a semicolon.
Example of an External Style Sheet
Internal Style Sheets
In our first couple of tutorials we used internal style sheets. The are placed in the HTML header and separated from other header items by <style> and </style> tags.
Using an internal style sheets is not always a bad practice. For example, you are styling a unique page or testing certain style properties They are a convenience. If however you end up having a large number of pages which should have more or less the same style, replicating the style in inline style sheets is not only redundant but also prone to error. Any "one offs" between the web pages are better handled with the use of an id or class attribute in a external style sheet implementation.
Inline Styles
With inline styles, you begin mixing content and style. They can be used effectively for testing different options, but then should really migrate to an internal style sheet or for large web sites to an external sheet. It does not take much styling to "dwarf" the HTML content. Consider a simple header tag, for which you want to specify font family, font size,color and centering the text. It becomes:
. <h1 style="color:#cceeff;text-align:center;font-family:'Times New Roman', Arial, serif;
font-size:40px>This is a paragraph.</h1>.
The content here is lost!
Cascading Order in Styling
From lowest to highest priority in applying styling to an element. One has
- browser (lowest priority) which is why we often write about "overriding the defaults"
- the external style sheet. If there are multiple external style sheets specified in the head of a document, the first external sheet is the lowest priority style sheet. The last external style sheet has the highest priority.
- the internal style sheet has higher priority than the external style sheet(s) with one exception. If the external style sheet definition follows that of the internal style sheet in the <header>, the external style sheet will supersede that of the internal sheet.
- the inline styling is the final arbiter. It has the highest priority.
Looking at the CSS Style Applied to a Page
A sure way of know what style is in effect on a page is to open the page in a browser and while in the window right click and select "Inspect Element". This works for any page. The following two snapshots illustrate the procedure.
In this case, borrowed from my JavaScript tutorials a change was made to the browser default CSS. Since the styling was changed by a script, it appears inline with the targeted HTML element. Notice on the right bottom corner, font-size show a "strike through". The value 1.5em has been overridden by the CSS value passed by the script.
An Example of Inspecting the CSS Styling Via the "Inspect Element"
CSS Impacts All Aspects of Page Layout
Rate This CSS Tutorial on its Content and Clarity
Wrap Up and What's Next
In this tutorial we covered the three ways of including CSS styling in a web page: an external CSS style sheet or sheets which are linked in via the <header> section of the HTML file; an internal style sheet which is included in the <header> section as well and delineated from other header sections by the <style></style> tags; and, inline styling, where the style attribute is insert within the relevant HTML tag.
The order in which the styling attributes are process was discussed as well. The browser has the lowest priority can can be overridden by the external style sheet. The external style sheet can be overridden succeeding external style sheets or the internal style sheet (with one exception noted above. The internal style sheet can be overridden by inline styling. The way to think of this is the "closer" the styling attributes are located to the target element, the greater the influence on the style imposed.
In our next tutorial we return to "unfinished business" of covering some basic styling: navigation lists, positioning of HTML elements, and understanding how fundamental of HTML and CSS interact.
