Lecture 5 CSS Relative absolute and Floating Positioning

Lecture 5: CSS Relative, absolute, and Floating Positioning, Cascading Style Sheet, and Inheritance

Beyond The Normal Flow �Normal flow is the default way in which a browser will format an HTML document. �Three CSS alternatives to normal flow. They are used to control the position of boxes in a browser window �Relative position �Float position �Absolute position

Relative Position �Relative position: the position is altered relative to its normal flow position. �For example, Blue Red �If. right{ position: relative; right: 10 px } Blue Red

Relative Position �The type of positioning for an element is defined by specifying two style properties. �Position: �static (initial value): indicate normal flow �relative: indicate relative positioning �Absolute: indicate absolute positioning �Four properties apply to positioned elements: left, right, top, bottom.

Relative Position �The value for left, right, top, bottom is either a length or a percentage. The value auto means the default value. �. left { position: relative; left: 10 px; } Note: a positive value for the left property moves the box to the right by the specified amount. What does “top: -20 px” do to its box?

Float Positioning �Float positioning is often used when embedding images within a paragraph. �It often produces a visual effect of text wrapping around the floated block. �A floated inline box becomes a block box for display purposes, which means you can specify width and height for the box.

Absolute Positioning �Absolute positioning offers total control over the placement of boxes in the browser window. It is useful to be able to place a box exactly where you want it. �You can use left, right, top, and bottom properties to place the box relative to a containing block (A containing block is the nearest positioned ancestor. A positioned element has position value other than static) �If the box of an inline element is positioned absolutely, the box becomes a block box, and therefore can have its width set explicitly

External CSS �An external style sheet is ideal when the style is applied to many pages. �How to link a HTML file to a given. css file? <head> <link rel=“stylesheet” type=“text/css” href=“mystyle. css”> </head>

Relative Address VS Absolute Address �C: //CGS 3066/Lecture 1/Hello. World. html �This is an absolute address �A relative address is a short address relative to a base address. �Its relative address is Hello. World. html, if the base address is C: //CGS 3066/Lecture 1/ �Base address is C: //CGS 3066/Lecture 1/ �Absolute. Address = Base. Address + Relative. Address

Cascading of Style Sheet Rules �Cascading Rules �* { font-weight: bold }, which applies to every element of the HTML document. #p 1, #p 3{ background-color: yellow} �Now I specify #p 3{ font-weight: normal}, which rule would apply to the font-weight property of id=“p 3”?

Cascading of Style Sheet Rules �The general question is: which rule applies to a given element when there are multiple style declarations apply to the property of that element? �Rule Cascading: a multistage sorting process that selects a single declaration that will supply the property value. �First Rule: deciding which external style sheets apply to the document.

Cascading of Style Sheet Rules �Second stage: associate an origin and weight with every declaration that applies to a given property of a given element. �The origin of a style sheet declaration is who wrote the declaration. �Author: If the declaration is part of an external or embedded style sheet or is part of the style attribute of the given element, then the author of the HTML document is the origin �User Agent: Browser �User: browsers allow users to provide a style sheet or indicate style preferences that are treated as style rules.

Cascading of Style Sheet Rules �Besides to origin, every author and user style declaration has one of two weight values: normal and important �A declaration has important weight if it ends with an exclamation mark (!) followed by the word “important” �E. g. , p{ font-size: 12 pt; color: red !important}

Cascading of Style Sheet Rules �Once the origin and weight of all declarations applying to an element property have been established, they are prioritized (from high to low) as follows: 1. Important declaration with user origin. 2. Important declaration with author origin 3. Normal declaration with author origin 4. Normal declaration with user origin 5. Any declaration with user agent �If one bin has a single declaration, the declaration is applied to the element property and we are done!

Cascading of Style Sheet Rules �If the top nonempty bin of the weight-origin sort has multiple style declarations for a single element property, then sort the declarations according to their specificity. �If a declaration is part of the value of a style attribute, then it is given the highest possible specificity value. �If a declaration is a ruleset, then its specificity is determined by the selector(s) for the ruleset.

Cascading of Style Sheet Rules �What is rule set? �h 1, #head 5, . big{font-size: 12 pt} is treated as the equivalent three rulesets: �h 1{font-size: 12 pt} �#head 5{font-size: 12 pt} �. big{font-size: 12 pt}

Cascading of Style Sheet Rules �From highest to lowest specificity: �ID selectors �Class selectors �Descendant and type selectors �Universal selectors (*) �We select a ruleset from the first nonempty bin. �If two rulesets appears in the same bin, we search lower bins for the first recurrence of either ruleset. If one of the ruleset recurs before the other, then it is chosen. e. g. , li. special, *. special

Cascading of Style Sheet Rules �Final step is to chose the declaration corresponding to the rule that appears farthest down in the list is chosen. style. Cascade. html �For example: Style. css p{ color: green } <title>Style. Cascading. Rule</title> <style type=“text/css”> p{color : red} </style> <link rel=“stylesheet” type=“text/css” href=“style. css”/> <style type=“text/css”> p{color: yellow} </style>

Cascading of Style Sheet Rules Alternate style sheets 1. Select style sheets and insert rules for HTML attributes 2. Prioritize declarations by origin and weight 3. Break ties based on specificity (style attribute or most specific selector) 4. Break ties based on position within style sheet (last occurring wins)

Style Inheritance �Question: if a property of an element has no associated style declarations, how is the value of the property determined? �The answer: the value is inherited from the parent of the element. �An element inherits a value for one of its properties by checking to see if its parent element in the document has a value for that property. If so, inheriting the parent’s value. �If no ancestor element has a value for the property, then the property’s initial value is used (by CSS specification)

Style Inheritance �A point about inheritance �A number of properties are not inheritable, such as height property. �Please consult the CSS specifications if in doubt.

Next Class �Some new HTML 5 elements �<audio>, <video>, <source>, <track>, <embed> �Iframe �Video �Media