The Original Web-Wise-Wizard
Web Authors, Web Developers and Webmasters Internet Toolbox
Best viewed at 1024 x 768 using a colour depth greater than 256

Applying CSS Styles

This page has been tested and conforms to WCAG 2.0 Accessibility Guidelines

Subjects Covered ...

This basic CSS primer starts by discussing the three different methods that you can use to apply styles to HTML Markup, inline styles, style tags and style sheets. It then moves on to discuss the methods of applying styles using TAG, CLASS and ID. Finally, it shows how you can import style sheets and gives example reasons as to why you might want to use this feature. All the examples on this page are cross-browser compatible (v5 browsers onward) and we have tested the styles in the more recent versions of Microsoft, Mozilla, Firefox, Opera and Netscape browsers. The example Markup meets the W3C 'HTML 4.01 Strict' criteria and will validate to that standard.

Three Different Methods ...

This page explores the different ways in which you can apply CSS (Cascading Style Sheet) styles to HTML Markup. The examples shown here depict styles being applied to an DIV Tag and if you study the Markup carefully, also to an IMG Tag that is wrapped inside the DIV Tag, but CSS styles can be applied to a wide variety of other HTML tags as well. There are three ways to apply CSS styles to a tag and the following examples examine each method in turn.

These examples show three different ways to achieve a similar result but they include some hidden learning so you should study each example carefully and understand what is happening before proceeding to the next example.

1. CSS Inline Style

In this example the styles are contained in the Style Attribute of both the DIV and IMG Tags ...

<div style="text-align:left;">
<img src="drstyle-1.gif" alt="CSS Inline Style" width="250" height="250" style="display:block;margin-right:auto;border:1px solid #006600;">
</div>
CSS Inline Style

2. CSS Style Tag

In this example the styles are contained in the STYLE Tag, located in the HEAD section of the page ...

<style type="text/css">
<!--

#drStyle2 {
text-align:center;
}

#drStyle2 img {
display:block;
margin:auto;
border:3px double #006600;
}

-->
</style>

which can make life an awful lot easier when it comes to creating the Markup ...

<div id="drStyle2">
<img src="drstyle-2.gif" alt="CSS Style Tag" width="250" height="250">
</div>
CSS Style Tag

3. CSS Style Sheet

In this example the CSS instructions are contained in an external 'style sheet', a separate file which is loaded using the LINK Tag ...

<link rel="stylesheet" type="text/css" href="../css/myStyles.css">

The 'myStyles.css' file is an ordinary ASCII text file which could contain the following ...

<--

#drStyle3 {
text-align:right;
}

#drStyle3 img {
display:block;
margin-left:auto;
border:4px double #006600;
}

-->

The HTML Markup is the same or similar to the Markup for the STYLE Tag ...

<div id="drStyle3">
<img src="drstyle-3.gif" alt="CSS Style Sheet" width="250" height="250">
</div>
CSS Style Sheet
 

Applying Tag, Class and ID ...

If we leave aside styles that are applied directly to an HTML Tag, there are three primary ways that you can apply styles to the Tags in your page Markup.

<style type="text/css">
<!--

/* THIS STYLE WOULD APPLY TO EVERY PARAGRAPH TAG ON THE PAGE */
/* NOTE THAT THEIR IS NO IDENTIFIER IN FRONT OF 'p' */ 
p {
font-family:Arial,Helvetica,sans-serif;
font-size:10pt;
}

/* THIS STYLE WOULD APPLY TO EVERY TAG THAT CONTAINED THE ATTRIBUTE class="redText" */
/* NOTE THAT THE CLASS IDENTIFIER IN FRONT OF 'redText' IS A PERIOD (FULL STOP) */
.redText {
color:red;
font-weight:bold;
}

/* THIS STYLE WOULD APPLY TO THE ONE TAG THAT CONTAINED THE ATTRIBUTE id="uncleFred" */
/* NOTE THAT THE ID IDENTIFIER IN FRONT OF 'uncleFred' IS A HASH ('#') */
#uncleFred {
margin-right:20px;
border: 2px outset #999999; 
}

-->
</style>
Applying Styles to Tag, Class, ID

Importing Style Sheets ...

It is not the intention of this section to provide you with a full tutorial about importing style sheets, only to inform you about the difference between loading external style sheets and importing external style sheets. The following two Markup examples demonstrate the difference between loading and importing style sheets.

Example Markup for a LINK Tag that loads an external style sheet ...

<link rel="stylesheet" type="text/css" href="../css/color-scheme-1.css">

Example Markup for a STYLE Tag that imports an external style sheet ...

<style type="text/css">
<!--

@import "../css/color-scheme-2.css";

-->
</style>

When you first start using external style sheets you will probably use the first method, the LINK Tag, to load your style sheets and this method works perfectly well. You might well reflect that if this first method works well then why do we need to be able to import style sheets as well. I have seen many reasons put forward as to why we would want to import style sheets, many of which are laudable and some which are not so laudable but instead of listing these reasons I am going to provide you with an example that I consider to be a laudable reason and I hope to introduce on this Website at some stage in the future.

It is a little known fact that in developed countries approximately ten percent of the population are color blind or partially color blind and another ten percent of the population have a dyslexic learning style (an impaired ability to comprehend written words). Both these groups are made up of individuals and these individuals have a range of different problems, different requirements and require different solutions.

There is one feature, that if provided on a Website, would help a large percentage from both these groups to better use a Website and that is to provide different color schemes for the site. Imagine a scenario where there was a small FORM box located near the top of each page and this FORM box allowed the user to select a color scheme from a range of four color schemes. Details of the selected color scheme would be saved as a Cookie on the users hard-drive and the appropriate style sheet would then be imported, resulting in the page being displayed using the new color scheme.

Every time the user loaded a new page from the site, the page would read the Cookie stored on the users hard-drive and import the appropriate style sheet for that user. Fanciful maybe, but I intent to introduce this facility on this site, time permitting, in the near future.

Importing CSS Style Sheets
 
 
+++ Curbing Computer Power +++
If computers get too powerful, we can always organize them into a series of committees -- that will certainly do them in.
 

Link Directly To This Page ...

help support free information on the Internet ...

Many users prefer to link directly to individual content pages on Web-Wise-Wizard. If you would like to do this then we have provided the following HTML/CSS link script which you can copy and paste directly into your HTML editor. Alternatively, you might like to use our New Dynamic Link Generator to create a link that more fully meets your own particular requirements.

the link displayed ...

Web-Wise-Wizard - Applying CSS Styles This basic CSS tutorial explains the three different methods that you can use to apply styles and formatting to HTML Markup, inline styles, style tags and style sheets. Ideal for beginners.

select/copy the link Markup ...

Featured Tutorial
Want More Traffic? Increase your Link Popularity and your PageRank by learning how to use Web Directories
Link To Us Scripts
New Dynamic Link Generator
 
If you find this page interesting or useful then others are likely to view it in exactly the same way. Providing a link to the page will be considered by the search engines as casting a vote for the page. In turn, this will help to improve the search engine ranking of the page resulting in more people being able to see the page. Your link really does count so please don't delay.
 
Post your link NOW!
 
 
Applying CSS Links
 
 
 
Copyright © 1998,2008, Gilbert Hadley, Liverpool, England