Tutorial 7: Working with Cascading Style Sheets
Designing a Style for a Web Site at Maxwell Scientific
Additional Topics
Web Fonts
A specification introduced with CSS2 but not widely supported is Web Fonts. Web Fonts are fonts stored on the Web server, and downloadable to the browser along with the Web page. By using Web Fonts, Web page authors will have greater control and flexibility in their Web page's typography. Three things must happen before Web Fonts become a standard part of the Web:
- Browsers must support the CSS2 standard.
- A common format for Web Fonts must be determined that all browsers can read.
- Font designers have to create the Web Font files in sufficient quantities to make their use practical on the Web, and there must be a way of legally protecting the font designers' work.
To access a Web font, the syntax is:
@font-face {
font-family: "font_name"; src: url(URL)
}
where font_name is the name assigned to the font, and URL is the URL of the Web Font file. For example, the following style declarations:
<style type="text/css">@font-face {
font-family: "Broadway";
src:=url(http://www.webfonts.com/broadway)
}
h1 {
font-family: Broadway, Arial, serif
}
</style>
will cause the Web browser to retrieve the Broadway font from the http://www.bitstream.com/webfont/ and then use it to display all h1 header text.
While some version 4 browsers supported Web Fonts, newer browsers, however, do not support Web Fonts, and several font manufacturers have set their fonts to not allow embedding.
Netscape's Background Blues
One area that Netscape 4.0 is not CSS1 compliant is in how it handles background colors. If you specify a background color to any other element besides the <body> tag, the color is only visible behind the text in the element and not the entire element box. To get around this problem, set the width of the element's border to 0. Once you do this, the background of the entire element box will be filled with color.
A similar problem occurs with the padding space around the box content. If you set a background color for the box, the padding space will not acquire that background color in Netscape. To get around this problem, you have to specify the following style declaration for the element:
border: 1px solid none;
This will have no visual effect on the element, but Netscape will now draw a transparent border around the element 1 pixel in width. More importantly, the padding space will now acquire the background color.
The Resizing Bug
Another Netscape 4.0 bug with respect to styles is the resizing bug. If you use styles in a Web page and view the document in Netscape, all will be well until you resize the browser window. Once you do this, the styles disappear. You can get the styles back using the Reload button from the Netscape toolbar, but it is still troublesome.
One workaround is to create a JavaScript program to do this reloading for you automatically whenever the browser window is resized in Netscape. A simple program to do this is:
<script>
<! Hide from older browsers
isNS = document.layers;
if (isNS) {
saveWidth = innerWidth;
saveHeight = innerHeight;
}
function reStyle() {
if (innerWidth != saveWidth || innerHeight != saveHeight)
location.reload();
}
if (isNS) onresize = reStyle;
// Stop hiding>
</script>
You can insert this program in any Web page that uses styles if you want to avoid this problem for Netscape users.
Controlling Printing with CSS2
Generally printing a Web page will often result in unsatisfactory output. CSS2 improves this situation by giving Web page authors more control over printing. Note that these style attributes may not be supported by all browsers, especially older browsers. The selector for the page is:
@page
Before printing the page, the browser needs to know the page dimensions, including the width of the margins and the orientation of the page. To specify the page dimensions, use the attribute:
size: values
where value can be either the width and height of the page, the value “portrait” (for portrait-oriented output), the value “landscape” (for landscape-oriented output) or “auto” (to leave the printing size to the operating system. For example, to specify a page size of 8.5 inches wide by 11 inches high, use the attribute:
@page {size: 8.5in 11in}
or to specify landscape orientation for the printout, use the attribute:
@page {size: landscape)
To control the size of the page margins, use the margin attribute, as follows:
@page {margin: 1in}
to create a 1 inch margin around the page content. If you want to specify different margin sizes, use the following attributes:
@page {margin-top: 0.5in; margin-right: 1in; margin-bottom: 1in; margin-left: 0.5in}
to create a top and left margin of 1/2 inch, and right and bottom margins of 1 inch.
One common problem in printing a Web page is the lack of control over the page breaks. Often the page break will occur at the least convenient spot. You can control this using the following attributes:
page-break-before
page-break-after
page-break-inside
The page-break-before attribute indicates that a page break should occur before the element. This attribute can have the values: auto, always, avoid, left, right, or inherit.
- The “auto” value allows the operating system to determine the page breaks.
- The “always” value will always create a page break before the element, while the “avoid” value will always prevent a page break before the element.
- The “left” and “right” value create page breaks that result in the page printed as a “left” page or as a “right” page (a “left” page is one that appears on the left size of the fold when printing pages that are to be bound in a book.)
- The “inherit” value causes the element to inherit whatever page-break-before settings are used for the parent element.
The page-break-after attribute operates the same way, except that it controls the placement of page breaks after the element.
The page-break-inside attribute controls whether a page break can occur within the element's contents. The three values for the page-break-inside attribute are:
- avoid
(to prevent a page break) - inherit
(to inherit thepage-break-insidesettings from the parent element) - auto
(to leave the page break settings to the operating system)
For example, to keep paragraphs all on one page, use the style:
p {page-break-inside: avoid}
Another way to control page breaks is through widows and orphans. A widow is a typographical term for an isolated line (or lines) at the top of a page. For example, if a page break occurs within a paragraph, the lines placed at the top of the page are called widows or widow lines. The widow attribute can be used to specify the maximum number of widow lines. To set the maximum value to two lines for every paragraph, use the style:
p {widow: 2}
Similarly, orphans are lines left at the bottom of a page. To control the size of the orphan or orphan lines, use the orphan attribute. For example, the style:
p {orphans: 2}
will limit the size of the orphan lines to two lines for every paragraph in the document.
You can learn more about the different CSS2 styles for controlling printed pages by visiting the W3C page at http://www.w3.org/. Once again, be aware that these styles may not be supported by all browsers, especially older browsers.
