Web Page Layouts using CSS
Visit this W3schools page on HTML layouts using CSS
Visit this page to see various layouts and the code
CSS layout and float
http://www.maxdesign.com.au/articles/two-columns/

Videos:
How to create a basic CSS stylesheet using CSS
CSS Tutorial Pt1 - Basic Layout

Another reference:
http://www.w3schools.com/html/html_css.asp



Assignments

A1 - What is a "style" in HTML and how can we use them in our web page?
Objective: Modify the home page of your business site - add an internal or embedded styles at the top of your web page to control how the elements of your page look.
Instructions::
  1. Open the index page of your business site in notepad & in your browser.
  2. Click here to see an example of a web page with internal styles at the top & copy all the code from the <style> tag to the closing </style> tag
  3. Paste this code before the <body> tag at the top of your index page.
  4. Notice the code is green because it is "commented out". That means the browser will not read that code. Remove the 2 lines of code that are comments.
  5. Save, refresh your page in the browser. Notice what happened.
  6. Change the appropriate code so that your page is the color YOU want and the H1 tags and P tags are your font size, face and color or YOUR choice.
  7. Copy and paste the appropriate link definition code from this example into the <style> section of your index page. This will define how your links look on your page.
  8. Modify the code to make the on links on your page the colors YOU want.

A2 - Cascading Style Sheets (CSS) - Modify an Existing External CSS
Objective: Understand how an external style sheet works and its web site maintenance advantages.
A2 - Part I - Written Assignment
Open your DoNow document if you have one, otherwise create one and answer the following:
  1. Name 3 web site design elements that should be followed so that the user knows that are in the same site regardless of what page they are on. (Hint: What design elements tell you that you are on the same web site when you navigate to the other pages of the site?)
  2. What elements on the web page below are consistently the same?
ED-page.jpg
3. Define: Cascading Style Sheets (CSS) What are cascading style sheets?
4. Define: Three types of CSS What types of styles sheets are there?
5. List Benefits of CSS. What are the benefits of using style sheets?
6. A company has asked you to design their web site. It will contain 100 pages or more. They emphasized that they might change the look of the site in the near future. Based upon your reading above, what type of styles would you choose so that future maintenance (changes) will be the easy: inline, internal or external styles?






A2 - Part 2 - Practical Assignment
Create a web page that uses an external style sheet: that controls it's appearance
  • Create a new folder and name it CSS.
  • Open this external style sheet and web page code.
  • Copy lines 1-19 and paste them into a new blank notepad file. Save in your CSS folder as: example.css
  • Copy lines 20-44 and paste them into a new blank notepad file. Save in your CSS folder as: index.html
  • Go into your CSS folder an open the index page in your browser.
  • Now go back into your CSS folder and RENAME the style sheet file -from example --> to style
    • NOTE: your CSS folder should now only have two files: index & style
  • Refresh your index page in the browser. Can you explain why your page changed? (Hint: look at <head> section at the top of your index page)
  • Rename the file back to example and make a copy. Your CSS folder should now have the files:
    • index.html
    • example.css
    • copy of example.css
  • Modify the example style sheet in notepad - Change 5 style definitions so that page looks different. NOTE: CHANGE ONE THING AT A TIME and then refresh so you can see what the code changes.
  • Play around with the code....see what code changes what.....have fun, explore!

9. READ the first several chapters of this tutorial. STOP at CSS TABLES. Play around with the "Try it Yourself" sections: CSS Tutorial





FOR YOUR INFORMATION
Check out this CSS3 learning tool!
Web Tips:
You want to put music on a web site. There are several music format types. How would you determine which one is for you.
Which is the Best Audio Format for the Web?


EXTRA CREDIT ASSIGNMENT BELOW:
Cascading Style Sheets (CSS) Assignment - Creating a Cascading Style Sheet from Scratch for the Enlightened Design Site
Goal: Learn CSS
Objective: Define a web page's layout using CSS using Notepad
Output: The Enlightened Design web page
ED-page.jpg
css-layout.jpg
Creating a CSS layout for the Enlightened Design web site from scratch using a tutorial
  1. Download this document to your Web Design/htdocs/CSS folder:
  2. Open it and continue to modify it according to the directions at this site.Click here, read and follow the tutorial >


Understanding the box model & positioning




































OLD WORK - DO NOT DO:

A2 - Practical Assignment Part - Trillium Assignment Instructions:
  1. Create a new folder in your Web Design folder and name it: Trillium
  2. Save this Trillium assignment to your Trillium folder and complete:
  3. The index.html file below is the Trillium web site's home page. To save this web page to your folder, do the following:
  • Double-click on this index.html file to open it in your browser
  • Go to: View--> Source
  • Copy and paste the source code you see into a new blank Notepad file and Save As: index.html in your Trillium folder.

  1. This is the Trillium Site's Banner Image. Right-click on image, select Save Image As, Save to your Trillium Foldertrilliumbanner.jpg
  2. For assistance,
  3. Open the Trillium assignment document and follow the instructions Step3: .nav change - MODIFY the navigation bar links so that the link color, the mouseover link color and the visited link color is different!