Cascading Style Sheets Chapter 4 Frames and Cascading Style Sheets

Frames Frames divide a browser window into two or more separate pieces or panes, with each pane containing a separate web page. One of the key advantages that frames offer is that you can load and reload single panes without having to reload the entire contents of the browser window. A collection of frames in the browser window is known as a frameset. A frameset divides the window into rows and columns (rather like a table). The simplest of framesets might just divide the screen into two rows, whereas a complex frameset could use several rows and columns. To help you understand frames, let’s look at an example below. This frameset divides the page into three parts, and each separate part of the page is a separate HTML document.

First, you use the < frameset > element instead of the < body > element, as this defines the rows and columns your page is divided into. Each frame is then represented by a < frame > element. You also need to learn the < noframes > element, which provides a message for users whose browsers do not support frames. < !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd” > < html > < head > < title > Frames example < /title > < /head > < frameset rows=”150, *, 100” > < frame src=”top_frame.html” / > < frame src=”main_frame.html” / > < frame src=”bottom_frame.html” / > < noframes > < body > This site uses a technology called frames. Unfortunately, your browser does not support this technology. Please upgrade your browser and visit us again! < /body > < /noframes > < /frameset > < /html >

If you look at the start of the code, you can see the frameset DOCTYPE declaration is used, which allows you to use these frame - related elements in the rest of the page. The < body > element has been replaced with the < frameset > element; also, there should be no markup between the closing < /head > tag and the opening < frameset > tag, other than a comment if you want to include one. The < frameset > element must carry the two attributes rows and cols , which specify the number of rows and columns that make up the frameset. In our example there are just three rows, the first being 150 pixels high, the third just 100 pixels high, and the second taking up the rest of the page (the asterisk is used to indicate that the remaining part of the page should be used in this place). < frameset rows=”150, *, 100” > Inside the < frameset > element are the empty < frame > elements. The < frame > elements indicate a URL of the document that will be loaded into that frame; the URL is specified using the src attribute (this is very similar to the way an image file is specified in an < img > element). There is also a < noframes > element whose contents will be displayed if the user ’ s browser does not support frames.

The < frameset > Element The < frameset > element replaces the < body > element in frameset documents. It is the attributes of the < frameset > element that specify how the browser window will be divided up into rows and columns. These attributes are as follows: cols specifies how many columns are in the frameset. rows specifies how many rows are in the frameset. The < frameset > element contains a < frame > element for each frame of the document (each cell of the grid constructed by the < frameset > element) and a < noframes > element to indicate what should be displayed if the user’s browser does not load frames. The cols Attribute The cols attribute specifies both the number of columns in the frameset and the width of each column. Because you have to specify the width of each of the columns (separated by a comma), the number of values you provide automatically tells the browser how many columns there are in the frameset. For example, here are three values indicating that there are also three columns: cols=”20%, 60%, 20%” Here, the first column takes up 20 percent of the width of the browser window, the second takes up 60 percent, and the third takes the last 20 percent.

The frameborder Attribute The rows Attribute The rows attribute works just like the cols attribute and can take the same values, but it is used to specify the rows in the frameset. For example, the following rows attribute will specify three rows: the top row should be 100 pixels tall, the second should be 80 percent of the screen, and the bottom row should take up the screen that is left (if anything): rows=”100, 80%, *” The default value for the rows attribute is 100 percent, so if you do not specify a rows attribute, one row will take up 100 percent of the height of the browser. The border Attribute The border attribute specifies the width of the border of each frame in pixels. border=”10” The frameborder Attribute The frameborder attribute specifies whether a border should be displayed between frames. The following indicates that there should not be any borders (which is the same as if the border attribute is given a value of 0 ): frameborder=”0”

The framespacing Attribute The framespacing attribute only works in Internet Explorer; it specifies the amount of space between frames in a frameset. The value should be given in pixels and the default value is 2 if not otherwise specified. framespacing=”25”

Cascading Style Sheets Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. While most often used to style web pages and interfaces written in HTML and XHTML. CSS works by allowing you to associate rules with the elements that appear in a web page. These rules govern how the content of those elements should be rendered. CSS rule, which is made up of two parts: The selector, which element or elements the declaration applies to (if it applies to more than one element, you can have a comma - separated list of several elements). The declaration, which sets out how the elements referred to in the selector should be styled. The declaration is also split into two parts, separated by a colon: A property, which is the property of the selected element(s) that you want to affect, in this case the width property. A value, which is a specification for this property; in this case it is that the table cells should be 36 pixels wide.

