HTML and CSS Reference
In-Depth Information
Listing 5-49.
Inline Style Declaration Example
<img src="logo.png"
style="margin: 10px;"
alt="logo" />
•
Embedded (internal)
style
: A code block usually located in the document head. Embedded
styles are used for styling rules unique to that web page (the element to style does not occur in
other pages on the site). Listing 5-50 shows an example.
Listing 5-50.
An Example for Embedded Styles
<head>
...
<style type="text/css">
#disclaimer {
text-align: center;
margin-top: 30px;
margin-bottom: 60px;
}
</style>
...
<head>
•
External style sheet
: An external style sheet is a separate file with the
.css
extension that
contains style rules for multiple web documents, such as an entire web site. This is a
plain-text file usually encoded in US-ASCII. CSS files cannot contain the
style
element, just
the CSS style rules themselves. Each page refers to that file with the
link
element in the
(X)HTML head section. Listing 5-51 shows an example.
Listing 5-51.
Link to an External Style Sheet File in XHTML
<link rel="stylesheet" type="text/css" href="
main.css
" />
In XML documents (XML, XUL, SVG, and so on), external style sheets can be provided by the
XML processing
instruction
xml-stylesheet
in the first document section [17] (Listing 5-52).
Listing 5-52.
Link to an External Style Sheet File in XML
<?xml-stylesheet type="text/css" href="
default.css
"
title="Default style"
?>
Embedded styles override the corresponding styles declared in an external CSS file, which makes it possible to
use the main styling rules of the web site while declaring some specific ones for a single web page. Inline styles are
even more specific and locally override the styles of the external style sheet as well as the embedded styles (if any).
Style sheets can also import CSS rules from other style sheet files with the
@import
rule. It should be provided
after the
@charset
rules (if any) but before all other rules. If the additional CSS files are in the same directory
structure, the path is adequate (Listing 5-53).
Listing 5-53.
Reusing an External Style Sheet
@import "
styles/alter.css
";
Search WWH ::
Custom Search