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

Goals

Introduce style sheets with XHTML document

Create a simple style sheet
Understand the syntax of selectors and properties
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.

There are many types of CSS properties:

Font Properties -- You can define the type of font family, or size, or weight.
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.)
Color -- One define the color of your background or text or links visited.
Table properties -- One can define margins, padding, height, width, and color options when creating tables.

Create a style sheet for your first XHTML assignment.

Start NotePad++ and open a new file. Anything in between /* and / are considered to be comments* and are not interpreted by the browser. 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:
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`

Open your cg3xzz-favorites.html file with NotePad++
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:

ftp icogsci1.ucsd.edu ; login and create hw4
to make the hw4 folder.
since these are text files, transfer in ascii, not binary, mode put cg3x__-favorites.html and cg3x__-css.html as well as your 1-cg3xzz.css file.
quit

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.

We are going to grade using browser equivalent to the Firefox browser that is available in ACS labs. If you used Internet Explorer to preview your work, consider double checking your work with a recommended browser. i.e. (Firefox or Mozilla).
Your page should look as much like the sample as possible.
Be very careful about vertical spacing. We're very picky. Incorrect vertical spacing may mean you have used the wrong tags!
We will look at your XHTML code
- To make sure that you haven't cheated and used a web-editing tool/product like DreamWeaver.
- And to make sure that your XHTML is readable and reasonable (and doesn't "work by accident").
We will look at your CSS code and make sure that you understand the basics presented in this assignment.
- We will also check to make sure that you linked your css file appropriately into your html file.

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