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
<style type="text/css">
#disclaimer {
text-align: center;
margin-top: 30px;
margin-bottom: 60px;
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