1. ECA225 Applied Interactive Programming Cascading Style Sheets, pt 1 ECA 225 Applied Online Programming

2. 2 ECA225 Applied Interactive Programming CSS rules RULE h1 { color: red; } Declaration SelectorPropertyValue

3. 3 ECA225 Applied Interactive Programming CSS rules cont …  each rule has 2 parts  selector: determines to which element a rule is applied  declaration: the rules to apply to the selector  property: the name of the CSS property that describes the formatting being applied  value: an allowable option to set or describe the property  a rule may have more than one declaration  semicolon must end declarations  semicolon is optional for the last pair

4. 4 ECA225 Applied Interactive Programming Applying CSS  can be applied three ways: 1. Internal 2. External 3. Inline  Internal  rules are placed inside tags in section h1 { color: red; }

5. 5 ECA225 Applied Interactive Programming Selectors  element type  to apply a rule to more than one element, separate them with a comma h1 { color: red; } h1, h2 { color: red; } This will be red> So will this

6. 6 ECA225 Applied Interactive Programming Selectors cont …  class  can be used more than once in HTML  case sensitive  prefixed with dot.redText { color: red; } This will be red

7. 7 ECA225 Applied Interactive Programming Selectors cont …  class cont …  can be used alone or contextually with elements h1.redText { color: red; } This will be red This will not

8. 8 ECA225 Applied Interactive Programming Selectors cont …  id  unique identifier – can only be used once in HTML  prefixed with hash or pound sign # #redText { color: red; } This will be red This will be red ILLEGAL

9. 9 ECA225 Applied Interactive Programming Selectors cont …  context  nested elements can be considered as parent/child  nested relationship is indicated without use of comma h1 em { color: red; } This word is red

10. 10 ECA225 Applied Interactive Programming Selectors cont …  context cont …  many properties are inherited  ie, if a property belongs to the parent, it also applies to the child #div1{ color: red; } This is my header

11. 11 ECA225 Applied Interactive Programming Selectors cont …  context cont …  other properties, such as borders, are not inherited #border1{ border-style: double; border-width: thin; } This is my header This is my paragraph

12. 12 ECA225 Applied Interactive Programming Selectors cont …  context cont …  classes or ids can be nested inside one another #contentArea.green{ color: green; } This is green

13. 13 ECA225 Applied Interactive Programming Selectors cont …  pseudo-class  special type of class that allows formatting based on a state or condition  if a link has been visited or not  if the mouse passes over the link  when the link is clicked a:link{ color: blue; text-decoration: none; } a:visited{ color: pink; text-decoration: none; } a:hover{ color: purple; text-decoration: underline; } a:link{ color: red; text-decoration: underline; }

14. 14 ECA225 Applied Interactive Programming Selectors cont …  pseudo-class  special type of class that allows formatting based on a state or condition  first letter of every paragraph  first line of every paragraph p:first-line{ font-size: 120%; } p:first-letter{ font-size: 150%; font-weight: bold; }

15. 15 ECA225 Applied Interactive Programming Applying CSS  can be applied three ways: 1. Internal 2. External 3. Inline  External  external stylesheet is a separate document  to apply the same stylesheet to more than one page of a website  provides consistent look  to modify look of site, make changes in one place

16. 16 ECA225 Applied Interactive Programming Applying CSS  External cont …  no HTML in external stylesheet  no tags in external stylesheet  save as text file, with.css extension  to apply external stylesheet to an HTML document, link the document from inside the section

17. 17 ECA225 Applied Interactive Programming Applying CSS  External cont …  an HTML document can link to more than one external stylesheet at a time, as well as an internal sheet  if a conflict occurs, precedence is given to the rule defined last  URLs in an external stylesheet are relative to the location of the stylesheet, not the document linking to it

18. 18 ECA225 Applied Interactive Programming Applying CSS  Inline  used to apply style locally  within an HTML tag use style as an attribute, the rule as the value  separate definitions with a semicolon This word is red.

19. 19 ECA225 Applied Interactive Programming Comments  CSS comments /* This is a comment */  using comments is a good way to debug a stylesheet which is not working  do not confuse /* */ with //

20. 20 ECA225 Applied Interactive Programming Box Model OUR CONTENT margin border padding