CSS

Week 4

CDGD304 - Fall 2011
http://bit.ly/massart-web304-4

Order of Business

Review Homework
CSS in Depth
CSS Layout Basics
CSS Styling
Exercises

Homework Review

Let's Talk CSS

Cascading Style Sheets

Used for “presentation” of your HTML
Controls the styles of your page
Also Controls the layout of your page (where stuff is positioned)
Can have different styles different media formats (eg. print, screen, mobile)

What is a style?

Pay attention to your class and id names!

You can't use spaces.

You shouldn't use underscores (_) - altough technically now permitted

Use camelCase or dashes-to-separate-names

I'd recommend dashes - css uses Dashses (background-color, font-family),
Javascript uses camelCase

Be consistent! - easier to read and remember what you wrote.

Available selectors

name of element (e.g. p, div, h1)
class name preﬁxed with a period (.)
HTML <div class=‘my-class-name’> This is my class name </div>
CSS .my-class-name { font-size: 25px; }
element id preﬁxed with a pound sign (#)
HTML <div id=‘my-id’> This is my id</div>
CSS #my-id { color: red; }

Selectors

<style>

</style>

Selector combinations

Can have a declaration apply to multiple styles with a comma (,)
- .my-class-one, .my-class-two { color:red; }

Can “Cascade” styles with spaces between selectors

HTML

<div id='outer'><p> ... </p></div>

CSS

#outer p  { color:red; } /* only p's inside of outer */

Can select only "child" styles with > signs

HTML

<div id='outer'><div><div> ... </div></div></div>

CSS

#outer > div  { background-color:red; } /* only div's that are direct children of outer */

Psudeo-classes that apply to elements in certain conditions
- a:hover { color:blue; } /* only links we are hovering over */
  a:visited { color:red; } /* links we've visited already */
  p:first-child { color:red; } /* the first paragraph in a container */
Also can select by arbitrary attributes
- input[type=radio]{ color:blue; } /* only radio buttons */

Selector Combination Exercise

<style>

</style>
<header>
  <h1>My Site!</h1>
  <nav><ul>
    <li><a href='#'>Link 1</a></li>
    <li><a href='#'>Link 2</a></li>
  </ul></nav>
</header>

<section id='content'>
  <article class='blog-post'>
    <h1>Blog Post 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac elit at nisl sagittis consequat sed eget tellus. Aliquam gravida, nunc sit amet viverra dictum, nibh justo semper massa</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac elit at nisl sagittis consequat sed eget tellus. Aliquam gravida, nunc sit amet viverra dictum, nibh justo semper massa</p>
  </article>
  <article class='blog-post'>
    <h1>Blog Post 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac elit at nisl sagittis consequat sed eget tellus. Aliquam gravida, nunc sit amet viverra dictum, nibh justo semper massa</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac elit at nisl sagittis consequat sed eget tellus. Aliquam gravida, nunc sit amet viverra dictum, nibh justo semper massa</p>
  </article>

</section>
<footer>
  <a href='#'>Link 1</a> | <a href='#'>Link 2</a>
</footer>

Properties

There are lots of them
Two Primary types: Layout, Style
(Padding is layout, color is style)
Style generally inherit, Layout don’t
Sometimes can be combined into one: e.g.
font = font-family, font-style, font-variant, ...
background = background-color, background-image, background-repeat, background-attachment, background-position ...
padding = padding-top, padding-right, padding-bottom, padding-left ...
Layout box properties go clockwise from midnight: top, right, bottom, left

Values

colors: #FFF, #FFFFFF, rgb(255,255,255), gray, black, red
numbers: 0, 25px, 1.1em, 100%
em's are 'M' height - and these inherit (multiply)
“inherit” is a special property to force inheritence

Style Properties

color
font (style, variant, weight, size, family)
text-align
text-indent
text-decoration
line-height
letter-spacing, word-spacing

Style Properties

<style>
p {


}	
</style>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac elit at nisl sagittis consequat sed eget tellus. Aliquam gravida, nunc sit amet viverra dictum, nibh justo semper massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac elit at nisl sagittis consequat sed eget tellus. Aliquam gravida, nunc sit amet viverra dictum, nibh justo semper massa</p>

Layout Properties

Box model: margin, padding, width, height
top, bottom, left, right
border
position [ static, relative, absolute ]
ﬂoat [ left, right, none ], clear [ left, right, both]
display [none, block, inline inline-block]
visibility [visible, hidden]
background (color, image, repeat, position)
CSS3 (border-radius, box-shadow)

Layout = Box Model

Understanding floats + Positioning

http://www.barelyfitz.com/screencast/html-training/css/positioning/

Positioning 101

Use “position:relative” to create an zone for absolutely positioning content
Use “position:absolute; top:...; left:....” to place something inside that zone.

Exercise: we want this

Positioning Exercise

<style>
  #container { background-color:lightgray; margin:20px; height:300px; }


</style>
<div id='site'>
Above Container
<div id='container'>
  <div id='top-left'>I'm in the top left!</div>
  <div id='bottom-right'>I'm in the bottom right!</div>
  <div class='blocks'>
	  <div class='block'></div>
	  <div class='block'></div>
	  <div class='block'></div>
	  <div class='block'></div>
  </div>
</div>
Below Container
</div>

Cascading - What Color?

<style>
  p { color:red;}
  .blue { color:blue; }
  #menu p { color:black; }
</style>

<div id="menu"><p class='blue'>This is the paragraph</p></div>

Cascading Hierarchy

Inline style (those defined directly with a style='....' attribute in the tag)
Number of ID selectors
Number of Class selectors
Number of tag selectors
Order of appearance last to first
Style inheritance

Organizing Your CSS

Start with your reset (see next slide)
Set your body
Set your base element styles (p, h1, h2, blockqoute)
Set your reusable class styles
Set your layout styles
Set your module styles (additional sub-themes like blogs,custom pages, etc )

Techniques

Start with
your reset

Eric Meyer Reset
http://meyerweb.com/eric/tools/css/reset/

http://bit.ly/meyerreset

Centering Content

Give it a width and set margin: 0 auto;

section#content {
  margin:0 auto;
  width:960px;
}

