CSS From the Ground Up: Linked Style
While inline and embedded style are also considered part of CSS’s application hierarchy, grouped within “author styles,” it is the linked style sheet that gives designers and developers the utmost power over their work.
This power isn’t limited to design, of course. It also involves several other critical issues, as I’ll examine with you in detail in this installment of CSS from the Ground Up on DMXzone.
Linked Style within the Cascade
As mentioned in previous articles, there are three groups of style sheets: Browser, User, and Author styles. Browser styles are those styles that are defaults provided by the Web browser. If you don’t apply a style to some element, the default browser styles come into play. Browser styles take the least precedence over other styles.
On the other side of the fence, there’s user style, which is style created by a user. This is typically done for those individuals with accessibility needs that require they have high contrast or large fonts. User styles are typically the most powerful of all, due to the fact that they were intended for this kind of special need. In the middle we find the author styles, which are the styles we as authors create for our pages. Author styles include inline style, which controls the style of one element; embedded style, which controls the style of one document; and finally, linked style – the holy grail of CSS.
So why would I call linked style “the holy grail” of style sheets? Well, there are plenty of reasons. Let’s take a look at some of them.
Overview
Easy to Create and Implement
Linked style sheets are easy to create. They are simply external text files, given a .css extension, that you can then link any document – from one to one million or more – to that style sheet.
Go ahead and spark up Dreamweaver, and let’s create a linked style sheet. Many readers will have done this, so if you want to skip ahead that’s fine, but be sure to read the additional sections as to the power of linked style.
To create a link style sheet, follow these steps:
- Download the workfiles for this tutorial and place them in a workfolder on your desktop.
- Open the document linked-style.html in Dreamweaver by selecting File > Open, then browsing to the linked-style.html document and selecting OK.
- Working in Design view, highlight the header.
From the Design Panel’s CSS Styles pane, click the New CSS Styles icon. The New CSS Style dialog will open.
Coined "one of the greatest digerati" and deemed one of the Top 25 Most Influential Women on the Web, there is little doubt that in the world of Web design and development, Molly E. Holzschlag is one of the most vibrant and influential people around. With over 25 Web development book titles to her credit, Molly currently serves as Communications Director for the World Organization of Webmasters.
As a steering committee member for the Web Standards Project (WaSP), Molly works along with a group of other dedicated Web developers and designers to promote W3C recommendations. She also teaches Webmaster courses for the University of Arizona, University of Phoenix, and Pima Community College. She wrote the very popular column, Integrated Design, for Web Techniques Magazine for the last three years of its life, and spent a year as Executive Editor of WebReview.com.
See All Postings From molly holzschlag >>
Reviews
Be the first to write a review
You must me logged in to write a review.