Practice: Publishing your first web page.

1. Create a simple web page and then upload it to uoregon.edu.

Create a Web Page on uoregon.edu in 21 Minutes or Less

2. Style your web page using CSS

How to Insert a Style Sheet in a Web Page

When a browser reads a style sheet, it will format the document using the style rules in the style sheet. There are three ways of inserting a style sheet:

  1. Use an internal style sheet.

    Define internal styles in the head section by using the <style> tag:

    <head>

    <style type="text/css">
    hr {color: sienna}
    p.center {text-align: center}
    body {background-image: url("../images/back40.gif")}
    </style>

    </head>

  2. Inline Styles

    As stated in the W3School's CSS tutorial, "An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly."

    <p style="color: sienna; text-align: center;">
    Hotel India Juliette Kilo Lima
    </p>

  3. External Style Sheet

    An external style sheet can be linked to many pages, thus creating a uniform style for a site. Each page that links to the external style sheet is called a "client" page.

    The look of the entire Web site can be updated by changing one file, the external style sheet. Each client page must link to the style sheet using the <link> element. The <link> element goes inside the head section:

    <head>
       <link rel="stylesheet" type="text/css" href="../css/mystyle.css" />
    </head>

CSS Exercise

The following uses /111/ as the example site root folder. Substitute your course number as appropriate, e.g., 110, 281, etc.

  1. Using a text editor, create a file named demo.css and store it in /111/css/demo.css.
  2. Define two CSS style rules in demo.css.
  3. Link xhtml-starter.html to demo.css using a relative URL. Note: the relative URL will be correct only if xhtml-starter.html is in /111/examples/ and demo.css is in /111/css/ on both the local host and the remote host.
  4. Apply the two style rules to some of the content in xhtml-starter.html.
  5. Validate demo.css using the W3C CSS Validation Service
  6. Validate xhtml-starter.html using the W3C Markup Validation Service
  7. When your documents pass the validators, upload /111/css/demo.css and /111/examples/xhtml-starter.html to the remote host.

Cascading Order (from W3Schools)

What style will be used when there is more than one style specified for an HTML element? The styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:

1. Browser default
2. External style sheet
3. Internal style sheet (inside the <head> tag)
4. Inline style (inside an HTML element)

Therefore an inline style has the highest priority, which means that it will override a style declared inside the <head> tag, in an external style sheet, or in a browser (a default value).

Self Assessment