1 Cascading Style Sheet (CSS)

2 Cascading Style Sheets (CSS)  a style defines the appearance of a document element. o E.g., font size, font color etc…  a style sheet: collection of styles for a Web page or Website  style sheets use common language and syntax  main style sheet standard: Cascading Style Sheets (CSS)

3 CSS history  developed by WWW Consortium ( the same organization that develops standards for HTML  designed to augment HTML, not replace it  a whole new way of formatting Web pages  provides several tools not available with standard HTML  different versions o CSS1 released in 1996 (fonts, text, color, background) o CSS2 released in 1998 (positioning, visual formatting) o CSS3, latest standard being developed

4 Benefits of style sheets  a design tool  makes website design more flexible  easier to maintain and modify  more aesthetically interesting  consistent look

5

Applying a Style Sheet  Three ways to apply a style to an HTML document: 1. Inline Styles 2. Embedded Style Sheet 3. External Style Sheet 6

7 Style types o Inline styles  styles are added to each tag within the HTML file  style only affects that particular tag

8 Using inline styles  format a single section, better use inline style  syntax o tag is the name of an HTML element (h1, h2, p, etc) o style declarations  the styles defined for the particular tag  must be enclosed within double quotation marks  use semi-colon separate multiple attributes o e.g.

But what if there are same tags appearing multiple times in the webpage and you want to format all of them uniformly 9

10 Style types (contd.) o Inline styles  styles are added to each tag within the HTML file  style only affects that particular tag o Embedded or global styles  applied to an entire HTML file  allowing the Web designer to modify the appearance of any tag in the document

11 Creating an embedded style  embedded style, a style applied to various sections within a Web page  use tag within the … section  within tag, enclose style declarations  syntax style declarations

12 Embedded Style  syntax for style declaration: selector{attribute1:value1; attribute2:value2;...} o collection of attributes and values  selector o identifies an element in your document, e.g., a heading o identifies attributes and values within the braces for that element  example h1 {text-align: center; color: red}

13 Embedded Style (contd.)  Simple Practice exercise:  Using Embedded styles, convert “course description” and “reference texts” in main.html to blue

14 Grouping selectors  What if there are many tags or blocks which follows the same style throughout the page?  apply the same declaration to a group of selectors by including all of the selector names separated by commas h1, h2, h3, h4, h5, h6 {text-align: center; color: red}

Now the next level!  Just the way we changed the styles uniformly in a single webpage, how about applying that across multiple webpages, i.e., your website  We now need an external style sheet 15

16 Style types (contd.) o Inline styles  styles are added to each tag within the HTML file  style only affects that particular tag o Embedded or global styles  applied to an entire HTML file  allowing the Web designer to modify the appearance of any tag in the document o Linked or external style sheets  placed in an external file, linked with Web pages  allowing Web designer to modify the appearance of tags in several documents across the website

17 Creating an external style sheet 1. Crate a new text file 2. Save it using the extension “.css ”, 3. Place your styles here  Within a style sheet, tag is NOT needed, only need style declarations

18 Creating an external style sheet  Create a text file containing style declarations /* Author: author name */ h1, h2, h3, h4, h5, h6 {text-align: center; color: red}  Name the file: mystylesheet.css  Remember: o Only external stylesheet creation not sufficient o Need to link the stylesheet and the html pages where you need the styles

19 Linking to style sheets with  Example: link to a style sheet named “ mystylesheet.css, ”  Placement within … of the webpage where you need the styles

Style Conflict  Apply external, embedded and inline all three types of styling with h1 tag o External:  Text-align: center and color: red o Embedded:  Text-align: center and color: blue o Inline:  Text-align: center and color: green  What is the result? 20

21 Style precedence  in case of styles conflict, precedence is determined in the following order: 1. an inline style overrides any embedded style or external style sheet 2. an embedded style overrides an external style sheet 3. an external style sheet overrides the internal style rules set by the Web browser

Understanding Cascading Order 22

Style Inheritance  If a style is not specified for an element, it inherits the style of its parent element. This is called style inheritance body {color: green} p {color: red}  In the above example, the body element is the parent element 23

Practice exercise  All the elements in my unordered (bulleted) list must be red throughout the website  All the elements in my ordered (numbered) list must be blue throughout the website 24