1 / 15

Controlling Page Style: Cascading Style Sheets (CSS)

Controlling Page Style: Cascading Style Sheets (CSS). References: Wang, P.S & Katila, S. (2004). A Introduction to Web Design and Programming. CA: Thomson Brooks/Cole. W3Schools (http://www.w3schools.com). Prepared by ackoo. The two important aspects of xhtml web page:-. A web page. XHTML.

tristana-kato
Download Presentation

Controlling Page Style: Cascading Style Sheets (CSS)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. The two important aspects of xhtml web page:- A web page XHTML CSS = +

  3. The two important aspects of xhtml web page:- For document structure, e.g. <head>…</head>, <body>…</body>, <h1>…</h1>, etc. A web page XHTML CSS = + For presentation style, e.g. font-size, font-family, body color, border, background, etc.

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

  5. 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?]

  6. 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 <head> element, like this: <head> <link rel=“stylesheet” type=“text/css” href=“myfile.css” /> </head>

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

  8. About CSS:-(General SYNTAX) CSS code has two important parts: 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} • Selector(s) • e.g. h1, h2, body, a:link, td.try1, td.try2 • Style declaration(s) • property : value • e.g. font-size : small • color : #000099 • padding-left:1.5cm

  9. 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: • Element Selector (HTML elements) • Class selector, write like this tagName.className • Pseudoclass selectors. Most widely used for creating hyperlink. • Id selector • Selectors can be grouped in order to share the same attributes and value.

  10. About CSS:-(Do this example in class) selector(s) {property1 : value1 property2 : value2 … } 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; }

  11. About attaching CSS to Web Document CSS or style sheet can be applied to a web page through the following THREE approaches / methods: • 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 <head> element. 3. Inline Styles Internally in web document through the style attribute. Used with Style attribute. For further description, please READ THIS: http://www.w3schools.com/css/css_howto.asp

  12. About attaching CSS to Web Document An example of applying external style sheet: <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> 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. • 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 <link> tag. The <link> tag goes inside the head section. For further description, please READ THIS: http://www.w3schools.com/css/css_howto.asp

  13. About attaching CSS to Web Document An example of applying Internal Style Sheet (try it now) <head> <style type="text/css"> body {background-image: url("images/back40.gif")} p {font-family: Arial, Helvetica, sans-serif; font-size: medium} </style> </head> The browser will now read the style definitions, and format the document according to it. 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 <style> tag. For further description, please READ THIS: http://www.w3schools.com/css/css_howto.asp

  14. About attaching CSS to Web Document An example of applying Inline Style (try it now) <p style=“font-family: Arial, Helvetica, sans-serif; font-size: medium”> This is a paragraph. This is a paragraph. </p> 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: http://www.w3schools.com/css/css_howto.asp

  15. About attaching CSS to Web Document If these three approaches were used simultaneously for my web documents, which approach has the highest priority to take effect ? The answer is… http://www.w3schools.com/css/css_intro.asp For further description, please READ THIS: http://www.w3schools.com/css/css_howto.asp

More Related