Beginning css

1,032 views
976 views

Published on

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.

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,032
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Beginning css

  1. 1. Adding Style with CSS The first steps to making your page look fab Thursday, October 14, 2010
  2. 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. 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. 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. 5. The most basic rule • * {color:black} • * = everything • color:black = make text black Thursday, October 14, 2010
  6. 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. 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. 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. 9. Fonts Style for your text Thursday, October 14, 2010
  10. 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. 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. 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. 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. 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. 15. Layout Styles Create grids and text flows Thursday, October 14, 2010
  16. 16. Positioning relative - absolute - fixed Thursday, October 14, 2010
  17. 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. 18. Floating Powerful grids and content flow Thursday, October 14, 2010
  19. 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. 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. 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. 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

×