This slideshow is an introduction to CSS. It's part of a class on becoming an HTML5 web developer. I've fixed some typos in the latest version of the presentation.

1. Adding Style with CSS
The first steps to making your page look fab
Thursday, October 14, 2010

2. Before we start
• Install Firefox and Web Developer Toolbar
• Open http://doglr.com/base-css.html
• We will edit the CSS directly via WDT and
save the changes to /css/start-css.css
Thursday, October 14, 2010

3. What is CSS?
• Cascading Style Sheets
• The styles cascade. Generic rules are over
powered by more specific rules.
• The closer you get to the tag, the more
powerful the rule
• HTML provides structure, CSS provides
style
Thursday, October 14, 2010

4. CSS syntax
• selector {property:value; property:value;}
• selector selector {property:value;}
• selector.class {property:value}
• selector#id {property:value}
Thursday, October 14, 2010

5. The most basic rule
• * {color:black}
• * = everything
• color:black = make text black
Thursday, October 14, 2010

6. Style a container
• The uppermost container: html
• html {background: #000000; }
• #000000 = hexadecimal code for black
• #000 = #000000
• A specific container
• html body aside p {color:pink;}
Thursday, October 14, 2010

7. Id and Class
• An id can only be used once on a page.
• A class can be used multiple times
• Keep the names functional, not stylistic, i.e.
class=”intro” not class=”bigletter”
• header#hd = the header with id=”hd”
• p.first = the paragraph with class=”first”
Thursday, October 14, 2010

8. Popular CSS properties
• border: 1px solid red;
• margin: 10px 0 5px 10px; /* top, right,
bottom, left */
• background-color: yellow;
• width:500px;
• display:block;
Thursday, October 14, 2010

9. Fonts
Style for your text
Thursday, October 14, 2010

10. What is an em?
• The size of the letter m
• A proportional size, that allows the user to
resize the text.
• A better measurement for fonts and
container widths.
•
Thursday, October 14, 2010

11. What is a px?
• A single pixel.
• Proportional to the size of the screen.
• Good for objects that don’t resize, such as
images
Thursday, October 14, 2010

12. What is a pt?
• A point.
• Something used for printing on paper, not
the web.
• Often times you’ll see this for web display
and it’s not a good idea.
• 1px does not equal 1pt.
Thursday, October 14, 2010

13. Font Families
• Serifs have feet and tails. These are good
for reading paragraphs and large bodies of
text. They are mostly used on paper.
• Sans Serifs do not have feet and tails. These
are good for the web.
• Don’t use comic sans!
Thursday, October 14, 2010

14. Popular Font Rules
• font-family: woot, helvetica, arial, sans-serif;
• The browser will use the first font your
computer has available.
• font-size: 1.1 em;
• color: #808080;
• text-decoration:none;
Thursday, October 14, 2010

15. Layout Styles
Create grids and text flows
Thursday, October 14, 2010

16. Positioning
relative - absolute - fixed
Thursday, October 14, 2010

17. Position
• Position:relative; The object remains in the
content flow. This is a basic status, but is
not a default.
• Position:absolute; Position the item
absolutely to it’s closest relatively
positioned parent.
• Position:fixed; object is positioned
absolutely, but doesn’t move as the user
scrolls.
Thursday, October 14, 2010

18. Floating
Powerful grids and content flow
Thursday, October 14, 2010

19. Floats
• Float:left; /* or right */
• The object will move as far to one side as
it can. It stops when it hits something
solid.
• Clear:left /* or right, both */
• The object will drop below anything
previously floated
Thursday, October 14, 2010

20. Text Flow
• Text and other elements will flow around
an object that has been floated.
• This gives you the floated image effect.
This text will
flow around
the floated box.
Thursday, October 14, 2010

21. Next Class
• Why you should hate Internet Explorer
• How to use libraries
• Background images
• Intro to CSS3, pseudo-selectors, attribute
selectors...
Thursday, October 14, 2010

22. Resources
• http://csszengarden.com
• Subscribe to http://www.css-discuss.org/
• http://css.maxdesign.com.au/
• http://www.last-child.com/category/css/
Thursday, October 14, 2010