An Electronic Essay by Paul Briggs.

A Beginners Guide to Cascading Style Sheets - Why and How?

Quick Index

5). Points to Note!

CSS Tags: Cascading Style Sheet Tags were developed to not only improve the way in which the user could position displays on a page, but also to run alongside older browsers in such a way that the new code would simply be ignored. This means that although the page will look less effective to the older browser, it will appear in a more "up to date" manner in the newest browsers. With CSS it is possible to set margins inplace within a page and position text to the pixel! We will see how the user can build their own custom style sheets and what kind of tags are used. I will look at inheriting styles and examine the benefits of such a system. I have chosen to look at these points in more detail in order to give a beginners guide to CSS. I also hope that the table at the end of the essay is an adequate way to display all the different tags as I think they are pretty much self-explanatory.

As I mentioned above, CSS give the user much greater control over the positioning of text and images within an HTML page. It also allows you to create a "style sheet", a style sheet allows you to set a number of conditions and then save it. This sheet can then be called upon to come into play on any other sheet you have created.

For example: You could create a style sheet that specified the margins and positioning of text and images for headings, and then call upon it (or IMPORT it) and use the style specified within the style sheet.

Format of CSS Extensions

CSS definitions follow a standard format that you can read about in much greater detail at W3C. But for those of you that have never heard of CSS I will attempt to explain it. Look at the code below.

          TAGNAME {property-to-alter: value}

So if we give that some real-life attributes we may see;

          P {color: red}

Now, once that is set you can wrap text in the P tags. Any text will now take on the appearence of the stated P tag (ie. it would be red).

The obvious advantage of this is that if you require all your text that is surrounded by the P tags to change to green, then you need only change the P tags to equal green. The entire page will then update automatically without having to go through all the desired changes one by one. When you start to write more complex tags you can imagine the benefits to be had, especially with co-ordination of your pages.

