 Style-Sheets Page 2 - Understanding Style Sheets (Part 1) |
| Style-Sheets Page 2 - Understanding Style Sheets (Part 1) |
Into The Light - Style SheetsThe first in a two-part tutorial on Cascading Style Sheets, thisarticle explains how to create and use style rules across your Web site,and then demosntrates a few basic CSS properties. Also included:inheritance, classes, contextual selectors and some lightbulb jokes.
print this article SEARCH DEV SHED |
Let's start off with a simple example. Consider this HTML page: <HTML> <BODY> Q. How many <B>developers</B> does it take to change a <B>light bulb</B>? </BODY>
<BODY> Q. How many <B><FONT COLOR="Lime">developers</FONT></B> does it take to </BODY> <HTML> </HEAD> <BODY> Q. How many <B>developers</B> does it take to change a <B>light bulb</B>? </BODY> The two examples will look identical when you view them in a browser - however, the second one has the distinct advantage of being much easier to read. Take it one step further - if you suddenly wake up in the middle of the night with visions of the colour #CC6633 dancing in your mind, the second example allows you to change the colour of all emphasized words in one fell swoop. Take a look. <HTML> </HEAD> <BODY> Q. How many <B>developers</B> does it take to change a <B>light bulb</B>? </BODY> Thus, by separating design from code, style sheets can substantially reduce the amount of time you spend making changes to your site...which, when you come to think about it, is exactly the way it should be.{mospagebreak title=Ground Rules} Now that you've seen the power of style sheets in action, let's get down and dirty with some basic concepts. In the example above, the line B {color: lime} is known as a "style rule", which consists of two basic elements - a "selector" and a "declaration".A "selector" is usually an HTML tag [B, in this case],while the "declaration" is one or more CSS name-value pairs that indicate the type of formatting to be applied to the selector. This declaration is always enclosed in curly braces, and different name-value pairs are separated from each other by semi-colons. For example, B {color: lime; text-decoration: underline; font-family: Arial} is a perfectly valid style ruleThe CSS specification lays down definitions for more than sixty keywords, and you're going to learn all the important ones during the course of this tutorial.Selectors can also be grouped together, as in the following example, which turns all H1, H2, and H3 text white: H1, H2, H3 Note that you can also include comments within your style block, as demonstrated above.The most common method of including a set of style rules in an HTML document is via the <STYLE> tag. The <STYLE> tag usually appears within the <HEAD> of your HTML document, and looks something like this: <HEAD> <STYLE TYPE="text/css"> </HEAD> If you take a look at the examples above, you'll see that this is the method used. Style rules defined in such a manner will apply to the current document only... which creates a problem if you'd like to apply styles across a series of Web pages. Not to worry... a solution is at hand!{mospagebreak title=Write Once, Link Often} One of the most ingenious aspects of CSS technology - and one of the primary reasons I like using it so much - is that it allows developers to define a single "global" style sheet and apply the rules in that sheet to all the HTML Let's suppose that you have a global style sheet called "global.css" located on your server at "http://www.somewhere.com/global.css". To link the style rules in that document to a specific HTML document, simply include this code within the <HEAD> of your HTML document, like this, <HEAD> and all the style definitions from "global.css" will be automatically applied to your HTML file.You could also "import" a style sheet with the @import keyword, as in the following example: <STYLE TYPE="text/css"> You can also apply styles on a case-by-case basis, by adding the STYLE attribute to the HTML code itself. For example: <HTML> <BODY> Q. How many <B STYLE="color: lime; background-color: black">developers</B> </BODY> See?
blog comments powered by Disqus |
|  |
|
|
|
|
|
|
|
|
/ 33 
