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

Style sheets can become very complex of large and interactive web site. This example is merely an snippet of one page.
Style sheets can become very complex of large and interactive web site. This example is merely an snippet of one page.

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"

Right click anywhere in the web page displayed and select "Inspect element".
Right click anywhere in the web page displayed and select "Inspect element".
Bring into focus the element of interest, in this case the header element whose color was changed. Compare it with the CSS found in the bottom right hand corner.
Bring into focus the element of interest, in this case the header element whose color was changed. Compare it with the CSS found in the bottom right hand corner.

CSS Impacts All Aspects of Page Layout

Margins, padding, and borders are set via CSS attributes. CSS determines the layout of  a page. We will look at the method of laying out "box models" for pages in  future tutorials.
Margins, padding, and borders are set via CSS attributes. CSS determines the layout of a page. We will look at the method of laying out "box models" for pages in future tutorials.

Rate This CSS Tutorial on its Content and Clarity

Cast your vote for Was this tutorial clear and complete?

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.

More by this Author


1 comment

aesta1 profile image

aesta1 2 years ago from Ontario, Canada

I am beginning to understand CSS by reading your article and hope to read more to understand it better. Thanks for writing on this.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working