1)   Create a basic stylesheet using HTML <div> tags and a CSS stylehseet  
2)   create a basic HTML document using <div> tags and &quot;id&quot;:   (example)  <div id=&quot;wrapper&quot;> </div>
<div> tags serve as anchors for your Webpage. You can assign IDs to them to differentiate one div tag from another on your...
<html>       <head> <title> My Page       </title>        </head>        <body> This is where <div> tags go        </body>...
4) Save as index.html
5)   Structure within <body> </body> tags (creating anchor points) :    <div id=&quot;wrapper&quot;>          <div id=&quo...
Let’s dissect the example    <div id=&quot;header&quot;>          </div><!--Header--> So <div> </div> is the tag Id=“heade...
6)   Create a document called:   style.css
7)   Link your stylesheet to your .html document in the <head> </head> tags:   <link rel=&quot;stylesheet&quot; type=&quot...
8)  CSS structure:    A) Reference the &quot;class&quot; attribute you created using # B) The define the characteristics  ...
*From this point forward check your work after each slide in Firefox to see what your styling of the <div> tags is doing t...
9)  CSS structure:    A) Reference the &quot;class&quot; attribute you created using # B) The define the attributes       ...
10)  CSS structure:    A) Reference the &quot;class&quot; attribute you created using # B) The define the attributes      ...
11)  CSS structure:    A) Reference the &quot;class&quot; attribute you created using # B) The define the attributes      ...
12)  CSS structure:    A) Reference the &quot;class&quot; attribute you created using # B) The define the attributes      ...
13)  CSS structure:    A) Reference the &quot;class&quot; attribute you created using # B) The define the attributes      ...
14)  CSS structure:    A) At the  top  of document define the <body> attributes:                     body {               ...
This will really only matter when you add text to the body                     body {                   background: #00000...
Upcoming SlideShare
Loading in...5
×

Iml140 cs sbasics_week5

5,379

Published on

This will get you started with working with CSS and show you how to link a stylehseet to an HTML document. It will also begin to show you the power of styling to create structure to your Website.

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

  • Be the first to like this

No Downloads
Views
Total Views
5,379
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

Iml140 cs sbasics_week5

  1. 1. 1) Create a basic stylesheet using HTML <div> tags and a CSS stylehseet  
  2. 2. 2) create a basic HTML document using <div> tags and &quot;id&quot;:   (example) <div id=&quot;wrapper&quot;> </div>
  3. 3. <div> tags serve as anchors for your Webpage. You can assign IDs to them to differentiate one div tag from another on your stylesheet   (example) <div> content </div> (name the div by assigning an ID attribute) <div id=“content”> content </div>
  4. 4. <html>       <head> <title> My Page      </title>        </head>        <body> This is where <div> tags go       </body> </html> 3) HTML Structure:
  5. 5. 4) Save as index.html
  6. 6. 5) Structure within <body> </body> tags (creating anchor points) :    <div id=&quot;wrapper&quot;>          <div id=&quot;header&quot;>          </div><!--Header-->            <div id=&quot;navigation&quot;>               </div><!--Navigation-->     <div id=&quot;menu&quot;>       </div><!--Menu-->        <div id=&quot;content&quot;>          </div><!--Content-->     <div id=&quot;footer&quot;>        </div><!--Footer-->   </div>
  7. 7. Let’s dissect the example    <div id=&quot;header&quot;>          </div><!--Header--> So <div> </div> is the tag Id=“header” is attribute that modifies tag <!—Header--!> just notes and won’t appear on your site, but keeps you organized
  8. 8. 6) Create a document called:   style.css
  9. 9. 7) Link your stylesheet to your .html document in the <head> </head> tags:   <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css />
  10. 10. 8) CSS structure:    A) Reference the &quot;class&quot; attribute you created using # B) The define the characteristics                     #wrapper {                   background: #ffffff;                margin: 60px auto;                width: 900px;                height: 1024px;           } 
  11. 11. *From this point forward check your work after each slide in Firefox to see what your styling of the <div> tags is doing to the document. You will begin to see structure and style emerge     
  12. 12. 9) CSS structure:    A) Reference the &quot;class&quot; attribute you created using # B) The define the attributes                     #header {                   background: #838283;                height: 200px;                width: 900px;                         } 
  13. 13. 10) CSS structure:    A) Reference the &quot;class&quot; attribute you created using # B) The define the attributes                     #navigation {                   background: #a2a2a2;                width: 900px;                height: 20px;                         } 
  14. 14. 11) CSS structure:    A) Reference the &quot;class&quot; attribute you created using # B) The define the attributes                     #menu {                   background: #333333;                float: left;                width: 200px;                height: 624px;                         } 
  15. 15. 12) CSS structure:    A) Reference the &quot;class&quot; attribute you created using # B) The define the attributes                     #content {                   background: #d2d0d2;                width: 900px;                height: 624px;                         } 
  16. 16. 13) CSS structure:    A) Reference the &quot;class&quot; attribute you created using # B) The define the attributes                     #footer {                   background: #838283;                height: 180px;                width: 900px;                         } 
  17. 17. 14) CSS structure:    A) At the top of document define the <body> attributes:                     body {                   background: #f3f2f3;                color: #ffffff;                font family: Trebuchet                   MS, Arial, Times New                   Roman;                font size: 12px;         } 
  18. 18. This will really only matter when you add text to the body                     body {                   background: #000000;                color: #ffffff;                font family: Trebuchet  MS, Arial, Times New Roman;                font size: 12px;         } 
  1. A particular slide catching your eye?

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

×