My own tutorial

  1. Start a new Composer page in Sea Monkey.
    • OR (use TextWrangeler, save. Open in Chrome to see what it looks like. IF YOU DON’T WANT TO LOOSE YOUR PLACE in the HTML code, this is the easier way to go.  Once you save, you switch over and refresh in Chrome and when you go back to fix the code, you are still in the place you are trying to fix.  This saves a lot of time if you are doing lots of code.)
  2. Always start with the required stuff:
    • <!DOCTYPE html>
  3. Things between the <head>and the </head>  are the title and the styles (only if you are leaving the styles in the document)
  4. Write the opening style like this:  <style type=”text/css”>, closing: </style>
    1. Next write body styles like this:  body {   or paragraph styles like this:  p {

Now let’s start moving this around to make them fancier.

If we want to move the BODY over to the left, it would look like this:  padding-left: 11em, and you’d put it at the top of the CSS Style  body {. (em is how many letter Ms it is over, in this case 11)  If you use a %, I THINK the page can be fluid instead of firm.  So trial and error 5% if that doesn’t look right, change it.

HOOKS

“When I was first learning this stuff, I heard over and over that you should only use ID’s once, but you can use classes over and over. It basically went in one ear and out the other because it sounded more like a good “rule of thumb” to me rather than something extremely important.”  from HERE.

Using the example above, let’s move the “navbar” to the left and give it specific sizes.  You can do that with any element you name.  To name all the elements of that kind use:  class=”name”.  You would have to tell it <p class=”allp”>.   In the CSS Style Sheet you would write p.allp {

If you only want to name ONE element, you’d use ID after the kind of element you want to look for, something like <p id=”para1″>.  That paragraph is named para1, so that I can tell CSS Style to do something special to para1, not all the paragraphs.  When you do that, you will need this in the CSS Style sheet:  #para1 {  (don’t forget to close the directions with } on the next line.   Make sure this is absolutely unique, so the browser will know what to do at ONLY that spot.

Just a note:  CSS doesn’t care. They are interchangeable, but in order to keep things orderly, it’s best to make ids unique and classes as universal.

 

THE STYLE SHEET

Once you get so many commands at the top of the page, it’s getting ridiculous, you should move them to a style sheet.  That means that you don’t have to redo these for all the pages in your site.  Everything will be consistent.  Just make sure your names all all unique.

To save your CSS styles to a sheet–go to TEXT EDIT and paste everything between the style elements.  Erase everything in your HTML doc between the style commands INCLUDING those <style> and </style> commands.  Save your text edit doc as xxxstyle.css.

To do that with TEXT EDIT:

  1. Go to FORMAT and pull down to MAKE PLAIN TEXT.
  2. Next click SAVE
  3. There is a tiny box at the bottom of that screen that you click to be able to save as .css  or .html or anything except .txt.  Make sure it’s checked.
  4. Save it in the same folder with your project.

Now make sure you link to that stylesheet:

  1. Go to your html code and right in the head below the title, you can tell the browser where to find your style sheet.  It might look something like this:
     <link rel="stylesheet" href="finalstyle.css">

I’m having a lot of trouble here, so these are detailed notes:  (make sure both files are open in the side bar in Text Wrangler)

 

 

This morning:  Here is CSS inline :  http://canyonartsschool.com/FinalProject/Test2.html 

Here is CSS in it’s own .css file.  Obviously it can’t find it.  I just don’t know why. It’s in the same folder.  You can see the link I wrote right above this.  I’m guessing I have to add a backslash somewhere.

http://canyonartsschool.com/FinalProject/CindeeKarns.praticeCSSout.html

 

 

Share this: