CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML...
-
Upload
jacob-atkinson -
Category
Documents
-
view
229 -
download
0
Transcript of CSS Overview. CSS Quick Facts CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML...
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
Intro
Three ways to get CSS into HTML
From easiest to best practice1. Inline2. Embedded3. External
Intro
Inline
Using the style attribute
<p style=“color: red; font-family: arial;”>This is awesome content.
</p>
Intro
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
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
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
Disadvantages of Embedded CSS
1. They affect only the pages they’re on2. Increase page load times
Intro
CSE 3345 9
Why use external CSS?
• See previous two slides
Intro
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
CSE 3345 11
CSS Selectors
CSE 3345 12
How does CSS work?
Three key features1. Selector2. Properties3. Values
p { color: red; font-family: arial; }
Property ValueDeclarationSelector
Intro
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
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
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}
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>
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; }
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; }
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.
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; }
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
CSE 3345 22
30 selectors you should memorize
• http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
Selectors
CSE 3345 23
More Info
• See the CSS spec for thorough details on selectors
http://www.w3.org/TR/CSS2/selector.html
Selectors
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
CSE 3345 25
Practice Selectors
Visit Selectoracle to learn about and practice with CSS selectors.
Selectors
CSE 3345 26
CSS Specificity/Point System
CSE 3345 27
CSS Specificity/Point System
<p style="color:red;">This is red</p>
CSE 3345 28
CSS Specificity/Point System
#nav { color: red; }
CSE 3345 29
CSS Specificity/Point System
.warning { color: yellow; }p:first-child { padding: 10em; }
CSE 3345 30
CSS Specificity/Point System
a { margin-top: 5em; }
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
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!!!
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)
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.
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)
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!
CSE 3345 37
Lets Practice
• div #nav li
• ol.ing li
• ol.ing:hover li
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
CSE 3345 39
Inheritance & Units
CSE 3345 40
Inheritance
• Some styles are inherited by the child from their parent
1. Font-family2. Text-decoration3. Text related styles
Inheritance
CSE 3345 41
Inheritance: ones on left will, ones on right will not
Inheritance
Text related Layout related
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
CSE 3345 43
Units
• Absolute: always compute the same value– Points (pt)– Inches (in)
• Relative: computed with respect to something– Pixels (px)– Em– %
Units
CSE 3345 44
Absolute Units
• Don’t use them unless your media type is print
• DON’T USE THEM for building web pages!
Units
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
CSE 3345 46
Relative Units : Em
For fonts and containers• 1em is equal to the current font size of the
element in question.
Units
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
CSE 3345 48
CSS Font Size Fiddle
• http://jsfiddle.net/znpKn/
CSE 3345 49
Box Model
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
CSE 3345 51Box Model
Box Model
• Every page element can specify margin, border, padding, and content.
content
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
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.
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
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
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
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
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
CSE 3345 59
Margin and Padding Example
• http://jsfiddle.net/blinkmacalahan/mrKPC/
CSE 3345 60
Margins Collapsing
• More advanced concept, causes hair pulling!
• Horizontal margins never collapse
Box Model
CSE 3345 61
CSS Moment of Clarity
Adjoining vertical margins of two or more boxes can collapse.
See W3 for details
Box Model
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
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
CSE 3345 64
Vertical Margin Collapsing Example
• http://jsfiddle.net/blinkmacalahan/RHrxL/
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.
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.
CSE 3345 67
Display Property
CSE 3345 68
Display
Essentially there are three choices:
1. block2. inline3. none
Display
CSE 3345 69
Display
In reality there several values for display; however, we won’t focus on the rest.
Display
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
CSE 3345 71
Display: Block
• If an element’s height is not explicitly set, it is determined by the size of its content.
Display
CSE 3345 72
Notable Block Elements
• <div>• <p>• <h1-h6>• <form>• <ul>• <li>
Display
HTML5 Elements• <nav>• <section>• <header>• <footer>
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
CSE 3345 74
Display: Inline
Often described as the ‘opposite’ of block elements
Display
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
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
CSE 3345 77
Notable Inline Elements
• <span>• <a>• <img>• <input>• <address>
Display
HTML5 Elements• <strong>• <em>• <time>
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
CSE 3345 79
Position Property
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.
CSE 3345 81
Position values
• Static• Relative• Absolute• Fixed
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
CSE 3345 83
Position : relative
• Changes the element’s box position relative to where it would appear
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
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
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
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
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.
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.
CSE 3345 90
Finding a non static ancestor
<html>
<body>
<div>
<p>
<html> <body> <div> <p></p> </div> </body></html>
p { position: absolute; }
CSE 3345 91
Is the <div> non static?
<html>
<body>
<div>
<p>
<html> <body> <div> <p></p> </div> </body></html>
p { position: absolute; }
CSE 3345 92
Is the <body> non static?
<html>
<body>
<div>
<p>
<html> <body> <div> <p></p> </div> </body></html>
p { position: absolute; }
CSE 3345 93
Is the <html> non static?
<html>
<body>
<div>
<p>
<html> <body> <div> <p></p> </div> </body></html>
p { position: absolute; }
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.
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.
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; }
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; }
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
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.
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.
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
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
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.
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.
CSE 3345 105
CSS Position Example
• http://jsfiddle.net/blinkmacalahan/xGKZf/
CSE 3345 106
Float Property
CSE 3345 107
Float
• The ability to wrap content around an element
CSE 3345 108
Float
CSE 3345 109
Float
CSE 3345 110
Use float for layouts
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
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.
CSE 3345 113
Float vs Absolute positioning
CSE 3345 114
Float vs Absolute positioning
CSE 3345 115
Clearing the Float
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.
CSE 3345 117
clear : both
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
CSE 3345 119
More info on Float and Clear
• http://css-tricks.com/all-about-floats/
• http://www.cssnewbie.com/css-float-property/
CSE 3345 120
Float Exercise
• http://jsfiddle.net/blinkmacalahan/mTAkC/
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.