1. Today’s objectives  Presentational | Inline | Block | Validate  CSS | Rules | Declarations

2. CASCADING STYLE SHEETS CSS

3. CSS Level 1 – CSS1  First version of CSS (CSS Level 1 - CSS1) in 1996.  Included properties for font, color, and spacing instructions to page elements.  Lack of browser support prevented widespread use of CSS.

4. CSS2  CSS Level 2 (CSS2) released in 1998.  Added positioning properties allowed CSS to be used for page layout.  Introduced styles for other media types (such as print).

5. CSS2  CSS Level 2, Revision 1 (CSS2.1) minor adjustments to CSS2 and is currently a working draft or a Candidate Recommendation (W3C).

6. CSS2.1 and CSS3  CSS 2.1 builds on CSS2 which builds on CSS1.  Supports media-specific style sheets - authors may tailor presentation of documents to visual browsers, aural devices, printers, braille devices, handheld devices, etc.  CSS 2.1 is derived from and will replace CSS2.  CSS3 specification – Working draft

7. CSS  Most browsers support majority of CSS1, CSS2, and CSS2.1 specifications.  Some browsers already support features from CSS Level 3 (CSS3) - still in development. Source : www.w3.org/Style/CSS.

8. CSS  CSS3 adds support for:  vertical text  improved handling of tables  improved integration with XML technologies  multiple background images  Etc. Source : www.w3.org/Style/CSS.

9. The Benefits of Using CSS  Better type and layout controls.  Less work. Change appearance of site by editing one style sheet.  Potentially smaller file sizes and faster download.

10. The Benefits of Using CSS  More accessible sites. Meaningfully marking up content makes it more accessible for nonvisual or mobile devices.  Reliable browser support. Almost all browsers support all of CSS1 and most of CSS2.

11. WAYS TO INCLUDE STYLES IN DOCUMENTS CSS

12. Inline Styles Heading 1

13. Internal Style Sheets h1 { color : #C0C0C0; } font-family: Arial; font-size: 1.5em;} p { font-size: small; font-family: sans-serif; }

14. External Style Sheets | Linked with HTML | 1 or more sheets  rel="stylesheet" | identifies the type of link, link to a style sheet.  type="text/css" tells browser what type of data, a text file with CSS.

15. External Style Sheets | Link with CSS @import url(myStyle.css);

16. External Style Sheets | Link with CSS @import url(bodyCss.css); @import url(paragraphsCss.css); p { color:red; }

17. Link to Master External Style Sheets with @import directives Import.css file contains @import url(bodyCss.css); @import url(paragraphsCss.css);

18. Link to Master External Style Sheets with @import directives  Benefit of using single external style with @import directives :  Do not need to modify html in pages, when adding or removing sheets.  If you divide styles or add additional styles sheets, just open the main style sheet containing the @import directives and add or remove @import url(fileName.css).

19. RULES, SELECTORS, DECLARATIONS CSS

20. CSS Grammer  Made up of one or more style instructions (called rules).  Rules describe how elements get displayed. h1 { color: green; } or h1 {color : rgb(255, 0,0);} p { font-size: small; font-family: sans-serif; }

21. Style sheet | Rules p { font-family: sans-serif; } Rule

22. Style sheet | Rules p { font-size: small; font-family: sans-serif; } Rule

23. Style sheet | Rules p { font-size: small; font-family: sans-serif; } Rule Can be written this way

24. Cascading Style Sheets  Style is set of one or more rules that attached to elements in document (, …) h1 { color: #000000; }

25. The Rule h1 { color : #C0C0C0; } Rule

26. The Rule h1 {color : #c0c0c0;} SelectorDeclaration Rule (What to format)

27. The Rule h1 {color : #c0c0c0; font-family : Arial; font-size : 2em; } Selector Declaration block Rule

28. The Declaration h1 { color : #C0C0C0; } Property Declaration has two parts separated by a colon: Property - part before the colon Value - part after the colon Value

29. The Declaration h1 { color : #C0C0C0; } Property Property is a quality or characteristic that something possesses (e.g., color, size, style). Value

30. The Declaration h1 { color : #C0C0C0; } Property Values get assigned to CSS properties, a color, length, URL, or keyword (small). Value

31. The Declaration h1 {color : #c0c0c0; font-size : 2em; } p {font-family : Arial; } Brackets distinguish declarations | rules Colon separates property and values Semicolon separates declarations

32. TYPES OF SELECTORS CSS

33. Types of selectors  Tag or HTML Selectors: Page-Wide Styling  Class Selectors: Pinpoint Control  ID Selectors: Specific Page Elements  The Universal Selector (Asterisk) * { font-weight: bold; }

34. Types of selectors | HTML | Tag h1 {color : #c0c0c0;} body {background-color : #FFFFFF;} p {padding : 10px;}

35. Types of selectors | Classes  Classes (applies to more than one type of element).mytext {font-family: Verdana; font-size: 14px;} Hello World Learning CSS

36.  Dependent Classes (when the class is applied to a specific tag -.hiLight only applies to h1 element) h1.hiLight {background-color : blue;} Hello World Types of selectors | Dependent Classes

37.  Dependent Classes (when the class is applied to a specific tag.).hiLight {background-color : yellow;} h1.hiLight {background-color : blue;} Hello World

38. Types of selectors | multiple classes Multiple classes applied to the same tag.  Add two or more class names to tag. List more than two classes but need space between class names..hiLight {color : blue;}.banner {font-family : Arial, sans-serif;} Hello world

39. Types of selectors | Class Names Class names  Use meaningful names  Start with period  Class name must always start with a letter. .3Rivers is invalid .threeRivers is valid |.p3Rivers is valid  Can contain any letter, number, hyphen or underscore  Can NOT contain symbols like &, *, or !.  Case sensitive – mytext is different from myText

40. Types of selectors | Class Names Name classes (and IDs) by purpose not appearance  Use names that describe purpose of the style.  If red is used to highlight errors in a report, then:.redColor – is a poor name.showErrors – is a better name

41. Types of selectors | ID  ID selectors identify:  Major sections  Unique content | a rule to ONE element on a page.  Configured with #idname #banner { background-color : #FF00FF;}

42. Types of selectors | ID  Creates a rule for an id titled “banner”.  Red, large, italic font.  Applies to ID “banner” #banner { color : #FF0000; font-size:2em; font-style: italic; } Hello world!

43. Classes versus IDs  Identify sections that occur once per page.  Identify the unique parts of a page (e.g. branding)..classes#IDs  A style is needed several times on a page. ID selectors have priority over classes.

44. ID selectors have priority over class selectors.  If browser finds two styles that specify different colors to the same tag, ID styles apply..bigtext { background-color : red; } #hiLight { background-color : blue; }  Hello world

45. Types of selectors | ID Names Don’t use ID names based on position  Use name based on purpose of content: Poor #topright #colMid #top #bottom #sideNav Better #events #mainNav #branding #siteInfo #news

46. Combining Rules | Group Selectors h1 { color : #F1CD33; } h2 { color : #F1CD33; } h3 { color : #F1CD33; } h4 { color : #F1CD33; } h5 { color : #F1CD33; } h6 { color : #F1CD33; } OR  Styling Groups of Tags h1, h2, h3, h4, h5, h6 { color : #F1CD33; }

47. Combining Rules | Group Selectors  Tags only h1, h2, h3, h4, h5, h6 { color : #F1CD33; }  Combination of selector types in a group selector. h1, p,.copyright, #banner { color: #CCCCCC; } (sets color of tags, class, ids to #CCCCCC)