Nitty Gritty

Using HTML5 tags - use a shiv
 http://code.google.com/p/html5shiv/
(Or Modernizr, which we’ll discuss later)

Link to your stylesheet with a link tag in your <head>:
 

<link type=‘text/css’ rel=‘stylesheet’ href=‘style.css’ />

Logo Replacement

<style>
#site-header h1 a {
 display:block;  
 width:300px; 
 height:80px;  
 background:url(images/logo.png) no-repeat top left; 
 text-indent:-9999px;
 }
</style>
<header id='site-header'>
 <h1><a href='#'>My Awesome Website</a></h1>
</header>

Exercise: navbar

Navbar: Make this

<style>
	/* Style it here */

</style>
<nav id='main-menu'>
<ul>
	<li>
		<a href="#">Home</a></li>
	<li>
		<a href="#">About</a></li>
	<li>
		<a href="#">Blog</a></li>
	<li class='last'>
		<a href="#">Contact</a></li>
</ul>
</nav>

Basic Chop 101

Relatively positioned header
Absolutely positioned top nav
Image replacement logo
Floated menu items
Floated body
Relatively positioned footer

CSS Code

body { width:960px; margin:0 auto; }
		
header#site-header {
  position:relative; height:80px;
}

#site-header h1 a { 
  display:block;	
  text-indent:-9999px;    
  position:absolute;
  width:300px; height:80px;
  background:url(logo.png) no-repeat left top;
}
nav#top-nav { position:absolute; right:0px; top:0px; }

nav#main-menu { height:30px; background-color:black; }
nav#main-menu ul li { display:block; float:left; padding:0 5px; }
nav#main-menu ul li a { display:block; color:white; padding:5px 5px; background-color:blue; }

section#page-content { float:left; width:550px; padding:50px 20px; }
aside#sidebar { float:right; width:220px; padding:50px 10px;; }

footer#site-footer {     clear:both; background-color:black;     color:white; padding:10px 0px;  }

In Class Exercise 1

Default paragraphs to two paragraphs, with floated images

End Result

Floats, Clears and Clearfix

Put a background on your wrapper. What happens?
Have to clear your floats, or use a clearfix.
Will affect your content centering margin.

Clearfix

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
	}

.clearfix { display: inline-block; }
  html[xmlns] .clearfix { display: block; }
  * html .clearfix { height: 1%; }

