|
|
What is Style Sheet?Style Sheet was adopted by W3 in December 1996. It's the new way to get control of your page. But, writing the script and put it in your document without help from an authoring tool is hard work. For an updated list of Authoring Tools, check the page at W3C. [W3C is The World Wide Web Consortium, the organization that recommends the standards for using HTML. Style Sheets can be created in many ways. The current Cascading Style Sheets (CSS) is what people talk about and it is a standard that is supported by Internet Explorer 3.0 and Netscape Navigator 4.0. Using Style Sheets you can get better control of your page. CSS properties are: Font, Color and Background, Text, Box, and Classification. As I have seen nowadays, Style Sheets are mostly used for control over text color and font. Check at cnet.com, for some good examples of using Style Sheets. How to get it working?You have to put the style definition in the <head> section. <HEAD> <STYLE TYPE="TEXT/CSS"> <!-- .headline {font-family: Courier New; font-size: 24pt; font-weight: bold; text-decoration: underline} .topic {font-family: Arial; font-size: 14pt; font-weight: bold} .text {font-family: Arial; font-size: 10pt} .example {font-family: courier new; font-size: 10pt; line-height: 120%; color: red} --> </style> </HEAD> .headline is the name I use to represent 16pt bold Courier New underline text. When I want to apply this rule to my text such as the headline of this page, I just simply put <span> tag in front of my text -- e.g. I have put <span class="headline"> in front of headline text on this page. This rule also applies to other definitions that I have set (e.g. topic, text, example). Now, it isn't hard to guess that I use </span> as an ending tag. Still not clear? Here is what I did to the above paragraph: In order to deal with browsers that do not support Style Sheets, I have put the font face attribute tag before my text. So, now my page can display in both Style Sheets supported and non Style Sheets supported browsers, and it still looks the same. Remember to put <span class="--"> in front of font face attribute because IE 3.0 will read Style Sheets tag. Other browsers can't read Style Sheets tag and will read your next tag such as <b> or whatever. If you still aren't clear on the use of Style Sheets, you can view HTML source for this page. The SPAN Element is a Text-level element. That means it has to be placed around text. As you have seen from my example it resided in <p> tag Example: 1. Using the CLASS Attribute 2. Using the ID Attribute ??? <div class=example> <H1>Although this is surrounded with header element, it will appear as an example style -- courier 10pt red</H1> <p>This sentence will also appear as an example style.</p> ??? </div> Style Sheets can be used in a wide variety of other circumstances |
| © 2006 www.domain-hosting-affordable.com All Rights Reserved |