CSS

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

Instructions::
 * 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.
 * 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 ** ** **tag to the closing tag**
 * 3) Paste this code **before** the 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 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.**

Open your **DoNow** document if you have one, otherwise create one and answer the following: 3. Define: **Cascading Style Sheets** (CSS) [|What are cascading style sheets?] 4. Define: **Three types of CSS** **[|What types of styles sheets are there?]** 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 - 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 **
 * 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?
 * 5. List Benefits of CSS**. **[|What are the benefits of using style sheets?]**

Create a web page that uses an external style sheet: that controls it's appearance
 * A2 - Part 2 - Practical Assignment **
 * **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 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?]

**Creating a CSS layout for the Enlightened Design web site from scratch using a tutorial**
 * 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
 * 1) **Download** this document to your **Web Design/htdocs/CSS folder: [[file:ed.html]]**
 * 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:[[file:Trillium Assignment.doc]]
 * 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 imag**e, select **Save Image As**, **Save to your Trillium Folder**[[image:trilliumbanner.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!