|
|
|
|
|
|
|
|
|
|
PROGRAMMING POWER
Keep lookin' good with Cascading Style Sheets
By Andrew Stuart
In my previous article, "Cascading Style Sheets make you look good," at http://www.dominopower.com/issues/issue200204/cascade001.html, we made a start on getting to know CSS (Cascading Style Sheets). This time, we'll continue this discussion by taking a look at both "embedded" Cascading Style Sheets and "linked" Cascading Style Sheets.
Previously, by using the STYLE attribute we were able to control the appearance of individual HTML page elements without using any Javascript or other code. Using the STYLE attribute means that you're including the specific style properties and values into the actual HTML tags themselves. This is called "inline" cascading style sheets.
Inline CSS is useful and quick, and it's great for fine-tuning the appearance of specific individual page elements. On the downside, it can be repetitive and difficult to maintain, and all those CSS properties can make your HTML code messy and difficult to understand at a glance. The other problem with inline CSS is that making changes often means going through all your code and finding all the places that you've used the STYLE attribute and editing them individually. Inline CSS doesn't facilitate global changes.
Embedded CSS is more flexible than inline CSS. Embedded CSS allows you to define a set of CSS "rules" which can be used throughout the HTML page. The CSS rules are gathered together into a single place--in between a pair of <STYLE> tags located inside the <HEAD> block at the start of the page.
Here's an example of an embedded style sheet:
<head>
<style>
.myrule {
font: 23px Verdana, Geneva, Arial, Helvetica, sans-serif;
color : green;
font-weight:bold }
#anotherrule {
font: 10pt Arial, Helvetica, sans-serif;
color : black;
font-weight:italic }
</style>
</head>
<p class='myrule'>the first test</p>
<p id='anotherrule'>another test</p>
|
Rule structure
In order to understand Cascading Style Sheets, you need to understand CSS rules and the structure of those rules. The above example contains two rules, contained within the <STYLE> tags. Each rule starts with a "selector". The selectors in this example are named "myrule" and "anotherrule".
After the selector comes as many specific style declarations and values as you choose, separated by semicolons. A final curly bracket completes the rule.
[ Next ]
|
|
|
|
|
|
-- Advertisement --
AUTOMATE LOTUS NOTES USER ID MANAGEMENT
ID Manager 4.5 from HELP Software provides a new level of automaton for managing Lotus Notes IDs. ID Manager lets Lotus Notes administrators get out of the business of creating and managing user IDs. Use our ROI calculator to see how quickly ID Manager will pay for itself.
Learn more about HELP Software products
|
-- Advertisement --
Virtual Meeting - Integrating Sharepoint With Lotus Notes: Strategic Coexistence
No more hassles accessing SharePoint documents from Notes! Mainsoft SharePoint Integrator combines SharePoint document sharing, collaboration, and record management capabilities with Notes emails. Preview version 1.5 during our October 7th Virtual Meeting. Learn to incorporate Notes emails and attachments into a MOSS-based record management site, without migrating to Outlook.
Register to attend today.
|
|
|
|
|
|
|
|
|
