Home arrow Style-Sheets arrow Page 3 - What is CSS?

Placement of CSS Elements - Style Sheets

Style sheets are a very powerful tool for the Web site developer. They give you the chance to be completely consistent with the look and feel of your pages, while giving you much more control over the layout and design than straight HTML ever did.

TABLE OF CONTENTS:
  1. What is CSS?
  2. CSS Syntax
  3. Placement of CSS Elements
  4. Cascading - What Does it Mean?
  5. Your First Style Sheet
By: Marc Knuttel
Rating: starstarstarstarstar / 93
May 17, 2004

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

Style sheets can be place in three places in a document, in the <head>, in an external file, or within an individual tag. Style calls placed within an individual tag will only affect that tag, while other style calls affect the entire page or any page that loads the style sheet. For the above example, while the demonstration showed a style call used within a style sheet created either in the head of the document or on another page, the actual style use was within the H4 tag itself. For example:

<h4 style="color: #0000ff;">another blue headline</h4>

Creating styles as an attribute of a tag is a quick way to generate the style you would like without impacting your entire page. One common way this is used is to hide random links throughout the page. For the links you would like hidden, you would give them a style of "text-decoration: none". For example:

This link has the default decoration

This link, while still a link, is not underlined and has a color of black.

(Editor's note: The above two lines are not links.) 

To create a style sheet within the header of your HTML document, you enclose it in <STYLE> tags. It is a good idea to define the mime type of the styles you are creating (usually text/css), and then to put the style rules within comment tags so that older browsers do not display them as text on the page. For example:

<head>
<style type="text/css">
<!--
H4 { color: blue; }
-->
</style>
</head>

Finally, you can create a separate document with all of your style information in it and either link or import it into your document. If you have a large site and would like to maintain consistency across it, then external style sheets are the way to go. They provide you with a simple way to dictate how all instances of various tags will be displayed.
 
Linking a Style Sheet

The benefit to linking a style sheet into your document is that it is supported by both the major 4.0 browsers. You call a linked style sheet like this:

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

Importing a Style Sheet

Importing style sheets are only currently supported by Internet Explorer 4.0. They allow you to keep all your style information in the same place, within the <style> element, while also loading external files as style commands. For example:

<style>
@import URL (
http://yoursite.com/stylesheet.css);
H4 { color: #0000ff; }
</style>



 
 
>>> More Style-Sheets Articles          >>> More By Marc Knuttel
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

STYLE-SHEETS ARTICLES

- What is CSS?
- The Power of CSS
- Understanding Style Sheets (part 2)
- Understanding Style Sheets (Part 1)

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: