HTML and CSS Reference
In-Depth Information
External styles can apply to multiple pages. If a Web page contains both a link to an
external style sheet and embedded styles, the external styles will be applied first, and
then the embedded styles will be applied. This allows a Web developer to override
global external styles on selected pages.
If a Web page contains both embedded styles and inline styles, the embedded styles are
applied first, and then the inline styles are applied. This allows a Web developer to
override page-wide styles for particular XHTML tags or classes.
Any XHTML tag or attribute will override styles. For example, a
<strong>
tag will
override corresponding font-related styles configured for an element. If no attribute or
style is applied to an element, the browser default is applied. The appearance of the
browser default may vary by browser and you might be disappointed with the result.
Specify the properties of your text and Web page elements using CSS. Avoid depending
on the browser default.
The overall CSS cascade was described above. In addition to this general cascade of CSS
types, the style rules themselves follow rules of precedence. Style rules applied to more
local elements (such as a paragraph) take precedence over those applied to more global
elements (such as a
<div>
which contains the paragraph).
Let's look at an example of the cascade. The CSS and XHTML code is shown below.
The CSS has two style rules: a rule creating a class named
content
which configures
text using the Arial (or generic sans-serif) font family, and a rule configuring all para-
graphs to use the Times New Roman (or generic serif) font family. The CSS follows:
.content { font-family:Arial, sans-serif; }
p { font-family: "Times New Roman", serif; }
The XHTML on the page contains a
<div>
with multiple elements, such as headings
and paragraphs. Partial code follows:
<div class="content">
<h1>Main Heading</h1>
<p>This is a paragraph. Notice how the paragraph is contained in
the div.</p>
</div>
Here's how the browser would render the code:
1.
The text contained in the heading is displayed with Arial font because it is part of
the
<div>
assigned to the
content
class. It inherits the properties from its parent
(
<div>
) class. This is an example of
inheritance
, in which certain CSS properties
are passed down to elements nested within a container element, such as a
<div>
or
<body>
element. Text-related properties (font-family, color, etc.) are generally
inherited but box-related properties (margin, padding, width, etc.) are not. See
http://www.w3.org/TR/CSS21/propidx.html
for a detailed list of CSS properties
and their inheritance status.
2.
The text contained in the paragraph is displayed with Times New Roman font
because the browser applied the styles associated with the most local element (the
paragraph). Even though the paragraph was contained in (and is considered a
child of) the
content
class, the local paragraph style rules took precedence and
were applied by the browser.
Search WWH ::
Custom Search