Science and Global Change css Tips

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:

wishing that you had made different stylistic choices when you started out, but you are stuck because you would need to go back and do mountains of work to systematically change all of your files.
as your style evolves, you end up with a web site that is a crazy-quilt of different stylistic choices.

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:

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):

Using the <br clear="right" /> command to format text around images.
Using <div> </div> commands to:
- Unite images and captions and left or right justify them (In the case of <div id="picture"> they are put in divisions called "picture" that are right justified and given a different font size.)
- Designate sections of your html file's <body> to which different styles can be applied. For example:
  - <div id="header">
  - <div id="content">
  - <div id="footer">
  have different alignment and font sizes.

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:

Instead of <-- comment -->, comments are set off this way:

/* comment */
It's commands are not set off in <caret marks>. Instead, they are placed in {brackets}.
Each command has the format of

parameter: designation;

Where the colon functions as an equal sign and the semicolon indicates the end of the command.

Thus:

body {
}

Tells us that for the body of the web page:
- Preferred fonts are Ariel, Futura, and Verdana, in that order.
- The font color should be #344152 (a dark gray. See http://www.w3schools.com/html/html_colors.asp for a compendium of html color codes.)
- Margins should be ten pixels wide.
- The background color should be white, using the wallpaper image of the delta Earth at http://www.geol.umd.edu/sgc/sharedimages/delearthwp.jpg.
Specific instructions can be applied to specific parts of the page. For example, if we wanted the big text we use in headings to be treated differently from normal body text, we could write:

h2 {
}

This designates special fonts, colors, and alignment for heading text.
If a portion of the page needs its own special rules, we can set it apart using the commands:

<div id="xxx">
</div>

Thus:

#footer {
}

Tells the browser that in the <div> called "footer:"
- Margins should be measured from the left and right sides of the browser window
- and text should be centered.
In fact, we insist that you include header, content, and footer divisions in order to facilitate formatting.

New Problems:

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

Style elements get applied in parts of the page where they don't belong: Maybe you have specified that text in your header section should be centered and in your contents section should be left-justified, but in your rendered page, all text is centered. Go back and make sure that all body sections of your html file are properly delineated with

<div id="xxx">
</div>
Maybe you designated that images should be right-justified, so that text wraps around them to the left. The problem now is that some text (or even images) wraps around even when you would prefer that it simply stop and start again below the image. This can be a special problem when you have a series of images whose formatting is messed up when image 2 tries to wrap around image 1 instead of appearing below it.

To address this, use this command at the point at which you want the text to skip to the bottom of the image:

<br clear="right" />
That way your images....
Will line up nicely.
If your images are left justified, then use <br clear="left"/>.

This is a long long really verbose overly long extremely talkative caption. Blah blah blah blah blah blah blah blah blah blah blah blah blah.
The css template enables you to connect captions with images only so long as the caption is not wider than the image. Otherwise, it formats incorrectly. To control caption width, use <br> commands.

This is a long long really verbose overly long extremely talkative caption.
Blah blah blah blah blah blah blah blah blah blah blah blah blah,
tamed by <br> commands.
Finally, you might find your images to be inconveniently sized. You can specify size in pixles using this code:

<img src="xxx" height="yyy"> or <img src="xxx" width="yyy">

Here, in place of yyy fill in a number of pixels. In fact, you can specify both height and width together, but you shouldn't because this risks distorting the aspect ratio of the image. Instead, just specify the limiting dimension.

Stupid CSS Tricks:

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

What if you want your captions to be left or right justified along with your images? In that case, you can place both image links and captions into a division with a special name (I typically call it "picture") and have the css justify the whole division. For example: In the website template, you see:
This creates a small division called "picture." In the css file we find:

#picture {
}

This instructs the browser to right justify (i.e. "float: right;") the entire division. The clever part: You can designate as many <div id="picture"> blocks as you want. COOL! (It also designates margins for your image-caption combo, and specifies a smaller font size for the caption.)

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:

Fonts
Background color
Colors
Backgrounds
Image placement and a little bit of formatting.

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 11/12/19, 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:

Font
Margins
Background color

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:

Open the .css file in a browser page.
Copy the entire contents to a new text file.
Save that file to the sgc folder on your hard drive with new name (E.G. if I were doing this assignment, I might call it "merckstyle.css").
Open the portfolio.html and gallery page files in the sgc folder on your hard drive and change the css link command in the head from "//www.geol.umd.edu/sgc/portfoliostyle.css" to the new name. In my example, the entire link command would now look like:

<link rel="stylesheet" type="text/css" href="merckstyle.css" />
Open your html file in a browser and verify that the css style is being applied.
Modify the .css style sheet commands in some VISIBLE way. Easy options include:
- text color
- font
- background color or wallpaper image.
Verify that you changes appear in the rendered web page.
Upload your new portfolio.html and .css style sheet to the sgc folder of your server space.
View these off of the server using a browser to verify that everything works. (Note: You may need to "clear disk cache" in order to see the changes. Every browser has a means of doing this.)
Problems? Questions? Please ask.

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:

Caption formatting errors (Failure to use <br> commands)
Image wrap-around formatting errors (Failure to use <br clear="right" /> commands)
Any element of style sheet being overridden by <style> commands in the html file. Avoid these altogether.
Any other error resulting in obvious formatting infelicities. (E.G.: text or images superimposed on top of other text or images)

Have fun!