Beginning css
•
0 j'aime•587 vues
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.
Recommandé
Contenu connexe
Similaire à Beginning css
Similaire à Beginning css (15)
Plus de Ted Drake
Plus de Ted Drake (20)
Dernier
Dernier (20)
Beginning css
- 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