Tips for controlling style with Cascading Style Sheets:

By the time you finish SGC, your SGC web site will consist of may linked html files and images. Often, after you have gained practice, you find yourself in either of two frustrating situations:

But you, dear SGC student, will never have this problem because you will now learn about Cascading Style Sheets. These are files (.css) that contain stylistic instructions for your web pages. In order to make them work, you need only include a simple command in the heading section of each html file linking to them.

The beauty is that if every html file in your site links to a single css file, then, by changing that file, you can apply stylistic changes to your entire web site.

Here's how to do it: Remember that your header contains an enigmatic html command:

<link rel="stylesheet" type="text/css" href="https://www.geol.umd.edu/sgc/portfoliostyle.css" />

This instructs the browser to apply a cascading style sheet called portfoliostyle.css. By omitting this url into the code for the original html template we get:

this

When we put it in we get:

this.

This template demonstrates some html commands that will make it easy to apply a .css style sheet (as well as solve other problems):

A different .css style-sheet applied to the same html code might look like:

this.

The .CSS File:

The style sheet that we are using is also a template for you to take and modify. It looks like:

this.

Things to notice:

The .css file is different from an .html file in several ways:

New Problems:

As you apply your style sheet, you may notice some issues that you didn't previously:

Stupid CSS Tricks:

But using a style-sheet gives you the power simply to code things that would otherwise be complex.

Merck and Holtz are no kind of experts in CSS files. The wonder is that, inexpert as we are, we can make them work for us. So can you. In the colloquium presentation you will hear how to contol:

This is only the beginning of what's possible. Feel free to explore cascading style sheets at your leisure. The above links are to w3schools.com. It is not an SGC site and we take no responsibility for its content, but we like it.

The Assignment:

Beginning on 10/31/17, you are expected to have a cascading style sheet associated with all of your SGC web page files. Each page on your entire portfolio site should link back to it. Failure to include this will result in the subtraction of points from your style score. Doing this is as easy as copying the template we provide here, putting it in your SGC folder, and linking to it from your web pages. Your style sheet may be simple or complex, as you prefer. One way or another, however, your css must at least have a body section that controls:

If you fulfill this requirement by copying our template, you must make at least one modification to the css template that is clearly visible in the rendered web page. That can be in font, background color of linked text, alignment, margins or anything. Just show us that you can successfully control the style of your portfolio site.

Here is exactly what to do:

Scoring:

I will give a score of zero for the .css assignment if all pages of your portfolio are not linked to the SAME functioning .css style-sheet. I will deduct partial credit for the following errors:

Have fun!