Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Twelve Dynamic HTML Lessons : Page 7

From Cascading Style Sheets to higlighted text to toggling images on and off the page, here are twelve fancy things that you can learn to do today in DHMTL.


advertisement
Abolishing and Eliminating Redundancy
Ok, I admit it. I'm tired of typing (or even cutting and pasting) the same style info into a document. It's time now for a better solution.

Lucky for us there is a solution. Here's the code to put in your header:

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

It's a pretty simple line of code but what it does is incredibly powerful. It links a stylesheet into your page. The stylesheet, in this case, is the file "styles/dynamic.css" It is ascii text and contains nothing but style rules for our page. The Web browser loads those rules and applies them to the current page.



Here's a sample stylesheet:

BODY {font-size: 12pt; font-family: "Times New Roman"; line-height: 14pt; background-image: URL(images/logo.gif); background-position: center; background-repeat: no-repeat; background-position: center; background-attachment: fixed} H1 {font-size: 20pt; font-family: "Arial"; font-weight: bold; color: 9966cc; z-index: 0} H2 {font-size: 15pt; font-family: "Arial"; font-weight: bold; margin-top: 30pt; color: 9966cc} P {font-size: 12pt; font-family: "Times New Roman"; line-height: 14pt; text-indent: 12pt; margin-top: 6pt} PRE {font-size: 10pt; font-family: "Courier"; line-height: 14pt; color: red} A {text-decoration: none}

Notice that there are no HTML tags in the file. It consists of just style attributes.

The power of this may not be immediately apparent but consider this: You can link the same stylesheet to multiple pages. If you should need to change the look of your pages you no longer need to edit each individual file, just change the stylesheet. The changes will be applied to all documents that link to it.

Combined with a little planning this can be a very powerful tool.



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date