1. IN THE DOCUMENT OBJECT MODEL, EACH LINE OF HTML IS AN ELEMENT (AN OBJECT), ABLE TO HAVE ATTRIBUTES, PROPERTIES AND VALUES. CSS TELLS THE BROWSER HOW TO STYLE EACH ELEMENT, BASED ON SELECTORS: ELEMENT TYPE, CLASS OR ID. WE’LL LOOK AT THE POSITION PROPERTY, AND HOW CSS RESOLVES CONFLICTS BETWEEN STYLING INSTRUCTIONS The position property; CSS specificity hierarchy

2. CSS position property Positioning elements with CSS can be tricky. The position property specifies the type of positioning method used for an element. There are four different position values: static, relative, fixed and absolute. Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value (in pixels).

3. position:static HTML elements are positioned static by default. The top, bottom, left, and right properties do not affect static positioned elements. An element with position: static is not positioned in any special way; it is always positioned according to the normal flow of the page. This element has position: static, and a border: div { position: static; border: 3px solid #73AD21; } Add position:static to a in your project. What happens?

4. position:fixed An element with position:fixed is always in the same place on the screen, even if the page scrolls. Use top, right, bottom, and left properties to position a fixed element. Fixed elements do not leave a gap in the page when they move. This has position:fixed: div { position: fixed; bottom: 0; right: 0; width: 300px; } Add position:fixed to a in your project. Try left, right, bottom and top properties with different values.

5. position:relative An element with position: relative is positioned relative to its static position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its static position. Other content will not move to fit into any gaps. This element has position:relative: div { position: relative; left: 30px; bottom: 45px; } Add position:fixed to a in your project. Try left, right, bottom and top properties with different values.

6. position:absolute An element with position: absolute is positioned relative to the nearest positioned ancestor. If an absolute positioned element has no positioned ancestors, it uses the document body, and acts like position:fixed. This element has position:absolute: div { position: absolute; top: 80px; width: 200px; height: 100px; } Add position:absolute to a in your project. Try left, right, bottom and top properties with different values.

7. z-index property An element can overlap other elements. The z-index property specifies the stack order. An element with greater index goes in front of an element with a lower index. An element can have a positive or negative stack order: img { position: absolute; left: 0px; top: 0px; z-index: -1; } If two elements overlap without a z-index, the element positioned last in the HTML code will be shown on top. Add different z-indexes to elements in your project.

8. How CSS moves A “cascade” is a waterfall, or a series of steps in a process. As the browser parses (reads each line) of styling instructions in the CSS file, the instructions form a “cascade” of steps. That’s where we get the term Cascading Style Sheets. The lower an instruction on the cascade, the more powerful it is, and it will override previous instructions if they conflict.

9. CSS and specificity hierarchy Styling instructions come from the browser, inline CSS, embedded stylesheets and external stylesheets. Sometimes, styles may conflict. Specificity determines which CSS rules the browser applies. Styling first comes from the browser. If your HTML document has no CSS, your browser will apply its own styles. Users may change some browser styles. For example, you can set your browser’s default font and font size.

10. Dealing with conflicts Professional Web developers often deal with style problems. For example, they may apply CSS to some elements, but nothing happens, or the wrong thing happens. This is because of specificity problems. Every selector has a place in the specificity hierarchy: element, class or id. If CSS applies conflicting styles to the same element, the one with higher specificity wins. Also, the closer an instruction is to the element it is styling, the more specific (powerful) the instruction is.

11. Element and class specificity Elements are the least specific. Let’s say you style elements like: p {color:brown;} But you then say and.parastyle {color:green;} Then, all the elements of class parastyle will be green, NOT brown.

12. Id specificity Ids are even more specific. If you say and then #singlestyle{color:blue;} in the stylesheet Then, that one element will be blue, even though the class selector says brown. However, the will still keep whatever other CSS properties it gets from the element or class selectors (like size, hover, etc.), as long as they do not conflict with the id attributes.

13. Selector hierarchy summary If the element and class selectors give conflicting instructions, class wins. If the id and class selectors give conflicting instructions, id wins. However, where the style instructions are given, is also important.

14. It matters where the instructions are The browser’s stylesheet is least powerful (least specific). If you have an external stylesheet, that is more specific than the browser. If you embed the stylesheet in the element, that is more specific than the external stylesheet If you use inline style, like that is most specific of all. The last ru le defined overrides any previous, conflicting rules. Or: the styling instruction that is closest to the actual element will be the most powerful instruction.

15. Discuss When is it better to use an external stylesheet? When is it better to use an internal (embedded) stylesheet? When is it better to use inline style?