|
|
|
|
|
|
|
|
|
|
|
|
|
|
Keep lookin' good with Cascading Style Sheets (continued)
You can include as many rules as you want in between the <STYLE> tags.
You can find the style declaration attributes and values for Microsoft Internet Explorer at http://msdn.microsoft.com/library/default.asp?url=/workshop/author/css/reference/attributes.asp.
Using CLASS and ID to reference selectors
Okay, so now we've got some embedded CSS rules and they have selectors. How do we use the rules?
It's easy. The only thing you need to do is add a CLASS or ID attribute to the HTML page element that you want to apply the rules to. If you're going to use CLASS to reference CSS rule selectors, then the rule inside the <STYLE> tags must be prefixed with a full stop. Have another look at the example above and you'll notice that in the style sheet, "myrule" is prefixed with a full stop. Similarly, using ID to reference CSS rule selectors requires that the rule inside the <STYLE> tags must be prefixed with the "#" symbol.
The last two rows of the above example show how to use CLASS and ID to reference the rule selectors in the style sheet. The example includes two <p> elements, one using CLASS to refer to a selector and one using ID to refer to a selector.
Easy, isn't it?
Linked CSS
So far we've seen that inline CSS gives you fine control over individual page elements. Embedded CSS allows you to make global changes across an entire HTML page.
Linked CSS goes one step further and stores the style sheet outside the HTML page. This means that multiple HTML pages can refer to the same linked CSS file. Thus you can make changes in a single location, and those changes will apply to all of the HTML pages that use that linked CSS file.
I've separated the style sheet rules from our example into a file. This will be our linked style sheet. For your convenience, I've stored the linked style sheet on my Web server at http://www.touchdown.com.au/dpmay2002.css. These are the contents of the linked style sheet:
.myrule {
font: 23px Verdana, Geneva, Arial, Helvetica, sans-serif;
color : green;
font-weight:bold }
#anotherrule {
font: 50pt Arial, Helvetica, sans-serif;
color : purple;
font-weight:italic }
|
Okay, now that we have a linked style sheet available, load the following into a Web browser, and you'll see how easy it is to get linked CSS working for you.
Conclusion
Cascading Style Sheets is one of my favorite standards/technologies. Style sheets are very simple to understand and implement, and give excellent results.
The results you get from using Cascading Style Sheets easily outweigh the effort that you need to put in (which is, effectively, none).
Take a little time to explore the CSS reference guides and your software will look better and cleaner and you'll be able to add that cool factor without the need for graphic designers, time, or cost.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
-- Advertisement --
Find unused Lotus Notes groups and clean up your address book
Have you ever wanted to get rid of old Lotus Notes groups that were cluttering up your address book, but you weren't sure if they were used? Find Unused Groups can help.
Find Unused Groups will check your ACL, mail, multi purpose and server groups to help you determine if they are used, and who uses them.
Learn how to easily clean up your address book. |
-- Advertisement --
Teamstudio Edition 25 has shipped
It's finally here! Now that Teamstudio Edition 25 has shipped, listen to our latest Tool Time audio program to find out what's changed. Updates to all your favorite Teamstudio tools will be discussed.
Plus, you'll get an introduction to Teamstudio Undo (formerly known as Teamstudio Snapper).
Tap here to get started! |
|
|
|
|
|
|
|
|
|
|
