Standard:

An Easier Approach to Starting CSS

1. Read this article very carefully before you continue with the assignment:
   
   The Bare Bones, No Crap CSS Text Control Primer
   
   
2. Create a brand new folder and name it CSS.
   
   
3. Open up this starter file, view source and copy it. Open up TextEdit and set your preferences for a plain text file.
   
   
4. Create a new file and save it asstart.htm inside your new CSS folder.
   
   
5. Note that sometimes you will need to look at the source code of your file and sometimes you will need to see what the result looks like in your browser. On the Mac, you can hold down the control key and click open with and then select either TextEdit or your favorite browser (Safari is already installed on our machines).
   
   
6. Now look at start.htm through the browser. Note how there are no margins.
   
   
7. Make another totally blank text file and save it as firststyle.css inside the CSS folder.
   
   
8. Open the file by control-clicking (on the Mac)on it and using open with... and select textedit.
   
   
9. Open up the file start.htm and view source.
   
   
10. Copy this line:
    <link href="firststyle.css" rel="stylesheet" type="text/css">
    and paste it inside the head of your document so it looks like this:
    
    
11. Open up your firststyle.css file by control-clicking on it and using open with textedit.
    
    
12. Paste this code into the file:

    body {
    margin: 200px;
    }

    
    
    
13. Save the firststyle.css file and close it.
    
    
14. Open up the start.htm file or refresh it. It should now display a 200 pixel margin. If it hasn't changed, find out why before you go on.
    
    
15. Next let's add a style to adjust how the H1 header tag looks. Open up your firststyle.css file (remember to use Open with...) and paste this code underneath the code you already have there:
    
    

    H1{
    font-size: 60;
    }

16. Next, open up your start.htm file and put place H1 tags around any word in your text. After you make this change, refresh your document and observe what you have done.
    
    
17. Next, let's work with the P tag (paragraph). This is used for formatted entire paragraphs. Open your style sheet and type the following under the other code:
    
    

    p{
    font-size: 16;
    color: #0000ff;
    }

18. Save your style sheet and then open start.htm.
    
    
19. Pick a little block of text and place the p tag around it like this:
    

    <p> lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto</p>
    
    

20. Open up start.htm in your web browser and see how you have just formatted your paragraph.
    
    
21. Next, we will make a customized style. Let's call our new style "swag." Type the following in your style sheet:
    

    .swag{
    color : #008877;
    font-size: 21;
    font-family:Verdana;
    }
    

22. Next, in your start.htm file, pick a word and apply the style to it like this:
    
    <p class = "swag">dolore</p>
    When you open the file back up in your browser you will see the style applied to the word or words you have selected.

Assignment