CogSci 3 XHTML Webpage Assignment Part B-
Making a style sheet for xhtml favorites.

Goals

  1. Introduce style sheets with XHTML document
    1. Create a simple style sheet
    2. Understand the syntax of selectors and properties
    3. Link the style sheet to into the XHTML document

Again, this assignment will be graded by viewing your final web pages and by viewing the XHTML and CSS "source" for them.
The content of this work is creative while the structure of the page should follow the directions in this assignment.

Note: if you wish to use a home PC or Macintosh, you should use Firefox, or Mozilla to view your work, as we will use these to grade. (They all render pages with the same engine.) If you elect to use Internet Explorer instead of these recommended browsers, you do so at your own risk since it has a tendency to display HTML differently)

The <link ... /> Element

  • Linked Style Sheets are stored in a separate XHTML document.
  • The <link /> element is used to define the location of the style sheet document and that it contains CSS styles.
  • The URL for the style sheet maybe either relative or absolute.
  • It must be contained within the <head> ... </head> element of your document.
<link rel="stylesheet" href="1-cg3xzz.css" type="text/css" />
  • note that the <link /> element is an "empty" element.
Link element

There are many types of CSS properties:

  1. Font Properties -- You can define the type of font family, or size, or weight.
  2. Text Properties -- This works a lot like the paragraph style that you used in the word assignment -- you define the layout properties (vertical spacing and alignment.)
  3. Color -- One define the color of your background or text or links visited.
  4. Table properties -- One can define margins, padding, height, width, and color options when creating tables.

Create a style sheet for your first XHTML assignment.

  1. Start NotePad++ and open a new file.
  2. Anything in between /* and */ are considered to be comments and are not interpreted by the browser.
  3. Insert the following comments:
This is my first style sheet
My name is: _____________
my COGS3 account number is: ________

Make all of your list items (<li> ... </li>) in your ordered and unordered lists blue.

CSS rules have two parts: a selector and a set of property declarations that define the style that will apply to the selector.

If we want to make all of the list items (in an ordered or unordered list) blue, then we use li as the selector and we use the color: blue; as the property and the value.

Notice that the property and the value are surrounded by braces: { and }.

If there is more than one property, they must be separated by a semi-colon. For example:

Example of multiple properties

Make the definitions <dd> element in the Definition Lists courier, smaller, and red.

Follow the example above and use these properties and values to change the appearance of the definition associated with definition lists in your XHTML document from part 1 of this assignment.

  • dd is the selector
  • font-size is the property and 10pt is the value
  • color is a property and red is the value
  • font-family is the property and courier is the value

Save your CSS file in your hw4 directory as: 1-cg3xzz.css

save it as CSS file type!!

Add the <link ... /> element to your XHTML part 1 file: cg3xzz-favorites.html

  1. Open your cg3xzz-favorites.html file with NotePad++
  2. Insert the following line into the head section of your XHTML document.

SaveAs cg3xzz-css.html

Open cg3xzz-css.html in Firefox

Your cg3xzz-css.html file should look like this after you have added the CSS link:

The "Turn in" folder: hw4

Once you are satisfied with your pages, transfer your work to the appropriate directory on the class server using FileZilla - your directory for this assignment ishw4 in your home directory on the class server). Is best to use a file transfer program to get your files to the right location on to the server - regardless of where you are working on your assignment. Again, you may use Fugu or Filezilla to upload your files. Something like: Be sure you come into an ACS lab and log into Windows and verify your work by using Firefox to open your files.

How We Will Grade

You will be graded on having your cg3xzz-css.html page, with the correct XHTML and CSS style sheet.
Original ©opyright 2006-2013 Mary ET Boyle