Lecture Summaries class 13

Prepared by: Anthony Larrain

These notes serve as an outline to the lecture, they are not intended to be complete. Attend class to get more details.

Linking to files on your web site

Your directory structure at your students account should be similar to this

		public_html

		   hci201

	 hw  labs  quiz  project

public_html is the parent of hw labs quiz project
hw labs quiz project are children or sub directories of public_html
hw labs quiz project are all siblings of each other
Different directories can contain files with the same name.

Example - public_html, lab and quiz can contain a file called index.html

For the following examples, assume we are in any HTML file in the quiz directory.

This assumes lab1.html is also in the quiz directory

This assumes cumberland1.jpg is also in the quiz directory

This assumes the quiz directory has a sub directory called images with a cumberland1.jpg file in it.

This takes you back one directory, back to public_html, now we move forward to project and get the index.html file from project directory.

What does this do ?

External Style Sheets

Up until now the styles we have been adding were placed in the HTML file between style tags.

Example

<head> <title>Example Style</title> <style> body{ font-family:Verdana; } h1{ color:lawngreen; } </style> <head> <body> : :

We can also place the CSS style rules in a text document, which is saved with a css suffix.

style.css

mystyle.css

links.css

The prefix can be any legal filename

Suppose we had a text file named style.css that contained some styles.

To use these styles we need to link this file to our HTML document.

To do this we use the HTML link tag.

<head> <title>Linking to an external CSS file</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head>

Example

The HTML The External Style Sheet

CSS Selectors

Class Selectors - Suppose you wanted most of the body text blue and some portions red. How about some headings red.

Given the following styles.

body{ color:blue; } .colorchange{ color:red; }

Notice the class name is preceded with a dot '.'

Then in the HTML document that uses these styles:

<p>This text would appear blue</p> <p class="colorchange"> This text would appear red</p> <h1 class="colorchange"> This text would appear red</h1>

Example

cselector.html

Notice the use of the HTML span tag

Id Selectors - Same idea as class selector but can only be used once per html document. Typically Id selectors are used in division tags. The ID name is preceded with the hash '#' symbol.

Examples

Design Tips

Grouped Selectors - Suppose you wanted all headings h1 h2 h3 .. to be green

h1,h2,h3,h4,h5,h6 { color:green; }

Contextual Selectors

Example

#navigation a { color:green; }

project template style sheet is using contextual selector

HCI 201 - Multimedia and the World Wide Web

Lecture Summaries class 13

Linking to files on your web site

External Style Sheets

CSS Selectors