For example, a < td > element could have a width attribute whose value is the width you want the table to be: < td width=”36” > < /td > With CSS, however, rather than your having to specify the attribute on each instance of the < td > element, the selector indicates that this one rule applies to all < td > elements in the document. Here is an example of a CSS rule that applies to several different elements (in this example, the < h1 >, < h2 > and < h3 > elements). A comma separates the name of each element that this rule will apply to. The rule also specifies several properties for these elements with each property - value pair separated by a semicolon. Note how all the properties are kept inside the curly braces: h1, h2, h3 { font-weight:bold; font-family:arial; color:#000000; background-color:#FFFFFF;} Even if you have never seen a CSS rule before, you should now have a good idea of what this rule is doing. There are three heading elements named in the selector ( < h1 > , < h2 > , and < h3 > ), and this rule says that where these headings are used they will be written in a bold Arial font in black with a white background.

Inheritance One of the powerful features of CSS is that, when a property has been applied to one element, it will often be inherited by child elements (elements contained within the element that the rules were declared upon). For example, once the font - family property had been declared for the < body > element in the previous example, it applied to all of the elements inside the < body > element. This saves you from having to repeat the same rules for every single element that makes up a web page. If another rule is more specific about which elements it applies to, then it will override any properties associated with the < body > element or any other containing element. In the preceding example, most of the text was in an Arial typeface, as specified in the rule associated with the < body > element, although there were a few table cells that used a Courier typeface. The table cells that were different had a class attribute whose value was code : < td class=”code” > font-size < /td > Here you can see the rule associated with these elements: td.code { font-family:courier, courier-new, serif; font-weight:bold; } This rule takes precedence over the one associated with the < body > element because the selector is more specific about which element it applies to.

Where You Can Add CSS Rules You can place the CSS rules in a separate file known as an external style sheet . CSS rules can also appear in two places inside the HTML document: Inside a < style > element, which sits inside the < head > element of a document. As a value of a style attribute on any element that can carry the style attribute When the style sheet rules are held inside a < style > element in the head of the document, they are referred to as an internal style sheet. < head > < title > Internal Style sheet < /title > < style type=”text/css” > body { color:#000000; background-color:#ffffff; font-family:arial, verdana, sans-serif; } h1 {font-size:18pt;} p {font-size:12pt;} < /style > < /head >

The < link > Element When style attributes are used on HTML elements, they are known as inline style rules. For example: < td style=”font-family:courier; padding:5px; border-style:solid; border-width:1px; border-color:#000000;” > Here you can see that the properties are added as the value of the style attribute. The < link > Element The < link > element is used in web pages to describe the relationship between two documents; for example, it can be used in an HTML page to specify a style sheet that should be used to style a page. You may also see the < link > element used in HTML pages for other purposes, for example to specify an RSS feed that corresponds with a page. It is a very different kind of link than the < a > element because the two documents are automatically associated — the user does not have to click anything to activate the link. The < link > element is always an empty element, and when used with style sheets it must carry three attributes: type , rel , and href . Here is an example of the < link > element used in an XHTML page indicating that it should be styled by a CSS file called interface.css , which lives in a subdirectory called CSS : < link rel=”stylesheet” type=”text/css” href=”../CSS/interface.css” / >

The rel Attribute The type Attribute The href Attribute The rel attribute is required and specifies the relationship between the document containing the link and the document being linked to. The key value for working with style sheets is stylesheet . rel=”stylesheet” The type Attribute The type attribute specifies the MIME type of the document being linked to; in this case, we are dealing with a CSS style sheet, so the MIME type is text/css : type=”text/css” The href Attribute The href attribute specifies the URL for the document being linked to. href=”../stylesheets/interface.css” The value of this attribute can be an absolute or relative URL, but it is usually a relative URL because the style sheet is part of the site.

The < style > Element The < style > element is used inside the < head > element to contain style sheet rules within a web page, rather than linking to an external document. It is also sometimes used when a single page needs to contain just a few extra rules that do not apply to the other pages of the site which all share the same style sheet. For example, here is a style sheet attached to the HTML document using the < link > element, as well as a < style > element containing an additional rule for < h1 > elements: < head > < title > < link rel=”stylesheet” type=”text/css” href=”../styles/mySite.css” / > < style type=”text/css” > h1 {color:#FF0000;} < /style > < /head >

Advantages of External CSS Style Sheets If two or more documents are going to use a style sheet, you should use an external style sheet. There are several reasons for this, including: It saves you repeating the same style rules in each page. You can change the appearance of several pages by altering just the style sheet rather than each individual page. Once a visitor to your site has downloaded the CSS style with the first page of your site that uses it, subsequent pages will be quicker to load (because the browser retains a copy of the CSS. The style sheet can act as a style template to help different authors achieve the same style of document without learning all of the individual style settings. A style sheet can import and use styles from other style sheets, allowing for modular development and good reuse. It is fair to say, therefore, that whenever you are writing a whole site, you should be using an external style sheet to control the presentation of it (rather than putting CSS rules in the individual web pages).