20120424 c

549 views

Published on

wmn601

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

  • Be the first to like this

No Downloads
Views
Total views
549
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 20120424 c

    1. 1. .css“Presentation Semantics”MIME TYPE “text/css”Allows document to be designedindependently of markupCan be used with other types of elements-based markup like XMLhttp://www.csszengarden.com/
    2. 2. Development ChallengesPay attention, or you’ll get burnt!TE TO TOEPForget IE 6!Yahoo Standard:http://developer.yahoo.com/yui/reset/Eric Meyers’ Reset:http://meyerweb.com/eric/tools/css/reset/
    3. 3. Example 01<html><head><style type="text/css">body { background-color:#d0e4fe; }h1 { color:orange; text-align:center; }p { font-family:"Times New Roman"; font-size:20px; }</style></head><body><h1>CSS example!</h1><p>This is a paragraph.</p>
    4. 4. Example 02/* This is a valid css comment! */// This will not work as a comment :-(p { /* selector */ color:red; /* declaration #1 | DECLARATIONS ARE */ text-align:center; /* declaration #2 | KEY:VALUE PAIRS! */ }/* This is just as valid: */p {color:red; text-align:center;}
    5. 5. ID v. CLASS: ID<html><head><style type="text/css">#para1 { /*IDs start with “#”*/ text-align:center; color:red;}</style></head><body> <p id="para1">Hello World!</p> <p>This paragraph is not affected by the #para1 style.</p></body></html>
    6. 6. ID v. CLASS: CLASS<html><head><style type="text/css">.center { /*CLASSes start with “.”*/text-align:center;}</style></head><body> <h1 class="center">Center-aligned heading</h1> <p class="center">Center-aligned paragraph.</p></body></html>
    7. 7. CLASS last thing:<html><head><style type="text/css">p.center { /* You can combine */ text-align:center; /* classes and element types! */}</style></head><body> <h1 class="center">This heading will not be affected</h1> <p class="center">This paragraph will be center-aligned.</p></body></html>
    8. 8. ID v. CLASS<html><head><style type="text/css">/* Easy to keep it straight if you remember: IDs start with # and works on a SINGLE element. CLASSes start with . and work on MULTIPLE elements.*/</style></head><body>That’s all you have to remember!</body></html>
    9. 9. Three Ways to UseInternal is what we’ve been using.External is far more common:<head> <link rel="stylesheet" type="text/css" href="mystyles.css" /></head>Then in "mystyles.css":hr {color:red;}p {margin-left:20px;}body {background-image:url("images/bgimg.jpg");}CSS also supports inline styles:<p style="color:orange;margin-left:20px">I’m an orange paragraph!</p>
    10. 10. CSS COLORThree examples of giving elements abackground color of “red.”HEX:h1 {background-color:#FF0000;}RGB:p {background-color:rgb(255, 0, 0);}COLOR NAME:div {background-color:red;}http://cloford.com/resources/colours/500col.htm
    11. 11. Text/* general */em { font-style: italic; font-weight: bold; }strong { text-transform: uppercase; font-weight: bold; }/* transformations */h2 { text-transform: lowercase; }/* sizes: best to set in relative terms! */h1 { font-size: 200%; }h2 { font-size: 150%; }h3 { font-size: 100%; }/* typefaces */body { font-family: Verdana, sans-serif; }h1,h2 { font-family: Garamond, "Times New Roman", serif; }/* NOTE: If you’re going to use .css then all body level text should AT LEAST be set in a <p>...</p> tag. */
    12. 12. Linksa:link { color: rgb(0, 0, 100); } /* for unvisited links */a:visited { color: rgb(100, 0, 100); } /* for visited links */a:active { color: rgb(255, 0, 100); } /* when link is clicked */a:hover { color: rgb(0, 100, 255); } /* when mouse is over link *//* Link without an underline:*/a.plain { text-decoration: none; }/* HTML to test:Here is a link that is <a class="plain" href="mypage.html">notunderlined!</a>*/
    13. 13. Color and StylesBackgrounds, Text, Fonts, Links, Lists,Tables...etc.http://www.google.com/webfontsPlease look up formatting syntax onyour own as there are literallyHUNDREDS of resources out there!Dreamweaver can be your friend...
    14. 14. The Box ModelContent = text and images Padding=area around contentBorder = area around padding & content Margin = area around border
    15. 15. Example 03<html><head><style type="text/css">div.ex { width:235px; padding:25px; border:5px solid gray; margin:0px;}</style></head><body><img src="1px.gif" width="295" height="1" /><br /><br /><div class="ex">The line above is 295 wide.<br />The total width of this element is also 295px.</div></body></html>

    ×