October 10

posted Oct 10, 2011, 1:22 PM by Peter Knowles
If you haven't completed your CSS Notes from last week and taken the CSS Quiz, do that first.

Then, you're ready to start actually USING CSS: 

Phase I
  1. Open up an app from your new screen called iScribe (if you didn't download it a few days ago, you'll need to go to the Chrome Web Store and get it now).
  2. Open a new window and go to Google Docs; create a new Doc From Template. The Template you want is called CSS Practice
  3. Once it opens, copy the entire contents then go to your iScribe window from step 1. 
  4. Make sure you have the correct tool / window open by clicking the icon at the far right of the menubar that looks like a clipboard. It's called "HTML Mode" which you'll see if you hover over it. Click it to get the HTML Mode.
  5. Paste the code you copied in step 3. 
  6. Once it loads, click the green-ish "Writer" icon at the upper left side of your iScribe menubar; You should see the code disappear and instead, it will look like a regular web page instead (it says Title 1, then Title 2, then has a paragraph, and so on).
  7. Click on the HTML Mode button (the clipboard) again, then carefully read the Comment in the code. 
  8. Once you understand the comment (meaning, once you know where to put the CSS code you're about to create) you're ready for Phase II.

Phase II

Using the CSS tutorial links at w3Schools.com (see below) practice changing the display of your HTML code from Phase I
REMEMBER: You WILL NOT change any of the HTML code. All editing will be done inside the <style<  </style> tags in the Head of your document.

Play around with changing many of the different elements of your page just by changing CSS elements. Follow the links below to find out how; follow links on each page to learn even more. Become a master of CSS Styling while you play around. Remember the best features so you can show others later on.