You can also apply this to multiple tags, ie.

          P, H1, H3 {color: #00ff00}

would set paragraphs, H1 and H2 headings to green.

We can also specify more than one attribute;

          P {color: green; font-size: 28pt; font-family: arial}

notice the use of semi-colons and colons within the text as this is important.

Inheriting Styles

Say, for instance, you had an opening FONT tag and had not yet closed it, you could use the P tag ,as we defined it earlier, and this would render the text in between them as green. This would still be the case even if the FONT tag specified blue. Therefore we could say it supercedes the original tag which again can prove useful if your text is mainly one type with the odd little change here and there. You can also combine commands like below:

          P {font-size: 14pt};
          B {font-size: 350%}
   
          and then another P but notice the colon

          P: {font-family: "jurassic"; font-size: 60 pt}

This set up would allow us to use the P tag normally as well as the B tag but if we encountered a B tag within a P tag then the second P: tag will be used this is usful for a number of reasons including possible clashes in Tags (ie. both define FONT at different values.

Once you have decided upon the styles that you wish to use you can go about the operation in three ways.

You can use the LINK tag which might look like the following

        LINK REL=STYLESHEET TYPE="Headings/css" 
        HREF="http://myserver.com/~me" TITLE="myheadings"

Style Tags.....this is just inseting an opening and closing STYLE tag placed in the header (HEAD TAGS) then all your desired tags in between. The obvious disadvantage in this is that you have to define styles for each page instead of calling on one style sheet to do all the work for you.

Import...lets you put a line in between the STYLE tags such as;

 
          @IMPORT URL("http://myserver.net/style.css")

However, it is important to remember that if you have defined P in the CSS you are importing as COLOR="GREEN" then this will supersede any other P commands you have used. There is a way round this for one off instances;

          P STYLE="FONT-FAMILY:jurassic; COLOR=red"

Now just for the scope of the text in between this tag and its' ending one we will see red jurassic font text.

Classes

Now lets take a look at setting up classes.

          P {font-size: 19pt; font-family"ARIAL"}
          P.smaller{font-size: 14pt}

If we use the P tag it will render 19 pt fonts in green, however, if we use the P class="smaller" tag we will get the font shrinking to a 14pt. The good bit is that it will still inherit the ARIAL font from its parent. This technique can be used as many times as you like so you could set up a whole system of design tags that are unique to your site.

Point to Note!

Older browsers do not recognise CSS commands and therefore ignore them, which is the way they were designed. However, some browsers will therefore display any tags it sees, that it does not recognise, as text. The way round this is to enclose the commands you set at the top of the page or on your seperate style sheet in COMMENT tags so that the older browsers will just ignore them completely. Obviously the newer browsers still recognise the commands within the comments tags.

I hope I have explained the basics in an easy to understand way but if you disagree (or agree) please e-mail me and let me know. You can also e-mail me from the "Main Menu" or "About this Web Page". As I mentioned earlier W3C has a comprehensive explanation of all this and much more. I am restricted in my explanations by the word limit set upon this essay but hope I have covered the basics.

For those interested in seeing CSS at work but whose browsers will not allow it, visit either Microsoft or Netscape for the latest versions of their browsers.

Useful CSS Tags

Back to top of page.

I have included this table too save space. It lists many CSS commands. As long as you understand what I have written above you should be able to use these tags with little difficulty. More and more people use this style and I feel it is particulaly useful to those who work within the web and need to coordinate pages or need to save time. Any business will benefit from this type of web design as branding features heavily in any companies life. CSS is perfect for retaining set "models" on style sheets that can be imported to any page to instantly transform it to the desired style.

font-family	lets you define the font face used.
font-style	text style can be normal, italics or oblique
font-variant	small or normal-caps
font-weight	defines the weight of a font
font-size	define the size of a font
font	allows you to group the above in one tag
color	defines the colour of an individual element
background-color	sets the background colour of an individual element
background-image	enables the user to select a background image
background-repeat	defines the way in which the background is repeated within the browser window
background-attachment	allows the background to be fixed in the browser or to scroll with the contents
background-position	allows the position of the background to be set
background	allows any or all of the above to be defined as a collection
word-spacing	set the spaces between words
letter-spacing	set the spaces between letters
text-decoration	allows decorative effects including underline and bold to be added to text elements
vertical-align	affects the vertical positioning of an element
text-transformation	set text to upper or lower case
text-align	align text either center, right or left
text-indent	sets the indentation between the left margin and the first character of a text block
line-height	the vertical distance between text lines
margin-top	sets the top margin of an element
margin-right	sets the right margin of an element
margin-left	sets the left margin of an element
margin	allows any or all of the above to be defined as a collection
padding-top	sets the top padding of an element
padding-right	sets the right padding of an element
padding-botom	sets the bottom padding of an element
padding-left	sets the left padding of an element
padding	allows any or all of the above to be defined as a collection
border-top-width	sets the width of an elements top border
border-right-width	sets the width of an elements right border
border-bottom-width	sets the width of an elements bottom border
bottom-left-width	sets the width of an elements left border
border-width	allows any or all of the above to be defined as a collection
border-color	allows the colour of an element border to be defined
border-style	sets the style of the four borders
border-top	sets the style of the top border
border-right	sets the style of the right border
border-bottom	sets the style of the bottom border
border-left	sets the style of the left border
border	allows any or all of the above to be defined as a collection
width	allows elements to be scaled along the horizontal axis
height	allows elements to be scaled along the vertical axis
float	allows graphic elements to be placed so accompanying text flows around them

Back to top of page.

This page has been designed by Paul Briggs I am currently an undergraduate at Northumbria University in Business Systems and Information Technology This page and all of the contents contained within can be used by anyone for anything at all.....ok?

An Electronic Essay by Paul Briggs.

A Beginners Guide to Cascading Style Sheets - Why and How?

Quick Index

1). CSS Tags

2). Format of CSS Extensions

3). Inheriting Styles