Portfolio: Setting Up Page Properties

Introducing Cascading Stylesheets

HTML was never intended to contain tags for formatting a document.

HTML was intended to define the content of a document, like:

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

In HTML 4.0, all formatting could be removed from the HTML document, and stored in a separate CSS file.

CSS Saves a lot of WorK!

Types of CSS

CSS Reference Page

To learn more about CSS, click here for the CSS Reference Page

Linking External Stylesheets

Open index.html

To link an external stylesheet, make sure you have your CSS Styles panel open. If not, click window > CSS Styles

  1. In the CSS Styles Panel, click the "all" button. In this view, it's much easier to see all the styles for a page
  2. We've already created a stylesheet for you, so click the Attach Style Sheet icon (it looks like a chain link) at the bottom of the CSS Styles Panel
  3. Click the Browse button
  4. Navigate to the correct folder if necessary through your U drive
  5. Select the "_css" folder and choose "portfolio_main.css"
  6. Click OK
  7. If everything goes right, you should see "portfolio_main" appear in the CSS Styles panel and you should also note a change in the top menu bar of "index.html." You should see "Source Code" and "portfolio_main.css" appear side by side.
    • Source Code is the tab for the HTML document "index." This is a nice little feature that allows you to see both the .html document and the .css document at the same time without having the two different files open.
    • Note that when you click on "portfolio_main.css" it splits your view between design and code. This is because CSS is only viewable as code in this way

Next Steps

In the next exercise, you will learn how to set the basic page properties for your portfolio.

Click here for the next tutorial