Style Sheets - Web Standards: Mastering HTML5, CSS3, and XML - page 162

The rulesets of the file containing this rule will override the corresponding rules of the imported styles (if any).
For example, if different pages of a site have the same styles except background-color , which is modified as part
of the design, then all the styles can be imported and the background-color property is overwritten ( alter.css
in Listing 5-54). Similarly, a style sheet designed for mobile devices can reuse the main styles but remove the
background image 6 and set the maximum width of the document body to the largest screen width available on
smartphones today ( mobile.css in Listing 5-54). All other styles are imported, including the color and the font-family .

Listing 5-54. Reusing and Extending Styles of the Main CSS File of a Site

main.css alter.css mobile.css

body {
background: url('http://example.com/
images/bg.jpg') no-repeat 100% 0% fixed;
background-color:#004c25;
color: #fff;
font-family: Garamond, serif;
}
...

@import ("main.css");
body {
background-color:#00254c;
}

@import ("main.css");
body {
background-image: none;
max-width: 640px;
}

A more robust declaration provides not the path but the URL of the file. Listing 5-55 shows an example.

Listing 5-55. Importing a Style Sheet File by Providing a Full URL

@import url("http://www.example.com/alter.css");

One of the applications of importing style sheets is to provide alternate styles for web sites that can serve several
purposes. For example, accessibility can be improved by providing different style sheets for different media. The
media-specific CSS files of a site can be controlled in the markup by the media attribute on the link element, as
discussed earlier in Chapter 3. The rulesets of such CSS files have an intersection defined by the main CSS file of
the site. The files of media-specific rules rely on each other and often import rules from each other (Listing 5-56).
Multiple CSS files can also be used for site design.

Listing 5-56. Importing Media-Specific Styles

@import url("print.css") print;
@import url("mobile.css") handheld and (max-width: 480px);

Display and Visibility
The element levels of HTML and XHTML documents have already been discussed. In CSS, (X)HTML elements can
generally be displayed in the following ways:

• Block : Uses the full width available, along with a new line before and after (Listing 5-57)

6 In the example, the background-image property is set using the shorthand property background in the main.css file.