Course Technology Logo
     
Home 
Tutorials 
 Tutorial 1
 Tutorial 2
 Tutorial 3
 Tutorial 4
 Tutorial 5
 Tutorial 6
 Tutorial 7
 Tutorial 8
 Tutorial 9
 Tutorial 10
 Tutorial 11
 Tutorial 12
 Tutorial 13
 Tutorial 14
 Tutorial 15
 Tutorial 16

Data Files 

Tutorial 3: Working with Cascading Style Sheets


Web Fonts

Web Fonts are fonts stored on the Web server, that are 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. The style declaration to access a Web font 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, if you place the following style declaration in the head section of the HTML document:

<style type="text/css">

@font-face {

font-family: "Broadway";

src:=url(http://www.webfonts.com/broadway)

}

you can apply the Broadway Web font to any element in the document. The following code shows how to apply the Broadway font to an h1 heading.

<h1 style="font-family: Broadway">

Home Page

</h1>

The browser will retrieve the Broadway font from the http://www.bitstream.com/webfont/ and then apply it to the h1 heading.

Note that some browsers still do not support Web Fonts, and several font manufacturers have set their fonts to not allow embedding. Thus you may need to provide alternative or generic fonts in addition to the Web fonts you supply.

Additional Font Styles

There are several additional font styles that are not yet widely supported by browsers, but may become more popular in the near future.

The font-stretch style is used to change the width of the characters in the displayed font. The syntax of the font-stretch style is:

font-stretch: type

where type is equal to ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, or ultra-expanded.

The font-size-adjust style provides control over the legibility of the displayed font. Each font has an aspect value, which is the font size divided by the x-height (the height of the "x" character in the font). Generally, fonts with larger aspect values are more legible than fonts with smaller aspect values. The syntax of the font-size-adjust style is:

font-size-adjust: value

where value is the value of the font's aspect value, or the value "none" which allows the default aspect value of the font to be used. When the browser encounters this value, it will attempt to use the font that best matches both the font size and the aspect value (as specified in the font-size-adjust style). This ensures that the chosen font will be as legible as the Web author intends. For example the Verdana font has a default aspect value of 0.58, which means that if the font size is set to 100 pixels, the height of a small letter, "x" will be 58 pixels. On the other hand, Times New Roman has an aspect value of 0.46. This means that text in a Verdana font will tend to remain more legible at smaller sizes than Times New Roman. In addition, Verdana text will look "too big" if substituted for Times New Roman. The figure below shows the effect of modifying the aspect value of the Verdana font to match the Times New Roman font.
example of font-size adjust style


The font-effect style can be used to apply special effects to the font. The syntax of this style is:

font-effect: type

where type is none (the default), engrave, emboss, or outline. A value of engrave makes the text appear as though it were engraved into the page. A value of emboss makes the text appear as if it were embossed or lifted out from the page. The outline value, removes the interior color of the text, displaying only the outline of the characters.

Related to the font-effect style is the text-shadow style, which applies a drop shadow to text. The shadow can appear behind and to the left or right of the text—but never in front of the text. The syntax of the text-shadow style is:

text-shadow: color x y blur

where color is the color of the shadow, x is the distance between the shadow and text in the horizontal direction, y is the distance between the shadow and the text in the vertical direction, and blur is the size or blurring of the shadow. Positive x and y values move the shadow to the left and down, while negative values move the shadow to the right and up. The color and blur values are optional. If you do not specify a color value, the color of the text is used. If you do not specify a blur value, the browser will use a default blur. Many fonts do not size well and will appear jagged or pixilated at certain font sizes. The font-smooth style is designed to correct this problem. The syntax of the font-smooth style is:

font-smooth: type

where type is auto (the default) to allow the browser to handle any font smoothing applied to the text, never to prohibit the browser from trying to smooth the font, or to force the browser to always smooth the font.

Setting the Opacity Value

Opacity is defined as the transparency of an image. There are several proposed styles, which are not yet supported in the browser market, to allow Web authors to set the opacity of page elements. The first is the opacity style, which has the syntax:

opacity: value

where value is a number between 0 and 1. A value of 0 (the default) renders the element completely opaque, while a value of 1.0 renders the element completely transparent.

Another proposed style is to add the opacity value to the color value of the element. In this proposal, the rgb color value would be replaced with the color value:

rgba(red, green, blue, alpha)

where red, green, and blue, and the usual values of the red, green, and blue color components, and alpha is the value of the color's opacity. As with the opacity style, an alpha value of 0 (the default) applies an opaque effect to the color, while a value of 1.0 renders the color completely transparent.

Interlacing

GIF images can be saved as noninterlaced graphics or interlaced graphics. In a noninterlaced GIF, which is the most common format, the image is saved one line at a time, starting from the top of the graphic and moving downward. The following figure shows the progress of a noninterlaced GIF as it opens in a Web browser. If a graphic is large, it might take a long time for the entire image to appear, which can frustrate the visitors to your Web page.

An interlaced GIF, by contrast, is saved and retrieved in stages. For example, every fifth line of the image might appear first, followed by every sixth line, and so forth through the remaining rows. The following figure shows, an interlaced image starts out as a blurry representation of its final appearance, then gradually comes into focus. By contrast, a noninterlaced image is always a sharp image as it’s being retrieved, but it is incomplete.

An interlaced GIF is an effective format for a large graphic that you want users to be able to see as it loads. Users with slower connections get an immediate idea of what the image looks like and can decide whether to wait for it to come into focus. On the downside, interlacing increases the size of a GIF file by anywhere from 3 to 20 kilobytes, depending on the image.

Spacers

In the past, Web page designers used transparent GIFs as layout tools to help them place elements on a Web page. To accomplish this, a designer would create a GIF one pixel square in size, with the color of the pixel specified as transparent. This type of image was sometimes referred to as a spacer. A Web designer could then size the spacer in order to position objects in specific locations on the page. Because the spacer was transparent, users would see only the positioned object. With the advent of styles, there is little need for spacers anymore, but you may still see them in the code for older pages.

PNG and GIF

The Portable Network Graphics (PNG) format was designed to replace the older and simpler GIF format. PNG has four main advantages over GIF: alpha channels, gamma correction, interlacing, and compression.

An alpha channel is a way to apply variable levels of transparency to an image. GIFs support simple transparency: a color is treated either as fully transparent or fully opaque. In contrast, PNGs allow up to 254 levels of partial transparency. Thus instead of storing the red, green, and blue components for each pixel, PNGs add a forth component the alpha channel. Variable transparency allows the graphic designer to create special effects such as drop shadows and partial transparencies of one color over another. This is not easily possible with GIFs.

Gamma correction refers to the ability to correct for differences in how monitors and operating systems interpret color values. Gamma correction associates a value with the display system being used and uses that information to approximate the differences in color rendering by different systems and monitors. Thus a PNG image will have a more consistent appearance than the equivalent GIF image.

PNG interlacing is done in a fashion similar to GIF interlacing but within smaller stretching of the interlaced images. This results in rendering a readable image twice as fast under PNG interlacing than under GIF interlacing.

Finally, PNG's compression is among the best that can be had without losing image information. PNG supports three main image types: truecolor, grayscale and palette-based. GIF only supports the palette-based image type. Because PNG can support all three image types it can compress the images better than under GIF.

PNG’s greatest problem was its limited supported from Web browsers. However, with the advantages of the PNG format over the GIF format, this is no longer the case and you can use PNG with all of your Web graphics.