Css lecture notes
- 1. Cascading Style Sheets (CSS) Mrs.C.Santhiya Assistant Professor TCE,Madurai.
- 2. Motivation Consistent look. Multiple platforms Division of labor User control
- 3. Style Sheet Languages Cascading Style Sheets (CSS) Extensible Style sheet Language (XSL) Often used to transform one XML document to another form, but can also add style.
- 4. CSS Introduction A styled HTML document produced by the style sheet style1.css:
- 5. CSS Introduction link element associates style sheet with doc.
- 6. CSS Introduction type attribute specifies style language used
- 7. CSS Introduction href attribute provides style sheet URL
- 8. CSS Introduction title attribute provides style sheet name
- 9. CSS Introduction Alternative, user selectable style sheets can be specified
- 10. CSS Introduction
- 11. CSS Introduction A styled HTML document produced by the style sheet style2.css:
- 12. CSS Introduction Single document can be displayed on multiple media platforms by tailoring style sheets: This document will be printed differently than it is displayed.
- 13. CSS Syntax Parts of a style rule (or statement)
- 14. CSS Syntax: Selector Strings Single element type: Multiple element types: All element types: Specific elements by id:
- 15. CSS Syntax: Selector Strings Elements belonging to a style class: Referencing a style class in HTML: Elements of a certain type and class: class selector: begins with a period .
- 16. CSS Syntax: Selector Strings Elements belonging to a style class: Referencing a style class in HTML: Elements of a certain type and class: this span belongs to three style classes
- 17. CSS Syntax: Selector Strings Elements belonging to a style class: Referencing a style class in HTML: Elements of a certain type and class: this rule applies only to span’s belonging to class special
- 18. CSS Syntax: Selector Strings Source anchor elements: Element types that are descendents: pseudo-classes
- 19. CSS Syntax: Selector Strings Source anchor elements: Element types that are descendants: rule applies to li element that is
- 20. CSS Syntax: Selector Strings Source anchor elements: Element types that are descendants: rule applies to li element that is part of the content of an ol element
- 21. CSS Syntax: Selector Strings Source anchor elements: Element types that are descendants: rule applies to li element that is part of the content of an ol element that is part of the content of a ul element
- 22. Style Sheets and HTML
- 23. CSS Rule Cascade Specificity: 1.style attribute 2.rule with selector: 1. ID 2. class/pseudo-class 3. descendant/element type 4. universal 3.HTML attribute
- 24. CSS Inheritance
- 25. CSS Inheritance Property values: Specified: value contained in declaration Absolute: value can be determined without reference to context (e.g., 2cm) Relative: value depends on context (e.g., larger) Computed (e.g., larger might be 1.2 x parent font size) Actual: value actually used by browser (e.g., computed value might be rounded)
- 26. CSS Font Properties Computed value of font-size property
- 27. CSS Font Properties font-size: Percentage (of parent font-size) Absolute size keyword: xx-small, x-small, small, medium (initial value), large, x-large, xx-large User agent specific; should differ by ~ 20% Relative size keyword: smaller, larger Relative to parent element’s font
- 28. CSS Font Properties Text is rendered using line boxes Height of line box given by line-height Initial value: normal (i.e., cell height; relationship with em height is font-specific) Other values (following are equivalent):
- 30. CSS Font Properties font shortcut property: Initial values used if no value specified in font property list (that is, potentially reset)
- 32. CSS Text Color
- 33. CSS Text Color
- 34. CSS Box Model Every rendered element occupies a box: (or inner edge) (or outer edge)
- 35. CSS Box Model
- 36. CSS Box Model
- 37. CSS Box Model
- 38. CSS Box Model
- 41. Normal Flow Layout html body div d1 div d2 div d3 div d4 Top edges of block boxes are in document order
- 42. Normal Flow Layout Centering can be achieved by setting both margins to auto
- 43. Beyond Normal Flow CSS allows for boxes to be positioned outside the normal flow: Relative positioning span’s shifted backwards relative to normal flow
- 44. Beyond Normal Flow CSS allows for boxes to be positioned outside the normal flow: Float positioning span taken out of normal flow and “floated” to the left of its line box
- 45. Beyond Normal Flow CSS allows for boxes to be positioned outside the normal flow: Absolute positioning span’s removed from normal flow and positioned relative to another box
- 46. Beyond Normal Flow Properties used to specify positioning: position: static (initial value), relative, or absolute Element is positioned if this property not static Properties left, right, top, bottom apply to positioned elements Primary values are auto (initial value) or CSS length float: none, left, or right Applies to elements with static and relative positioning only
- 47. Beyond Normal Flow Float positioning Specify value for float property
- 48. Beyond Normal Flow Absolute positioning Specify location for corner of box relative to positioned containing block margin area padding area containing block This second paragraph has a note. p elements are positioned (but don’t move!)
- 49. Beyond Normal Flow Absolute positioning Specify location for edges of box relative to positioned containing block
- 50. Beyond Normal Flow Absolute positioning 10em padding top edge padding left edge
- 51. Beyond Normal Flow Absolute positioning 8em