Homework

Reading

Coding

Take your cats vs. dogs chop and style it (put it in your 04-class-css folder)
Finish exercise #2 (robot styling in your GitHub folder)

CSS

Week 4

Order of Business

Review Homework

CSS in Depth

CSS Layout Basics

CSS Styling

Exercises

Homework Review

Let's Talk CSS

Cascading Style Sheets

Used for “presentation” of your HTML

Controls the styles of your page

Also Controls the layout of your page (where stuff is positioned)

Can have different styles different media formats (eg. print, screen, mobile)

What is a style?

Pay attention to your class and id names!

You can't use spaces.

You shouldn't use underscores (_) - altough technically now permitted

Use camelCase or dashes-to-separate-names

I'd recommend dashes - css uses Dashses (background-color, font-family), Javascript uses camelCase

Be consistent! - easier to read and remember what you wrote.

Available selectors

name of element (e.g. p, div, h1)

class name preﬁxed with a period (.) HTML <div class=‘my-class-name’> This is my class name </div> CSS .my-class-name { font-size: 25px; }

element id preﬁxed with a pound sign (#) HTML <div id=‘my-id’> This is my id</div> CSS #my-id { color: red; }

Selectors

Selector combinations

Can have a declaration apply to multiple styles with a comma (,)

Can “Cascade” styles with spaces between selectors

Can select only "child" styles with > signs

Psudeo-classes that apply to elements in certain conditions

Also can select by arbitrary attributes

Selector Combination Exercise

Properties

There are lots of them

Two Primary types: Layout, Style (Padding is layout, color is style)

Style generally inherit, Layout don’t

Sometimes can be combined into one: e.g. font = font-family, font-style, font-variant, ... background = background-color, background-image, background-repeat, background-attachment, background-position ... padding = padding-top, padding-right, padding-bottom, padding-left ...

Layout box properties go clockwise from midnight: top, right, bottom, left

Values

colors: #FFF, #FFFFFF, rgb(255,255,255), gray, black, red

numbers: 0, 25px, 1.1em, 100% em's are 'M' height - and these inherit (multiply)

“inherit” is a special property to force inheritence

Style Properties

color

font (style, variant, weight, size, family)

text-align

text-indent

text-decoration

line-height

letter-spacing, word-spacing

Style Properties

Layout Properties

Box model: margin, padding, width, height

top, bottom, left, right

border

position [ static, relative, absolute ]

ﬂoat [ left, right, none ], clear [ left, right, both]

display [none, block, inline inline-block]

visibility [visible, hidden]

background (color, image, repeat, position)

CSS3 (border-radius, box-shadow)

Layout = Box Model

Understanding floats + Positioning

Positioning 101

Use “position:relative” to create an zone for absolutely positioning content

Use “position:absolute; top:...; left:....” to place something inside that zone.

Exercise: we want this

Positioning Exercise

Cascading - What Color?

Cascading Hierarchy

Inline style (those defined directly with a style='....' attribute in the tag)

Number of ID selectors

Number of Class selectors

Number of tag selectors

Order of appearance last to first

Style inheritance

Organizing Your CSS

Start with your reset (see next slide)

I'd recommend dashes - css uses Dashses (background-color, font-family),
Javascript uses camelCase

class name preﬁxed with a period (.)
HTML <div class=‘my-class-name’> This is my class name </div>
CSS .my-class-name { font-size: 25px; }

element id preﬁxed with a pound sign (#)
HTML <div id=‘my-id’> This is my id</div>
CSS #my-id { color: red; }

Two Primary types: Layout, Style
(Padding is layout, color is style)

Sometimes can be combined into one: e.g.
font = font-family, font-style, font-variant, ...
background = background-color, background-image, background-repeat, background-attachment, background-position ...
padding = padding-top, padding-right, padding-bottom, padding-left ...

numbers: 0, 25px, 1.1em, 100%
em's are 'M' height - and these inherit (multiply)

Start with
your reset

Using HTML5 tags - use a shiv
 http://code.google.com/p/html5shiv/
(Or Modernizr, which we’ll discuss later)

Link to your stylesheet with a link tag in your <head>:
 
<link type=‘text/css’ rel=‘stylesheet’ href=‘style.css’ />