CSS for Coders

Intro to CSS What is CSS? ‘Clothing for web pages.’ Some example sites: http://www.cssbeauty.com/ http://www.adactio.com/ http://www.csszengarden.com/

What is CSS?

‘Clothing for web pages.’

Some example sites:

http://www.cssbeauty.com/

http://www.adactio.com/

http://www.csszengarden.com/

Our Design Template Arizona Videography

Arizona Videography

Web Developer Toolbar for Firefox Get it from: http://addons.mozilla.org/addon/60 Or google “ web developer toolbar ”

Get it from: http://addons.mozilla.org/addon/60

Or google “ web developer toolbar ”

CSS Terminology

How to use CSS in XHTML Inline Embedded Link Import Multiple

Inline

Embedded

Link

Import

Multiple

Selectors Id Designated with # mark in css Ex: #header{margin:10px; font-weight:bold;} Only one instance of each id per page Class Designated with a ‘dot’ or period in css. Ex: .more-link{font-style:italic;} Unlike id's, you can have as many instances a class as you want Used to collect elements into 'sets‘ All 'first' elements ex. style them with background:yellow 'read more' links italics class different kinds of images differently (pie charts, graphs, screenshots)‏

Id

Designated with # mark in css

Ex: #header{margin:10px; font-weight:bold;}

Only one instance of each id per page

Class

Designated with a ‘dot’ or period in css.

Ex: .more-link{font-style:italic;}

Unlike id's, you can have as many instances a class as you want

Used to collect elements into 'sets‘

All 'first' elements ex. style them with background:yellow

'read more' links italics

class different kinds of images differently (pie charts, graphs, screenshots)‏

Groups and Descendants Grouped selection - separate with commas h1, h2, h3, .boldtext, #footer{font-weight:bold;} Descendant selectors #footer p{text-align:center; font-style:italic;}

Grouped selection - separate with commas

h1, h2, h3, .boldtext, #footer{font-weight:bold;}

Descendant selectors #footer p{text-align:center; font-style:italic;}

Designer ‘Stuff’ Colors and Backgrounds Change body foreground and background Change 'container' background Change h2 backgrounds Typography Change typography and size

Colors and Backgrounds

Change body foreground and background

Change 'container' background

Change h2 backgrounds

Typography

Change typography and size

Margin, Padding, Border ‘Box Model’ Margin Padding Border

‘Box Model’

Margin

Padding

Border

Layout Box Model ul.navlist{border:2px solid dashed; padding:30px; margin:50px; } Nix border around image Give elements in 'container' some room to breathe Navigation bar from a list using display:inline

Box Model

ul.navlist{border:2px solid dashed; padding:30px; margin:50px; }

Nix border around image

Give elements in 'container' some room to breathe

Navigation bar from a list

using display:inline

Print and Handheld Print How to debug it Remove image border Get rid of nav list, large image Add border to bottom of content Re-align footer paragraph Handheld(Mobile)‏ Nix images Narrow body

Print

How to debug it

Remove image border

Get rid of nav list, large image

Add border to bottom of content

Re-align footer paragraph

Handheld(Mobile)‏

Nix images

Narrow body

Common Fixes Add whitespace Change link color Add Print/Handheld styles Navbar from a list Add image background

Add whitespace

Change link color

Add Print/Handheld styles

Navbar from a list

Add image background

List of CSS Learning Sites Tutorials http://www.alistapart.com http://www.w3schools.com/css/ Inspiration CSS Beauty – http://www.cssbeauty.com CSS Zen Garden – http://www.csszengarden.com

Tutorials

http://www.alistapart.com

http://www.w3schools.com/css/

Inspiration

CSS Beauty – http://www.cssbeauty.com

CSS Zen Garden – http://www.csszengarden.com

What's Important for Coders? Clean Separation of Code/Content Clean Menu Systems Provide 'hooks' for the designers Put a class and id on each body element class should be the site section id should be the page Designers can then use descendant selectors page-by-page id each major 'section' of the page Header Footer Leftside Rightside

Clean Separation of Code/Content

Clean Menu Systems

Provide 'hooks' for the designers

Put a class and id on each body element

class should be the site section

id should be the page

Designers can then use descendant selectors page-by-page

id each major 'section' of the page

Header

Footer

Leftside

Rightside