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

http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/



CSE 3345 23

More Info

• See the CSS spec for thorough details on selectors

http://www.w3.org/TR/CSS2/selector.html

Selectors

http://www.w3.org/TR/CSS2/selector.html

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

http://gallery.theopalgroup.com/selectoracle/

CSE 3345 26

CSS Specificity/Point System

CSE 3345 27


<p style="color:red;">This is red</p>

CSE 3345 28


#nav { color: red; }

CSE 3345 29


.warning { color: yellow; }p:first-child { padding: 10em; }

CSE 3345 30


a { margin-top: 5em; }

CSE 3345 31


• 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


(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


(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/

http://jsfiddle.net/znpKn/

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/

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

http://www.w3.org/TR/CSS2/box.html

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/

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


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


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


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>



CSE 3345 92

Is the <body> non static?

<html>

<body>

<div>

<p>



CSE 3345 93

Is the <html> non static?

<html>

<body>

<div>

<p>



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>


p { position: absolute; }div { position: relative; }

CSE 3345 97

Finding the containing block

<html>

<body>

<div>

<p>


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

http://dev.opera.com/articles/view/37-css-absolute-and-fixed-positioning/

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


CSSspan { color: red; position: absolute; }

The red fox jumps out of the to go home at night.window

CSE 3345 102


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.

https://developer.mozilla.org/en-US/docs/CSS/position

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/

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


CSE 3345 114


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/

http://css-tricks.com/all-about-floats/

http://css-tricks.com/all-about-floats/

http://www.cssnewbie.com/css-float-property/

http://www.cssnewbie.com/css-float-property/

CSE 3345 120

Float Exercise

• http://jsfiddle.net/blinkmacalahan/mTAkC/

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.

css overview. css quick facts css – cascading style sheets can be used in html, svg, and any xml...

Documents