Download presentation
Presentation is loading. Please wait.
1
CASCADING STYLE SHEET
2
Brief History of Web content
Web started to exchange information. Text without structure rapidly became unmangeable. HTML – Gave Structure to the text. Up until 1996, the standard method for creating and distributing information via a website.
3
HTML Formatting Plain text is dull ! HTML allows formatting of text.
Red Text <p> <font color = “red” > Red Text </font> </p> Blue Centered Text <p align=“center”> <font color=“blue”> Blue Centered Text </font> </p>
4
Problem with HTML Clumsy Code Changes become difficult
Problem with <basefont> tag. Presentation tags are deprecated in HTML.
5
Separating Styles from Web Content
Solution Separating Styles from Web Content
6
Placement of Styles Inline Styles – One time Style – High Priority
Internal Styles / Embedded Styles External Styles – First Choice – Least Priority
7
SAME DISADVANTAGES – BETTER INT/EXT
Inline Styles Individual elements can have the styles applied within the HTML tag itself. Red Text <p style = “color: Red”> Red Text </p> Blue Centered Text <p style = “color: Blue;text-align:center”> Blue Centered Text </p> SAME DISADVANTAGES – BETTER INT/EXT
8
Internal / External Style - Syntax
Selector { property1: value1; property2: value2; . . . }
9
Internal Styles <html> <head> <style>
p Html Selector { text-align : center; color : Blue; } </style> </head> <body> <p> Blue Centered Text </p> </body> </html>
10
Internal Styles <body>
<h1> <font face = “sans-serif” color = “#3366CC> First Title </font> </h1> <p> …. </p> <h2> <font face = “sans-serif” color = “#3366CC> Second Title </font> </h2> <h2> <font face = “sans-serif” color = “#3366CC> Third Title </body>
11
Internal Styles <head> <style> h1,h2 {
font-family: sans-serif; color: #3366CC; } </style> </head>
12
External Style Disadvantages of Internal Styles – Placing the set of codes in all webpages. Saved as .css <link rel = “stylesheet” type = “text/css” href = “ styles.css” />
13
Class Selector Disadvantage of HTML Selector
Advantage of Class Selector Syntax: .classname { property : value; . . . } <p class = classname> .. </p>
14
Examples Changing the Cursor Changing the Scrollbar color Pseudocode
Pseudoline Pseudoletter Layers window Scripts
15
Thank you
Similar presentations
