Downloaded 41 times
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 CascadingStyle 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 styledHTML document produced by the style sheet style1.css:
- 5. CSS Introduction link elementassociates style sheet with doc.
- 6. CSS Introduction type attributespecifies style language used
- 7. CSS Introduction href attributeprovides style sheet URL
- 8. CSS Introduction title attributeprovides style sheet name
- 9. CSS Introduction Alternative, userselectable style sheets can be specified
- 10.
- 11. CSS Introduction A styledHTML document produced by the style sheet style2.css:
- 12. CSS Introduction Single documentcan be displayed on multiple media platforms by tailoring style sheets: This document will be printed differently than it is displayed.
- 13. CSS Syntax Parts ofa style rule (or statement)
- 14. CSS Syntax: Selector Strings Singleelement type: Multiple element types: All element types: Specific elements by id:
- 15. CSS Syntax: Selector Strings Elementsbelonging 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 Elementsbelonging 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 Elementsbelonging 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 Sourceanchor elements: Element types that are descendents: pseudo-classes
- 19. CSS Syntax: Selector Strings Sourceanchor elements: Element types that are descendants: rule applies to li element that is
- 20. CSS Syntax: Selector Strings Sourceanchor 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 Sourceanchor 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 andHTML
- 23. CSS Rule Cascade Specificity: 1.styleattribute 2.rule with selector: 1. ID 2. class/pseudo-class 3. descendant/element type 4. universal 3.HTML attribute
- 24.
- 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 Computedvalue 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 Textis 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):
- 29.
- 30. CSS Font Properties fontshortcut property: Initial values used if no value specified in font property list (that is, potentially reset)
- 31.
- 32.
- 33.
- 34. CSS Box Model Everyrendered element occupies a box: (or inner edge) (or outer edge)
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41. Normal Flow Layout html body divd1 div d2 div d3 div d4 Top edges of block boxes are in document order
- 42. Normal Flow Layout Centeringcan be achieved by setting both margins to auto
- 43. Beyond Normal Flow CSSallows for boxes to be positioned outside the normal flow: Relative positioning span’s shifted backwards relative to normal flow
- 44. Beyond Normal Flow CSSallows 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 CSSallows 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 Propertiesused 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 Floatpositioning Specify value for float property
- 48. Beyond Normal Flow Absolutepositioning 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 Absolutepositioning Specify location for edges of box relative to positioned containing block
- 50. Beyond Normal Flow Absolutepositioning 10em padding top edge padding left edge
- 51. Beyond Normal Flow Absolutepositioning 8em