Web Design CSS

Level: Advanced
Prerequisite: COM2055: Web Design 2
Description: Students develop accessible and standards-compliant Web pages using current techniques for advanced cascading style sheets (CSS).

What is CSS?

From About.com:

CSS was first developed in 1997, as a way for Web developers to define the look and feel of their Web pages. It was intended to allow developers to separate content from design so that HTML could perform more of the function that it was originally based on – the markup of content, without worry about the design and layout.

CSS didn’t gain in popularity until around 2000, when Web browsers began using more than the basic font and color aspects of CSS. And now, all modern browsers support all of CSS Level 1, most of CSS Level 2, and some aspects of CSS Level 3.

Web Designers that don’t use CSS for their design and development of Web sites are rapidly becoming a thing of the past. And it is arguably as important to understand CSS as it is to know HTML – and some would say it was more important to know CSS.

Click to read the rest of the article.

So, CSS is a way of controlling the look of a web page (or entire site.) In effect, you use HTML to present the information, images and links of a web site, and CSS tells the browser how to make it look. Get it? Learning and using CSS actually makes managing large groups of pages easier. But first you have to learn some CSS.

Where do I go to learn CSS?

There are hundreds of CSS tutorial pages on the web. I would like you to go to the Codeacademy and use their system. So, do the following:

  1. Go to www.codeacademy.com
  2. Register for an account. (You can even use your facebook login.)
  3. Click on Learn in the menu at the top.
  4. Click on Web Fundamentals. (If WEB FUNDAMENTALS does not show up, click here.)
  5. Start on Section 3 “Introductions to CSS” since we have already done a lot of work in HTML (section 1 – 3 are HTML tutorials.)
  6. Get coding! Your goal is to complete all of the CSS tutorials. (Sections 4, 5 and 6)

Assignment 1 – Basic CSS Assignment

Get Ready Step 1 – Download (right-click, save-as) a copy of this html document css-assignment and save it to your documents folder as “css-assignment.html”. Place all your HTML in this document, but do NOT change anything below the <!– Validator Icon Below –> line.

Get Ready Step 2 – Create a style sheet called styles.css (use Notepad to save-as, changing the file type to all files.)

Get Ready Step 3 – Create a link to the style sheet in the css-assignment.html document.

For this assignment, you will create 15 unique CSS styles on one web page. In completing this assignment you must meet the following requirements:

  1. For each example you must use:
    • font-sizes
    • font-family
    • font-weight
    • color
    • text-decoration
    • background-color
    • border attributes
    • padding
  2. You must change the background color of the page
  3. You must have one example that has 4 significantly different borders on the same box
  4. All 15 styles must be unique and very different from each other.
  5. You must have an <h1> title at the beginning of your page that is styled with CSS.

When finished, place a copy of this file in my drop-off folder show your page to Mr. E for marking.

And then what?

Finally, we are going to update the pages you made in Kompozer so that they use CSS to control all of the styling. So, we will remove the HTML style code and replace them with CSS.

  1. Create a CSS document called style.css.
  2. Attach the style sheet to your page(s).
  3. Set the page background using CSS, remove the HTML bgcolor tag from the <body> tag.


Leave a Reply

Your email address will not be published. Required fields are marked *