CSS 101


Published on

The basics of the CSS!

Published in: Technology, Education
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

CSS 101

  1. 1. CSS 101 WebComm School – 10/24/07
  2. 2. Huh? CSS? <ul><li>Does not stand for C orn S mut S idedish </li></ul>
  3. 3. Well, what is it then? <ul><li>Stands for C ascading S tyle S heets </li></ul><ul><li>Simple language that defines how a website should look </li></ul><ul><li>Separates the presentation of a website from the content </li></ul><ul><li>It’s a web standard, and it’s here to stay! </li></ul><ul><li>If done correctly, it will save you a lot of time and effort! </li></ul>
  4. 6. Where did this come from? <ul><li>Håkon Wium Lie proposed idea in 1994 </li></ul><ul><li>W3C created, continues work on CSS </li></ul><ul><li>CSS 1 published December 1996 </li></ul><ul><li>CSS Working Group created in early 1997 </li></ul><ul><li>CSS 2 published May 1998 </li></ul><ul><li>CSS 3 has been under development for the past 8 years </li></ul>
  5. 7. Any problems with CSS? <ul><li>11 years later, and Internet Explorer still does not correctly support CSS 1 </li></ul><ul><li>No browser has full support for CSS 2 </li></ul><ul><li>CSS doesn’t always have the best way of doing things, but it is the best we’ve got </li></ul>
  6. 8. How do I use it? <ul><li>Included into a web page in 3 ways </li></ul><ul><ul><li>External style sheet (best) </li></ul></ul><ul><ul><li>Internal style sheet (not as good) </li></ul></ul><ul><ul><li>Inline style (basically breaking the purpose of CSS) </li></ul></ul><ul><li>Style sheets will cascade , or overwrite similar styles to create one master set of styles </li></ul><ul><ul><li>Inline overwrites internal, which overwrites external, which overwrites browser default </li></ul></ul>
  7. 9. How do I add CSS to my page? <ul><li>External </li></ul><ul><li><link href=“styles.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=“screen&quot; /> </li></ul><ul><li>Internal </li></ul><ul><li><head> </li></ul><ul><li><style type=“text/css”> </li></ul><ul><li>/* styles go here */ </li></ul><ul><li></style> </li></ul><ul><li></head> </li></ul><ul><li>Inline </li></ul><ul><li><p style=“ /* styles go here */ ”>Text</p> </li></ul>
  8. 10. CSS Syntax <ul><li>Selector { </li></ul><ul><li>property: value; </li></ul><ul><li>} </li></ul><ul><li>Selector is what you want to define (HTML element, for example) </li></ul><ul><li>Property is the CSS style you want to change, with a Value that you set it at </li></ul>
  9. 11. CSS Selectors <ul><li>3 types of selectors </li></ul><ul><ul><li>Tag selectors </li></ul></ul><ul><ul><li>ID selectors </li></ul></ul><ul><ul><li>Class selectors </li></ul></ul><ul><li>Selectors should never start with a number, nor should they have spaces in them </li></ul>
  10. 12. Tag Selectors <ul><li>Can be any type of HTML element </li></ul><ul><ul><li>body </li></ul></ul><ul><ul><li>p </li></ul></ul><ul><ul><li>div </li></ul></ul><ul><ul><li>… and more! </li></ul></ul><ul><li>p { </li></ul><ul><li>background-color: red; </li></ul><ul><li>} </li></ul><ul><li>Makes the background of all paragraphs red </li></ul>
  11. 13. ID Selectors <ul><li>You can give an ID to any element to style it differently than other similar elements </li></ul><ul><li>IDs must be unique! You can not have two elements on one page with the same ID! </li></ul><ul><li>p#special { </li></ul><ul><li>background-color: blue; </li></ul><ul><li>} </li></ul><ul><li>One paragraph with id=“special” will now be blue </li></ul>
  12. 14. Class Selectors <ul><li>Can give multiple elements a class to style them differently </li></ul><ul><li>p.semispecial { </li></ul><ul><li>background-color: green; </li></ul><ul><li>} </li></ul><ul><li>Any paragraph with class=“semispecial” will now be green—can be multiple ones on a page </li></ul>
  13. 15. Descendant Selectors <ul><li>You can chain selectors together! Just put a space between them </li></ul><ul><li>body #container p.warning a { </li></ul><ul><li>color: red; </li></ul><ul><li>} </li></ul><ul><li>What element(s) will be affected by this style? </li></ul>
  14. 16. Grouping Selectors <ul><li>You can group selectors together as well with commas </li></ul><ul><li>p.warning, p.special { </li></ul><ul><li>color: red; </li></ul><ul><li>} </li></ul><ul><li>Now both classes, warning and special, will have red text. </li></ul>
  15. 17. Selectors, cont. <ul><li>Name selectors based on what the define, not on what they look like! </li></ul><ul><li>Is anything wrong with this code? </li></ul><ul><li><div class=“red”> </li></ul><ul><li><h1>Warning!</h1> </li></ul><ul><li><p>A hurricane warning is in effect. Stay indoors.</p> </li></ul><ul><li></div> </li></ul><ul><li>------------------------------------------------------ </li></ul><ul><li>.red { </li></ul><ul><li>color: red; </li></ul><ul><li>} </li></ul>
  16. 18. CSS Properties <ul><li>Literally hundreds of properties to choose from to change your webpage’s design </li></ul><ul><li>You can change many things: </li></ul><ul><ul><li>Font and text properties </li></ul></ul><ul><ul><li>Background colors, images </li></ul></ul><ul><ul><li>Positioning </li></ul></ul><ul><ul><li>Borders </li></ul></ul><ul><ul><li>Margin, padding </li></ul></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.