| 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>
|
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
| 
|
|
|
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 ---
|
|
 |
|
|
php, shoutbox problems
Author: vanhansen
Posted: Nov 17th, 1:30am
Activity: 5 replies, 105 views
| | MarkupGeeks Logo
Author: ahstanford
Posted: Nov 16th, 8:45pm
Activity: 13 replies, 196 views
| | Drawing Tutorials
Author: ahstanford
Posted: Nov 16th, 12:46am
Activity: 0 replies, 118 views
| | Superbowl predictions, anyone?
Author: ahstanford
Posted: Nov 15th, 10:46pm
Activity: 10 replies, 166 views
| | Photomanipulation Footsteps
Author: ahstanford
Posted: Nov 15th, 10:43pm
Activity: 4 replies, 118 views
| | Learning to draw...
Author: ahstanford
Posted: Nov 15th, 12:43pm
Activity: 4 replies, 134 views
| | Looking for simple UI elements
Author: FenixRoA
Posted: Nov 15th, 6:40am
Activity: 7 replies, 123 views
| | HDD Help?
Author: Phoenix Wynde
Posted: Nov 13th, 2:31am
Activity: 1 replies, 124 views
| | Fun New Battles Posted!
Author: ahstanford
Posted: Nov 11th, 7:33pm
Activity: 0 replies, 155 views
| | 4-man Simon Tournament
Author: ahstanford
Posted: Nov 11th, 3:28pm
Activity: 0 replies, 102 views
| | Design Brief Inspiration for BioRUST Battles!
Author: ahstanford
Posted: Nov 11th, 7:19am
Activity: 4 replies, 152 views
| | The BioRUST Free Stock Photography Thread
Author: ahstanford
Posted: Nov 11th, 6:32am
Activity: 2 replies, 172 views
| |
|
 |
 |
 |
|
|
|
| --- Site Resources --- |
| Total Tutorials: | 212 |
| Total Downloads: | 415 |
| Linkbase Links: | |
|
|
|
|
|
|
