Welcome, Guest

Please login or register

TUTORIALS SUBMENU

PHOTOSHOP    FLASH    ILLUSTRATOR    BLENDER    CINEMA 4D    WEB-CODING    [SUBMIT]

Related Links

An Introduction to CSS

pages (2): 1 [2]


Section 3: IDs
IDs work in similar ways to classes, except that they can only be used once (whereas classes can be used multiple times). For this reason, you should stick with classes for most formatting, and only use IDs for unique properties. Another reason they exist is to allow you to incorporate Style Sheet models into JavaScript or DHTML. If you want to give IDs a whirl, here's how to use them:

The CSS:

#bigfont{ font-family:Arial, Helvetica, sans-serif; font-size:40px; }

The HTML:

<font id="bigfont">This is big text.</font>
  • '#' - All ID's are started with a # sign, instead of the '.' used by the class.
  • 'id="bigfont"' - Similar to the previous except now 'class' is replaced with 'id'.

The above example is valid coding, while this next example is not.

The CSS:

#bigfont{ font-family:Arial, Helvetica, sans-serif; font-size:40px; }

The HTML:

<td id="bigfont"> <font id="bigfont">This is big text inside a <td> with the same class applied.</font> </td>
 

Section 4: Linking to External CSS
Finally we get to the end. The last thing to know is how to actually use the stylesheet. Once you compile together all of your CSS into one file, save it with a .css extension.

Now go into your HTML document and add this line within your <head> tags:

<link rel="stylesheet" type="text/css" href="file.css" media="all" title="Your Title"/>

Replace 'yourfile.css' with the path to the CSS file and 'Your Title' with whatever you want to call your stylesheet.  And thats it!   For more detail on attributes and settings, try accessing a reference site such as W3Schools.  Enjoy your newfound skills!

- Tutorial written by Gus Mayo

Pages (2): <Prev 1 [2]
Automatic Translations: Translate Into French Translate Into German Translate Into Italian Translate Into Spanish Translate Into Portuguese

Last 5 User Comments

User:  robin746 (#27062)
Date: Tue May 02, 2006. 20:10:38

Post #1 of 1

This is a good tutorial to get people's feet wet in CSS. I like the layout but would suggest splitting lines at the semi-colon. Having one style per line really helps readability.

I have one criticism though in the example you choose, namely bigfont. Though technically valid it goes against the whole CSS concept of separating semantics from style. A designer should ask themselves why they want a font bigger. Normally this is because it marks a section, chapter, or some other structural entity. In this case, use the appropriate header tags (H1, H2, H3...). That's what they are for!

This not only saves having to define your own class, but it provides consistent information for screen readers, search engines, and other non-visual browsers of your page.

I never use the HTML font tag. It's presence is generally a good indication that the design is wrong.

Reply to this post


--- View Entire Thread ---
Amazing Font Pack!

Featured Tutorialsmore

Soft Bevelling
Soft Bevelling
- Adobe Photoshop -
Thick Diagonal Lines
Thick Diagonal Lines
- Adobe Photoshop -
Justify Text Manua...
Justify Text Manua...
- Adobe Illustrator -
Imageready Interfa...
Imageready Interfa...
- Adobe Photoshop -
Membership

Username:
Password:  
Remember Me

Lost Password? || Register

Related Links



Special Options
Printer Friendly Version
Forum Threads

 Deactivate Account
Author: jerinian
Posted: Oct 02nd, 11:16am
Activity: 1 replies, 890 views
 changes....
Author: supertackyman
Posted: Sep 12th, 2:56am
Activity: 2 replies, 1055 views
Back again and with free webhosting :)
Author: ngz
Posted: Aug 14th, 3:50pm
Activity: 0 replies, 1055 views
Cartoon Crab 6 Legs Walk Run created in Blender
Author: patricia3d
Posted: Jun 19th, 12:58pm
Activity: 0 replies, 1938 views
HTML Form Post Array to PHP
Author: Space Cowboy
Posted: May 25th, 2:18pm
Activity: 0 replies, 1834 views
My blog where i create Digi Scrapbook
Author: claudya07
Posted: May 11th, 2:33pm
Activity: 0 replies, 14444 views
Blood Dripping from Letters
Author: patricia3d
Posted: Apr 05th, 3:37am
Activity: 0 replies, 2757 views
A New Designer has joined the ranks
Author: skates1
Posted: Mar 28th, 2:19pm
Activity: 2 replies, 2777 views
The hole in Photoshop
Author: Mars
Posted: Feb 13th, 9:28pm
Activity: 2 replies, 3442 views
Colour Swatch
Author: ebz7350
Posted: Jan 15th, 11:18am
Activity: 0 replies, 2357 views
 BioRUST Forums - Reply to Topic
Author: inonShozy
Posted: Jan 11th, 11:32am
Activity: 8 replies, 2500 views
 Version 2 of my portfolio site.
Author: andrewnleon
Posted: Jan 08th, 6:18am
Activity: 6 replies, 2800 views
Forum Threads

--- Site Resources ---
Total Tutorials:212
Total Downloads:    441
Total Fonts:    4673