Most of us are familiar with the use of HTML tags as a means of formatting our pages. For example we can use this tag:
Arial 12 point
to create Arial 12 point text, whether we apply it by hand or using FrontPage.
However individually applying styles to each element of your page in this way is laborious, prone to error and creates bulky code. There is another way: welcome to CSS, Cascading Style Sheets!!
What is a style sheet?
Print publications such as newspapers and magazines have long used style sheets - sets of rules governing page formatting, typefaces, nature of headlines etc - to give them a consistent and coherent appearance. Similarly in HTML documents style sheets can control text formatting, colors, image placement and a myriad of other features that determine how our pages look.
Why Bother with them?
1) Consistency: Style sheets are easy to construct and can be readily applied to all the pages in your site, ensuring continuity of style throughout.
2) Convenience: If you have used style sheets to format your pages making changes to the format of your entire site, or to individual pages, can be as simple as making a small alteration to your style sheets or the way in which they apply.
3) Consideration: Style sheet rules can be applied in a manner that allows viewers to see your site in a way that suits them. We will look at this in more detail later.
4) Compulsion!: the use of inline tags to define style – such as the tag example given above – will in the future be deprecated and we will be required to use style sheets to format our pages, so we may as well start now.
What about Browser Compatibility?
Many people are put off using style sheets because they have heard or read about poor cross browser support for them. While it is true that there are differences in the degree and nature of support given to CSS, it is also true that very many features enjoy full cross browser support and in many other cases it is possible to find work rounds.
As with all other of web design the trick is in knowing what browsers will do with your code and then applying it accordingly. Throughout this series of tutorials we will look at the issue of browser compatibility wherever it is a consideration.
CSS Basics
For the moment let's forget about how style sheets are structured and just have a look at how they are applied.
There are three different ways to apply style sheets:
1. Inline Styles
You can apply a style to any individual html tag in a page. This is something you already do to some degree all the time. For example, you can easily change the text colour of an individual paragraph in your page. In so doing you are applying a style to that portion of the page – or an ‘Inline Style’.
2. Embedded Style Sheets
An embedded style sheet controls the formatting of an individual page. The Style Sheet is placed between the and tags.
If you have used FrontPages facility to apply a ‘rollover effect’ to text links you will have placed an embedded style sheet in the head of your document which will look something like this:
This causes your hyperlinks, when in the hover state, to appear red and bold.
In the case of CSS the effect it the same but formatting is a little different and the same style sheet would look like this:
3. Linked Style Sheets
This is where the real power of style sheets is found. You can create a stand alone set of instructions for how things should appear on your page – a Style Sheet - and then link it to as many pages of your site as you wish.
This single style sheet will control the appearance of all the pages and making a change to it will affect all pages at once.
What about the ‘Cascading’ bit?
This is a term that seems to cause an immense amount of confusion but really need not do so. The thing to remember is that you can use each of the three different types of style sheet, as defined above, in the same web site. Which one will be applied in any situation is governed by a set of priorities:
- In line styles take precedence
- Embedded styles come next
- Where neither an inline not an embedded style is used
the linked style will apply
This is referred to as the ‘cascade’.
Let's look at it another way. Suppose you have a web site that includes a style sheet to which all pages are linked, giving it a nice professional and consistent appearance. But you have a single page that you want to appear radically different from the others. You can simply place an embedded style sheet in the head of this page and that style sheet will override the linked one on that page.
Now you look at this page and it is fine – except for one small section that, again, you would like to appear in a different format. Simply apply an inline style and this will, in turn, over ride the embedded one. Hurrah! Your style sheets are cascading!!
No comments:
Post a Comment