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:
- <h1>This is a heading</h1>
- <p>This is a paragraph</p>
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!
- CSS defines HOW HTML elements are to be displayed.
- Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!
Types of CSS
- Inline CSS – as the name implies, inline CSS is used inline with an HTML tag – we won't use this method
- Embedded CSS – embedded CSS is styling applied to a single document – sometimes this is referred as local styling – we will use this method as it applies to specific HTML pages
- External CSS – external CSS is a separate .css file that is linked to an HTML document. The power of an external stylesheet is the ability to link multiple HTML documents to a single stylesheet which allows you to make one change to the styling of an element and apply it to all the elements used in multiple HTML documents. This is often referred as global styling
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
- In the CSS Styles Panel, click the "all" button. In this view, it's much easier to see all the styles for a page
- 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
- Click the Browse button
- Navigate to the correct folder if necessary through your U drive
- Select the "_css" folder and choose "portfolio_main.css"
- Click OK
- 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.
