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

CASCADING STYLE SHEETS (CSS)

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

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

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

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

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

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

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

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 :

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.

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.

WAYS TO INCLUDE STYLES IN DOCUMENTS CSS

Inline Styles Heading 1

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

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.

External Style Sheets | Link with url(myStyle.css);

External Style Sheets | Link with url(paragraphsCss.css); p { color:red; }

Link to Master External Style Sheets directives Import.css file url(paragraphsCss.css);

Link to Master External Style Sheets directives  Benefit of using single external style 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 directives and add or url(fileName.css).

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

RULES, SELECTORS, DECLARATIONS CSS

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

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

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

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

The Rule h1 { color : #C0C0C0; } Rule

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

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

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

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

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

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

TYPES OF SELECTORS CSS

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

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

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

 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

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

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

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

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

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

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!

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.

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

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

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)

HTML TREE: RELATIONSHIP OF ONE ELEMENT TO ANOTHER.

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

HTML Tree

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

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…

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

HTML Tree Siblings Hello world This is going to be …

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.

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

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.

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

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.

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