CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML...
-
Upload
jacob-atkinson -
Category
Documents
-
view
235 -
download
0
Transcript of CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML...
![Page 1: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/1.jpg)
CSS Overview
![Page 2: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/2.jpg)
CSS Quick Facts
• CSS – Cascading Style Sheets
• Can be used in HTML, SVG, and any XML document.
• Is a style sheet language used for presentation
Intro
![Page 3: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/3.jpg)
Three ways to get CSS into HTML
From easiest to best practice1. Inline2. Embedded3. External
Intro
![Page 4: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/4.jpg)
Inline
Using the style attribute
<p style=“color: red; font-family: arial;”>This is awesome content.
</p>
Intro
![Page 5: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/5.jpg)
Embedded
Placed inside of the <head> element
<head> <style type=“text/css”> p { color: red; font-family: arial; } h1 { margin: 0em; padding: 0em; } </style><head>
Intro
![Page 6: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/6.jpg)
External
index.html
<head> <link rel=“stylesheet” type=“text/css” href=“style.css”/></head>
style.css
p { color: red; font-family: arial; }h1 { margin: 0em; padding: 0em; }
Intro
![Page 7: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/7.jpg)
Inline CSS is Bad!
Avoid this because we want to1. Separate presentation from structure2. Make maintenance easier3. Promote re-usability4. Make our HTML more accessible
Intro
![Page 8: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/8.jpg)
Disadvantages of Embedded CSS
1. They affect only the pages they’re on2. Increase page load times
Intro
![Page 9: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/9.jpg)
CSE 3345 9
Why use external CSS?
• See previous two slides
Intro
![Page 10: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/10.jpg)
CSE 3345 10
External CSS Tip
Don’t use @import for external cssNot as network friendly and will not be cached by browser.
**if you don’t know what @import is, don’t worry**
Intro
![Page 11: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/11.jpg)
CSE 3345 11
CSS Selectors
![Page 12: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/12.jpg)
CSE 3345 12
How does CSS work?
Three key features1. Selector2. Properties3. Values
p { color: red; font-family: arial; }
Property ValueDeclarationSelector
Intro
![Page 13: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/13.jpg)
CSE 3345 13
Selectors
5 ways to select1. element - body2. class - .page3. id - #navigation4. position in document - .page p, p:first-
child, div > a, li + li
5. State – a:visited, input:focus
Selectors
![Page 14: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/14.jpg)
CSE 3345 14
A Subtle Distinction
Class selectorMatches an element that has a class value which contains the attribute value.
Id selectorMatches an element that has a class value which is equal
Selectors
![Page 15: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/15.jpg)
CSE 3345 15
Element Selector
• To select an element, create a selector using the element’s name.
<p>This text will be red</p>
p { color: red}
![Page 16: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/16.jpg)
CSE 3345 16
Style all h2 elements
<body> <h1>History</h1> <section> <article>
<h2>Ancient</h2> <p>Knights and horses use to be best friends.</p> </article> <article> <h2>Colonial</h2> <p>In 1300, men walked around town holding a gun.</p> </article>
</section></body>
![Page 17: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/17.jpg)
CSE 3345 17
Class Selector
• To select an element by class value, create a selector with the class value you want to select prepended with a period.
<div class=“content”>Hello blue text!</div>
.content { color: blue; }
![Page 18: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/18.jpg)
CSE 3345 18
Id Selector
• To select an element by id, create a selector with the id value you want to select prepended with a pound/hash/bang sign.
<div id=“nav”>Hello green text!</div>
#nav { color: green; }
![Page 19: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/19.jpg)
CSE 3345 19
Pseudo-Class Selector
• Create a pseudo-class selector by appending a colon after an element, class, or id selector followed by the pseudo-class.
![Page 20: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/20.jpg)
CSE 3345 20
Pseudo-Class Selector
<p> The last P before the note. </p><div class="note"> <p id=“fred”>The selector applies to me, I’m purple!</p> <p>The selector doesn’t apply to me</p></div>
div p:first-child { color: purple; }div p#fred:first-child { color: purple; }
![Page 21: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/21.jpg)
CSE 3345 21
Specialized SelectorsSelector Selects
* anything
> A child
Two or more selectors separated by white space
A descendant (any connected element that is lower down the tree)
+ An adjacent element (sibling)
:first-child First child element
:nth-child(n) The nth child
p:first-line First formatted line of paragraph
p:first-letter First letter of the first line of a block
Selectors
![Page 22: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/22.jpg)
CSE 3345 22
30 selectors you should memorize
• http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
Selectors
![Page 23: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/23.jpg)
CSE 3345 23
More Info
• See the CSS spec for thorough details on selectors
http://www.w3.org/TR/CSS2/selector.html
Selectors
![Page 24: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/24.jpg)
CSE 3345 24
What will be selected?
#nav ul.links a:hover
<body> <div id=“nav”> <ul class=“links”> <li><a href=“#”>Selectors Rule</a></li> </ul> </div></body>
A possible HTML snippet
Selectors
![Page 25: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/25.jpg)
CSE 3345 25
Practice Selectors
Visit Selectoracle to learn about and practice with CSS selectors.
Selectors
![Page 26: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/26.jpg)
CSE 3345 26
CSS Specificity/Point System
![Page 27: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/27.jpg)
CSE 3345 27
CSS Specificity/Point System
<p style="color:red;">This is red</p>
![Page 28: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/28.jpg)
CSE 3345 28
CSS Specificity/Point System
#nav { color: red; }
![Page 29: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/29.jpg)
CSE 3345 29
CSS Specificity/Point System
.warning { color: yellow; }p:first-child { padding: 10em; }
![Page 30: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/30.jpg)
CSE 3345 30
CSS Specificity/Point System
a { margin-top: 5em; }
![Page 31: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/31.jpg)
CSE 3345 31
CSS Specificity/Point System
• If the element has inline styling, that automatically1 wins 1,0,0,0 points
• For each ID value, apply 0,1,0,0 points
• For each class value (or pseudo-class or attribute selector), apply 0,0,1,0 points
• For each element reference, apply 0,0,0,1 point
![Page 32: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/32.jpg)
CSE 3345 32
Points System (Bad Way!!!)
• Is NOT base 10 system
• (1, 1, 1, 1)
-> (1 * (10^3)) + (1 * (10^2)) + (1 * (10^1)) + (1 * (10^0))
--> (1 * (1000)) + (1 * (100)) + (1 * (10)) + (1 * (1))
---> (1,000)) + (100) + (10) + (1)
----> 1,111-----> WRONG!!!
![Page 33: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/33.jpg)
CSE 3345 33
Points System
• Add the number of selectors for each category and place them in the appropriate column.
• Numbers don’t fill over
• (0, 1, 13, 1)
![Page 34: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/34.jpg)
CSE 3345 34
How to determine a winner
1. Score your selectors in the order they are written
2. Starting from the top, go down the first column looking for the highest score. If you don’t find a winner or two columns are equal, move to the next column (repeat if necessary).
3. If you find two selectors with equal specificity, the selector listed last wins.
![Page 35: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/35.jpg)
CSE 3345 35
How to determine a winner
(0, 1, 1, 10)(0, 0, 13, 5)(0, 0, 7, 3)(0, 0, 2, 1)(0, 0, 1, 0)(0, 1, 2, 2)
![Page 36: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/36.jpg)
CSE 3345 36
How to determine a winner
(0, 1, 1, 10)(0, 0, 13, 5)(0, 0, 7, 3)(0, 0, 2, 1)(0, 0, 1, 0)(0, 1, 2, 2) – winner!
![Page 37: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/37.jpg)
CSE 3345 37
Lets Practice
• div #nav li
• ol.ing li
• ol.ing:hover li
![Page 38: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/38.jpg)
CSE 3345 38
Point System Reminder!
• 13 elements don’t override a class• 13 classes don’t override an id• 13 ids don’t override an inline style
![Page 39: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/39.jpg)
CSE 3345 39
Inheritance & Units
![Page 40: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/40.jpg)
CSE 3345 40
Inheritance
• Some styles are inherited by the child from their parent
1. Font-family2. Text-decoration3. Text related styles
Inheritance
![Page 41: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/41.jpg)
CSE 3345 41
Inheritance: ones on left will, ones on right will not
Inheritance
Text related Layout related
![Page 42: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/42.jpg)
CSE 3345 42
Inheritance
You can force a child to inherit properties from its parent
<div style=“border: 1px solid red;”> <p style=“border: inherit”> I like to inherit stuff. </p></div>
Inheritance
![Page 43: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/43.jpg)
CSE 3345 43
Units
• Absolute: always compute the same value– Points (pt)– Inches (in)
• Relative: computed with respect to something– Pixels (px)– Em– %
Units
![Page 44: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/44.jpg)
CSE 3345 44
Absolute Units
• Don’t use them unless your media type is print
• DON’T USE THEM for building web pages!
Units
![Page 45: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/45.jpg)
CSE 3345 45
Relative Units : Pixels
• Pixels are relative because they are based on the pixel size of the display screen.
• There are a lot of different pixel sizes so almost every screen will be different.
Units
![Page 46: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/46.jpg)
CSE 3345 46
Relative Units : Em
For fonts and containers• 1em is equal to the current font size of the
element in question.
Units
![Page 47: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/47.jpg)
CSE 3345 47
Relative Units : % Percent
For fonts• 100% is equal to the current font size of the
element in question
For containers• 100% is equal to the size of the parent
container
Units
![Page 48: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/48.jpg)
CSE 3345 48
CSS Font Size Fiddle
• http://jsfiddle.net/znpKn/
![Page 49: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/49.jpg)
CSE 3345 49
Box Model
![Page 50: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/50.jpg)
CSE 3345 50
CSS Moment of Clarity
• Every page element is a box.
• Developers can control the size and position of these boxes.
Box Model
![Page 51: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/51.jpg)
CSE 3345 51Box Model
Box Model
• Every page element can specify margin, border, padding, and content.
content
![Page 52: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/52.jpg)
CSE 3345 52
Content Area
• Where the text, image, content, etc. goes.
• Specifying width and height for an element only affects the content area not the entire box (Unless in quirks mode).
Box Model
![Page 53: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/53.jpg)
CSE 3345 53
Brief Aside: Quirks vs Strict Mode
• Quirks mode is what old non standard compliant browsers use.
• Strict Mode is for the W3C Standard.
• If you don’t specify a !DOCTYPE, you’re in quirks mode.
• Don’t be in quirks mode, always use a !DOCTYPE.
![Page 54: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/54.jpg)
CSE 3345 54
Padding: Quick Facts
• Use it to provide padding between borders and content.
• Padding is apart of the box that sits on top of background color.
• Can not have negative values
Box Model
![Page 55: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/55.jpg)
CSE 3345 55
Padding: Quick Facts
• Beware of padding set by the browser’s default style. It sometimes causes undesirable visuals.– <h1> in particular
• For non-replaced inline elements, padding acts weird. Horizontal values will work as expected; however, vertical values won’t have any effect on content above or beneath it.
Box Model
![Page 56: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/56.jpg)
CSE 3345 56
Border: Quick Facts
• Adds a border around your content.– Can specify top, right, left, and/or bottom
• Different border styles.– Solid, dashed, double, groove, etc
• The border is apart of the box that sits on top of the background color.
Box Model
![Page 57: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/57.jpg)
CSE 3345 57
Margin: Quick Facts
• Used to put “blank space” around an object.– Won’t show bg color.
• Can accept negative values– Can cause an element to overlap another element
Box Model
![Page 58: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/58.jpg)
CSE 3345 58
Margin: Quick Facts
• Use this for centering an element inside its parent horizontally.– When an element specifies width and sets margin-left and margin-right to auto, the element will center itself inside its parent.
• For non-replaced inline elements, margins act weird. Horizontal values will work as expected; however, vertical values won’t have any effect on content above or beneath it.
Box Model
![Page 59: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/59.jpg)
CSE 3345 59
Margin and Padding Example
• http://jsfiddle.net/blinkmacalahan/mrKPC/
![Page 60: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/60.jpg)
CSE 3345 60
Margins Collapsing
• More advanced concept, causes hair pulling!
• Horizontal margins never collapse
Box Model
![Page 61: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/61.jpg)
CSE 3345 61
CSS Moment of Clarity
Adjoining vertical margins of two or more boxes can collapse.
See W3 for details
Box Model
![Page 62: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/62.jpg)
CSE 3345 62
Understanding Collapsing Margins
• Two adjacent elements with positive margins will collapse and share the larger specified margin.
• Two adjacent elements with one positive and one negative margin will collapse and share a margin that is the summation of the two.
Box Model
![Page 63: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/63.jpg)
CSE 3345 63
Understanding Collapsing Margins
• Two adjacent elements with one negative and one negative margin will collapse and share the greater margin
• A parent element with no border or padding, will collapse margins with a child element and share the larger of the two margins.
Box Model
![Page 64: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/64.jpg)
CSE 3345 64
Vertical Margin Collapsing Example
• http://jsfiddle.net/blinkmacalahan/RHrxL/
![Page 65: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/65.jpg)
CSE 3345 65
Adding it all up
• The computed dimension of an element is equal to
margin + border + padding + (width | height)
• Block elements’ width grow to fit the parent. See display: block section.
![Page 66: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/66.jpg)
CSE 3345 66
The auto value for Box Model Properties
• For the box model properties, it can only be used on width, height, and margin properties
• Auto values will fill the remaining space needed to fill the parent’s width for block elements.
• Read Chapter 7 in CSS: Def Guide for extremely good coverage on this topic.
![Page 67: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/67.jpg)
CSE 3345 67
Display Property
![Page 68: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/68.jpg)
CSE 3345 68
Display
Essentially there are three choices:
1. block2. inline3. none
Display
![Page 69: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/69.jpg)
CSE 3345 69
Display
In reality there several values for display; however, we won’t focus on the rest.
Display
![Page 70: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/70.jpg)
CSE 3345 70
Display: Block
• Elements generate "new lines" both before and after their boxes when in the normal flow
• It has a specified width and height
• By default, an element’s width defaults to 100% of their parent’s width. (Unless a width is supplied)
Display
![Page 71: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/71.jpg)
CSE 3345 71
Display: Block
• If an element’s height is not explicitly set, it is determined by the size of its content.
Display
![Page 72: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/72.jpg)
CSE 3345 72
Notable Block Elements
• <div>• <p>• <h1-h6>• <form>• <ul>• <li>
Display
HTML5 Elements• <nav>• <section>• <header>• <footer>
![Page 73: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/73.jpg)
CSE 3345 73
Adding it all up: Block Elements
• The sum of a horizontal block-level element’s box in the normal flow always equals the width of its parent.– Aka expand naturally to fill the parent’s width
![Page 74: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/74.jpg)
CSE 3345 74
Display: Inline
Often described as the ‘opposite’ of block elements
Display
![Page 75: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/75.jpg)
CSE 3345 75
Display: Inline
• Elements do not generate "line breaks" before or after themselves
• Elements begin on the same line– This means that inline elements will always be
next to the preceding element, unless it overflows to next line
• Consumes only enough space for its contentDisplay
![Page 76: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/76.jpg)
CSE 3345 76
Display: Inline
• Width and Height is always calculated based on its content.
• Any dimension specified will be ignored for non-replaced elements.
• Vertical margin and padding values for non-replaced elements have no effect on content above or beneath them
Display
![Page 77: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/77.jpg)
CSE 3345 77
Notable Inline Elements
• <span>• <a>• <img>• <input>• <address>
Display
HTML5 Elements• <strong>• <em>• <time>
![Page 78: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/78.jpg)
CSE 3345 78
Display: None
• Elements do not take up any space
• Elements are said to be removed from the document/flow
• Display: none is different than visibility:none
Display
![Page 79: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/79.jpg)
CSE 3345 79
Position Property
![Page 80: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/80.jpg)
CSE 3345 80
Position
• Ability to position elements exactly where you want them to be
• You can specify the top, right, bottom, and left CSS properties to offset an element depending on its position value.
![Page 81: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/81.jpg)
CSE 3345 81
Position values
• Static• Relative• Absolute• Fixed
![Page 82: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/82.jpg)
CSE 3345 82
Position : static
• The element’s box is generated and laid out as normal
• This is the default value for all elements
• top, right, bottom, and
![Page 83: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/83.jpg)
CSE 3345 83
Position : relative
• Changes the element’s box position relative to where it would appear
![Page 84: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/84.jpg)
CSE 3345 84
Position : relativeHTML<div> <span>this is some text</span> <span>I’ll add more text</span></div>
CSSdiv { width: 500px; height: 500px; }span {background-color: red;}span:first-child { position: static; }
This is some text I’ll add more text
![Page 85: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/85.jpg)
CSE 3345 85
Position : relativeHTML<div> <span>this is some text</span> <span>I’ll add more text</span></div>
CSSdiv { width: 500px; height: 500px; }span {background-color: red;}span:first-child { position: relative;}
This is some text I’ll add more text
![Page 86: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/86.jpg)
CSE 3345 86
Position : relativeHTML<div> <span>this is some text</span> <span>I’ll add more text</span></div>
CSSdiv { width: 500px; height: 500px; }span {background-color: red;}span:first-child { position: relative;
top: 50%; }
This is some text
I’ll add more text
![Page 87: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/87.jpg)
CSE 3345 87
Position : relativeHTML<div> <span>this is some text</span> <span>I’ll add more text</span></div>
CSSdiv { width: 500px; height: 500px; }span {background-color: red;}span:first-child { position: relative;
top: 50%; left: 50%;}
This is some text
I’ll add more text
![Page 88: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/88.jpg)
CSE 3345 88
Position : relative
• Although a relatively positioned element might be shifted from its normal place, the space it would have occupied is not filled.
![Page 89: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/89.jpg)
CSE 3345 89
Position : absolute
• The absolutely positioned element is placed with respect to its nearest ancestor that has a position value other than static (aka its containing block).
• To find a non static ancestor, look up the tree from the absolute element for an element that specifies a position property other than static.
![Page 90: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/90.jpg)
CSE 3345 90
Finding a non static ancestor
<html>
<body>
<div>
<p>
<html> <body> <div> <p></p> </div> </body></html>
p { position: absolute; }
![Page 91: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/91.jpg)
CSE 3345 91
Is the <div> non static?
<html>
<body>
<div>
<p>
<html> <body> <div> <p></p> </div> </body></html>
p { position: absolute; }
![Page 92: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/92.jpg)
CSE 3345 92
Is the <body> non static?
<html>
<body>
<div>
<p>
<html> <body> <div> <p></p> </div> </body></html>
p { position: absolute; }
![Page 93: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/93.jpg)
CSE 3345 93
Is the <html> non static?
<html>
<body>
<div>
<p>
<html> <body> <div> <p></p> </div> </body></html>
p { position: absolute; }
![Page 94: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/94.jpg)
CSE 3345 94
Oh No! We can’t find a non static ancestor
• While searching for a non static ancestor, if you reach the top of the document and haven’t found it then the <html> element is your containing block.
![Page 95: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/95.jpg)
CSE 3345 95
Position : absolute
It is common for an author to pick an element that will serve as the containing block for the absolutely positioned element and give it a position of relative with no offsets.
![Page 96: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/96.jpg)
CSE 3345 96
Finding the containing block
<html>
<body>
<div>
<p>
<html> <body> <div> <p></p> </div> </body></html>
p { position: absolute; }div { position: relative; }
![Page 97: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/97.jpg)
CSE 3345 97
Finding the containing block
<html>
<body>
<div>
<p>
<html> <body> <div> <p></p> </div> </body></html>
p { position: absolute; }div { position: relative; }
![Page 98: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/98.jpg)
CSE 3345 98
Position : absolute
• If top/bottom and left/right are auto then absolute elements default to their position: static values.– Look here for details
![Page 99: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/99.jpg)
CSE 3345 99
Position : absolute
• Absolutely positioned elements are completely removed from the document flow.
• That means the space it would normally take is closed up.
![Page 100: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/100.jpg)
CSE 3345 100
Position : absoluteHTML<p>The red fox jumps out of the <span>window</span> to go home at night</p>
CSSspan { color: red; position: static; }
The red fox jumps out of the window to go home at night.
![Page 101: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/101.jpg)
CSE 3345 101
Position : absoluteHTML<p>The red fox jumps out of the <span>window</span> to go home at night</p>
CSSspan { color: red; position: absolute; }
The red fox jumps out of the to go home at night.window
![Page 102: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/102.jpg)
CSE 3345 102
Position : absoluteHTML<p>The red fox jumps out of the <span>window</span> to go home at night</p>
CSSspan { color: red; position: absolute; top: 1em; }
The red fox jumps out of the to go home at night.window
![Page 103: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/103.jpg)
CSE 3345 103
Position : absolute
• Absolutely positioned elements with auto values of height and width are computed to fit the contents of the element (Similar to display = inline).
• Non-replaced absolutely positioned elements can be made to fill the available space by specifying top and bottom for height and left and right for width.
• Check MDN for more details.
![Page 104: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/104.jpg)
CSE 3345 104
Position : fixed
• Just like absolute positioning, except the containing block of the fixed element is the viewport.
• Doesn’t require lengthy search to find containing block. Goes directly to the viewport.
![Page 105: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/105.jpg)
CSE 3345 105
CSS Position Example
• http://jsfiddle.net/blinkmacalahan/xGKZf/
![Page 106: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/106.jpg)
CSE 3345 106
Float Property
![Page 107: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/107.jpg)
CSE 3345 107
Float
• The ability to wrap content around an element
![Page 108: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/108.jpg)
CSE 3345 108
Float
![Page 109: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/109.jpg)
CSE 3345 109
Float
![Page 110: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/110.jpg)
CSE 3345 110
Use float for layouts
![Page 111: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/111.jpg)
CSE 3345 111
CSS Moment of Clarity: Float
• A float box that technically has a display of block, will behave like an inline element. That is because float elements don’t exist on their own line.
• Float elements’ vertical margins won’t collapse
![Page 112: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/112.jpg)
CSE 3345 112
Float vs Absolute positioning
• Floated elements exist outside the normal document flow. However, their space is reserved like relatively positioned elements.
• Absolutely positioned elements are removed from the flow and their space is closed.
![Page 113: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/113.jpg)
CSE 3345 113
Float vs Absolute positioning
![Page 114: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/114.jpg)
CSE 3345 114
Float vs Absolute positioning
![Page 115: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/115.jpg)
CSE 3345 115
Clearing the Float
![Page 116: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/116.jpg)
CSE 3345 116
Clear
• An element that has the clear property set on it will not move up adjacent to the float like the float desires, but will move itself down past the float.
![Page 117: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/117.jpg)
CSE 3345 117
clear : both
![Page 118: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/118.jpg)
CSE 3345 118
Clear values
• none – allows floating on both sides• left – no floated elements allowed on the left• right – no floated elements allowed on the
right• both – no floated elements allow on both
sides
![Page 119: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/119.jpg)
CSE 3345 119
More info on Float and Clear
• http://css-tricks.com/all-about-floats/
• http://www.cssnewbie.com/css-float-property/
![Page 120: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/120.jpg)
CSE 3345 120
Float Exercise
• http://jsfiddle.net/blinkmacalahan/mTAkC/
![Page 121: CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document. Is a style sheet language used for presentation.](https://reader036.fdocuments.net/reader036/viewer/2022081504/5697bfb51a28abf838c9da05/html5/thumbnails/121.jpg)
CSE 3345 121
CSS Troubleshooting• Is the element in the flow or out of the flow?
– “In flow” means the element in question respects the previous elements existence
• Is the element rendering in a block display context or an inline display context?
• Check the box model properties
• Remember vertical margins can collapse for blocked adjacent elements
• Beware default browser style sheets.