1. Today’s Objectives  CSS | Rules | Declarations  Project portfolio page  Introduce User-Center Design | Design Activity

2. CASCADING STYLE SHEETS (CSS)

3. Visual vs. Structural  Use HTML to:  Structure document  Meaningful markup  Use CSS for styling

4. In the summer of 2009, I developed Mapping Temporal Relations of Discussions Software (MTRDS) as a tool to analyze the temporal aspects of online course discussions. “This Web-based prototype imports discussion files from a course management system and diagrams the temporal aspects of conversations.” From the diagrams, one can observe the general time and date of discussion activity and individual patterns of interactivity. I am seeking funds to assist me in further developing an intelligent online tool that provides semantic as well as temporal analyses of online educational conversations. Introduction Educational Conversations

5. What are style sheets?  HTML was not meant to specify an exact appearance for your Web pages.  CSS (Cascading Style Sheets) allows you to specify more information about the appearance of elements on a Web page. Zen Garden

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

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

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

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

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

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

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

13. WAYS TO INCLUDE STYLES IN DOCUMENTS CSS

14. Inline Styles Heading 1

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

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

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

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

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

20. 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).

21. External Styles page4.htm page6.htm page7.htm page2.htm page3.htmpage1.htm index.htm Style.css page5.htm Make changes from a single document Changes multiple documents

22. RULES, SELECTORS, DECLARATIONS CSS

23. 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; }

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

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

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

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

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

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

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

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

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

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

34. TYPES OF SELECTORS CSS

35. Types of selectors  Tag or HTML Selectors: Page-Wide Styling  Class Selectors: Pinpoint Control  ID Selectors: Specific Page Elements  Group Selectors

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

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

38.  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

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

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

41. Types of selectors | Class Names Class names  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

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

43. 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;}

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

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

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

47. 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; }

48. 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)

49. HTML TREE: RELATIONSHIP OF ONE ELEMENT TO ANOTHER.

50. HTML Tree My Web Page Main Topic A web page about the days of the week, specifically Tuesday.

51. HTML Tree

52. HTML Tree Ancestor to all tags Ancestor to h1, p, span Siblings Child of Descendent of Descendent of and

53. HTML Tree  Ancestor: tag that wraps around another tag. ancestor of all other tags  Descendent: A tag inside one or more tags.  Parent: tag’s closest ancestor HOME  Child: tag directly enclosed by another tag. HOME…

54. HTML Tree  Sibling: tags that are children of same tag. Siblings

55. HTML Tree Siblings Hello world This is going to be …

56. Selectors | Context | Descendent Descendent selector context  p strong { color: red; } Any tag inside a paragraph (p) is red, but other instances of the tag on the page are not affected.  li a { font-family: Arial; }  Any tag inside a line item is Arial font, but other instances of the tag on the page aren’t affected.

57. Specificity | Descendent selectors  Specific descendent selectors override less specific selectors li a {color : green;} All anchors in line items are green ol li a {color : green;} Only anchors in line item in ordered lists are green

58. Selectors | Descendent selectors p.intro { color : red;} Hello World Any paragraph with.intro class will be Red. p.intro {color : red;} Hello World Any tag with.intro class that is in a tag will be Red.

59. Child selectors  div > h1 {color : blue; }  All heading 1 that are children of div will be blue. Hello world Hello everyone

60. Adjacent Siblings  A tag that appears immediately after another tag in HTML h1+p {color : green;} Paragraphs that are adjacent to heading 1 will be green.

61. Pseudo-Classes  a:link| a:link { color : #EFEFEF; }  a:visited | a:visited { color : #CCCCCC; }  a:hover| a:hover { color : # F33333; }  a:active | a:active {color : #B2F511;}  Hover: (these will also work)  h1:hover { color : #FFFFFF; } .hiLite:hover { color : #FFFFFF; }