Controlling Page Style: Cascading Style Sheets (CSS) References: 1.Wang, P.S & Katila, S. (2004). A Introduction to Web Design and Programming. CA: Thomson Brooks/Cole. 2.W3Schools ( Prepared by ackoo

The two important aspects of xhtml web page:- A web page = XHTMLCSS +

The two important aspects of xhtml web page:- For document structure, e.g. …, …, …, etc. A web page = XHTMLCSS + For presentation style, e.g. font- size, font-family, body color, border, background, etc.

About CSS:- CSS To determine the Presentation style of the following: 1.The display styles in browser (mostly used.) 2.The print formats to printers 3.The device-dependent styles such as for aural browser.

About CSS: (Do this example in class) Take a look at these CSS codes for formatting the heading elements: h1 {font-size: large; color:#000099} h2 {font-size: medium; color:#000099} h3 {font-size: small; color:#000099} Save this as myfile.css (in notepad, etc), and then …. How to attach these codes to the web document? [Guess how?]

About CSS:- (Do this example in class) CSS code: h1 {font-size: large; color:#000099} h2 {font-size: medium; color:#000099} h3 {font-size: small; color:#000099} myfile.css Very simple, just put a link to “myfile.css” in your web document, inside the element, like this:

About CSS:- (General SYNTAX) CSS code has two important parts: 1)Selector(s) e.g. h1, h2, body, a:link, td.try1, td.try2 2)Style declaration(s) property : value e.g. font-size : small color : # padding-left:1.5cm In all, the general syntax for style rule is like this: selector {property1 : value1 property2 : value2 … }

About CSS:- (General SYNTAX) CSS code has two important parts: 1)Selector(s) e.g. h1, h2, body, a:link, td.try1, td.try2 2)Style declaration(s) property : value e.g. font-size : small color : # padding-left:1.5cm In all, the general syntax for style rule is like this: selector(s) {property1 : value1; property2 : value2; … } For e.g: h1 {font-size: large; color:#009} h2, h3, h4 {color : #009} td.try1 {padding : 2cm} a:link {color : red}

About CSS:- (General SYNTAX) In all, the general syntax for style rule is like this: selector(s) {property1 : value1; property2 : value2; … } For e.g: h1 {font-size: large; color:#009} h2, h3, h4 {color : #009} td.try1 {padding : 2cm} Img.noborder1 {border:none} a:link {color : red} #mileageChart {font-family: Courier} Notice that the selector can have more than just HTML elements. The common type of selectors are: 1)Element Selector (HTML elements) 2)Class selector, write like this tagName.className 3)Pseudoclass selectors. Most widely used for creating hyperlink. 4)Id selector 5)Selectors can be grouped in order to share the same attributes and value.

About CSS:- (Do this example in class) An example of defining hyperlink styles: a:link {color: #00c;} /* shaded blue (ie #0000cc) for unvisited links */ a:visited {color : #300; } /*dark red for visited links */ a:active /* when link is clicked */ { background-image: none; color: #00c; /* keeps the same color */ font-weight: bold; /*but turns font bold */ } a:hover /* when mouse is over link */ { background-color : #def; /*turn background gray-blue */ background-image:none; } selector(s) {property1 : value1 property2 : value2 … }

About attaching CSS to Web Document CSS or style sheet can be applied to a web page through the following THREE approaches / methods: 1.External Style Sheet CSS file(s) externally link to web document (this is mentioned earlier) 2. Internal Style Sheet Internally in web document, placed it inside the element. 3. Inline Styles Internally in web document through the style attribute. Used with Style attribute. For further description, please READ THIS:

About attaching CSS to Web Document 1.External Style Sheet. An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the tag. The tag goes inside the head section. For further description, please READ THIS: An example of applying external style sheet: The browser will read the style definitions (for example font styles, paragraph styles, etc) from the file mystyle.css, and format the document according to it.

About attaching CSS to Web Document 2. Internal Style Sheet An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section by using the tag. For further description, please READ THIS: An example of applying Internal Style Sheet (try it now) body {background-image: url("images/back40.gif")} p {font-family: Arial, Helvetica, sans-serif; font-size: medium} The browser will now read the style definitions, and format the document according to it.

About attaching CSS to Web Document 3. Inline style An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly, such as when a style is to be applied to a single occurrence of an element. To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. For further description, please READ THIS: An example of applying Inline Style (try it now) This is a paragraph. This is a paragraph.

About attaching CSS to Web Document For further description, please READ THIS: If these three approaches were used simultaneously for my web documents, which approach has the highest priority to take effect ? The answer is…