1. 1 Working with Cascading Style Sheet (CSS)

2. 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. 3 CSS history  developed by WWW Consortium (www.w3c.org), 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. 4 Benefits of style sheets  a design tool  makes website more flexible  easier to maintain and modify  more aesthetically interesting  consistent look

5. 5

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

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

8. 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.

9. 9 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

10. 10 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

11. 11 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}

12. 12 Embedded Style (contd.)  Simple Practice exercise:  Apply the same style (text aligned center and color red) to Spring 2010

13. 13 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}

14. 14 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

15. 15 Using an external style sheet  creating a text file containing style declarations  have the extension “.css ”, though this is not a requirement  within a style sheet, tag is NOT needed, only need style declarations

16. 16 Create an external style sheet  Create a text file containing style declarations /* Author: author name Date: 4/18/10 */ 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

17. 17 Linking to style sheets with  general syntax for linking: o URL: URL of the linked document o relation_type: establishes relationship between linked document and Web page  rel= “ stylesheet ” for linking to a style sheet o link_type: indicates language used in linked document  type= “ text/css ” for linking to a style sheet  Example: link to a style sheet named “ mystylesheet.css, ”  Placement within …

18. Understanding Cascading Order 18

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

20. Style Precedence  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 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 21

22. 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 22

23. 23 Generally used attributes and their values  Font-size  Letter and word spacing  Text appearance and attributes  Hyperlinks appearance and attributes

24. 24 Managing font size  in CSS, use font-size attribute to manage font sizes  font sizes can be expressed o as a unit of length o with a keyword description o with a keyword expressing the size relative to the font size of parent element o as a percentage of the parent element

25. 25 Absolute and relative units  use unit of length, absolute units or relative units o absolute units define the font size based on one of the following standard units of measurement:  mm (millimeter),  cm (centimeter),  in (inch),  pt (point)  pc (pica) o use a relative unit, which expresses the font size relative to a size of a standard character  em unit is equal to the width of capital letter “ M ” in browser ’ s default font size  ex unit is equal to the height of a small “ x ” in default font size

26. 26 em, ex units

27. 27 Pixels  a pixel is the smallest element recognized by the monitor  text that is 10 pixels high may be perfectly readable at a low-resolution (e.g., 640 x 480) monitor, but it can become unreadable at high-resolution (e.g., 1024 x 768) monitor

28. 28 Descriptive keywords  seven descriptive keywords for font size o xx-small o x-small o small o medium o large o x-large o xx-large  Example body {font-size: medium}

29. 29 Keywords: smaller, larger  using keywords “ larger ” and “ smaller, ” o makes the font one size larger or smaller than the size of parent element o example: to make h2 heading one size larger than the body text, you could use the following style body {font-size: medium} h2 {font-size: larger}

30. 30 Font size as percentage of parent tag The font size of bold content (defined by tag) is 150% of the size of surronding text (where the font size is defined by tag)

31. 31 Specifying letter, word spacing  set the space between individual letters, letter- spacing attribute letter-spacing: size  change the spacing between individual words, word- spacing word-spacing: size  size can be o the value “ normal ”, which allows the browser to determine letter spacing o a number expressed in the same measuring units used to describe font size (inches, millimeters, centimeters, em units, etc.)

32. 32 Special text attributes  CSS provides three attributes for special text effects: o text-decoration o text-transform o font-variant

33. 33 text-decoration attribute  attribute name: text-decoration  values o none o underline o overline o line-through  examples

34. 34 text-transform attribute  attribute name: text-transform  attribute value: o capitalize capitalize the first letter of each word in a paragraph o uppercase display the text in all capital letters o lowercase display the text in all lowercase letters

35. 35 text-transform attribute, example

36. 36 font-variant attribute  font-variant attribute create small caps  small caps are capital letters that are the same size as lowercase letters  syntax font-variant: small-caps  Netscape does not support the font-variant attribute in versions prior to 6.0

37. 37 font-variant attribute, example

38. 38 Working with style inheritance  Web pages invariably have elements (e.g., tags) placed within other elements  sample tree structure of Web elements

39. 39 Parent and descendant elements  an element that lies within another element is called a descendant or descendant element o e.g., in previous slide, tag is a descendant of tag  an element that contains another element is called the parent or parent element. o e.g., tag is the parent of all other tags used to format the Web contents  using the principle of inheritance, styles defined for a parent tag are transferred to its descendants tags

40. 40 Contextual selectors  use tree structure to better control styles o apply a style only to direct descendant of a parent element, use syntax: e1 e2 o el and e2 are the names of HTML elements (i.e. tags) and e2 is directly below e1 in the tree structure of elements o example: li b {color:blue} only changes the color of the boldface text residing within a tag to blue  not all browsers support contextual selectors