Location: Where to Put a Style
The Cascade
There are a number of complex rules regarding the Cascade, which, for the purpose of this book, can be boiled down to two simplified statements
-
The closest rule wins.
-
The most specific rule wins.
Begin with the Browser
Each browser has a set of style rules.
These rules commonly set up basic display properties such as black text and font sizes for various elements.
The browser style rules are at the beginning of the Cascade.
A Basic XHTML Page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Chapter 2: a paragraph</title>
</head>
<body>
<p>This is a paragraph. This paragraph appears on a Web page and is rendered by a browser.</p>
</body>
</html>
User Styles
All browsers allow users the option of setting up style rules of their own.
Many people who don’t have any barriers to accessing the Web, such as poor eyesight, are not aware that these options exist
If a user chooses to do so, they can set their own rules to be more important than any style rules created by the web page designer.
External Styles
The browser and user stylesheets are out of your control. The first opportunity you as a designer have to enter the Cascade is with an external stylesheet.
An external stylesheet is a text document created in Notepad or some similar text editor and saved with the file extension .css
You integrate that external style rule with your XHTML page by adding a link element to it.
The link element is inserted into the document head
External Styles
<title>Chapter 2: a paragraph</title>
<link href="ch2external.css" rel="stylesheet" type="text/css" />
</head>
The link element links the XHTML page to a document whose relation (rel) to it is that of “stylesheet”. The stylesheet type is text/css. The href attribute is the URL of the stylesheet.
A Simple Stylesheet: ch2external.css
p {
font: 0.9em Arial;
color: #000;
}
Embedded Styles
Style rules may be inserted in the head of the XHTML document itself.
Such styles are referred to as internal styles or embedded styles.
Embedded styles apply only to the document in which they are placed.
Embedded styles also make sense when you have an external stylesheet linked to a page but you want to change something slightly on just one page
Embedded Styles
<head>
<title>Chapter 2: a paragraph</title>
<style type="text/css">
p {
font: 0.9em Georgia;
color: #000;
}
</style>
</head>
Inline Styles
Inline (in the flow of the text) styles are a one-time-use affair.
Using inline styles extensively is not the best practice.
Each time you want to use an inline style, you have to type it right into the specific element.
<p style="color: #00F">This is a paragraph. This paragraph appears on a Web page and is rendered by a browser.</p>
This style rule changes the color to #00F (blue) for this single paragraph element.
Inheritance
Inheritance affects the rendering of styles because styles are inherited from antecedent (or parent) elements.
Everything in the document is a descendant of the html element.
The next level in the hierarchy (or document tree) is the body element.
<html>
<body>
<p></p>
</body>
</html>
Let’s examine the relationship the Cascade and inheritance have in how a particular element might render.
body {
font-family: Arial;
}
If there were no other style rules for the p element anywhere in the Cascade, the value Arial would be inherited by the p element as a descendant of the body element.
Using @import
There are two ways to link your XHTML page to an external stylesheet :
with a link element, which we discussed earlier in the chapter
with an @import directive.
An external stylesheet can be imported into another stylesheet using an @import directive such as
@import url(http://www.example.com/styles.css)
or
<style type=”text/css”>
@import url(myotherstyles.css);
</style>
Comments
Comments can be used within CSS style definitions.
CSS comments begin with /* and end with */.
CSS comments tell the browser to ignore the material enclosed in the comment markers.
An example of a CSS comment:
p {
font: 0.9em Georgia;
/*color: #000;*/
}
By : Ian
