Jill Cockerham

Project 1

1. Alignment

Following is different alignments of text.

Left Aligned

Center Aligned

Right Aligned

2. Using Color and Image as Background

The gray background color for the site is defined in styles.css in html{}, at the very top.

The white background color for body of this site is also defined in styles.css in body{}.

The masthead background (with the flower) is defined as a background-image in styles.css in #inner-masthead{}.

This box's background color is defined as yellow.

This box's background image is a my dog, Yuma as a puppy. The image automatically tile-repeats.


See Number 10, below, to see how I applied color and transparent images to the background in tables.

3. Color

The use of color in the use of the body, table, td, font, etc., has been amply illustrated throughout this site.

4. Font Styles

Font family was used in each declaration of font on this site, with specific fonts declared first and backup font families also declared. The initial font size declared in the body was .8em, so that all fonts will be slightly smaller than standard. The font-size of the heading was declared in terms of pixles, in styles.css, so that it won't outgrow the fixed box size of the masthead. Most other font sized were declared in em's, so that they will adjust to users with larger font settings on their computers.

Serif Text
Sans-serif Text
Cursive Text
Fantasy Text
Monospace Text
Bold Text
Bolder Text
Lighter Text
Italic Text
Oblique Text
Underlined Text
Small Caps Text
xx-Small Text
Small Text
XX-Large Text
Subscriptsub
Superscriptsuper!

5. Form Elements

Form
Fields marked * are required.

6. Header Styles

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading
h6 Heading

7. Images

These are different alignments of an image.

Curt in Chicago
The Ball in Chicago
Jill in Chicago


These images were let display at their default pixel sizes. Here are examples of scaled images.

The masthead at the top of this page is a .gif image, all the photos are .jpg, and in number 10, below, I used a transparent .png purple flower as the background-image of a cell.

8. Links

Links to other pages within my site have been evident throughout this site.
Here is a link to an external site. The Drudge
Here is a link to my e-mail. jill_marleigh@neo.tamu.edu

9. Rules

This is a default horizontal rule.



This is a rule whose width is 50% of the container's width, and whose height is 4px.



This is a rule whose width is 200px, and whose color is red.



10. Tables

The following table illustrates the ability to add padding around the cells, to make a border that appears 3D, to affect font color and style and to apply background-color to cells based on their type (th vs. td).

Cells Column 1 Column 2
Row 1 (1, 1) (1, 2)
Row 2 (2, 1) (2, 2)

This table illustrates the ability to affect the look of any one particular cell. In cell (1, 2), the alignment, background color, and text color has been changed. In cell (2, 1), the background color is set to red, and the background-image is a transparent .png image of a purple flower, allowing the red to show through where there is transparency.

Cells Columns
Row 1 (1, 1) (1, 2)
Row 2 (2, 1) (2, 2)

11. Div Tags

Div tags have certainly been evident throughout this site.

12. Use of class, id

Use of id has certainly been prevalent throughout this site. Use of class occurs less often, but each of these pink number headings has class "assign-num" and are edited in the file project1.css.

13. Use of Attributes

The use of attributes has been prevalent throughout this site.

14. Absolute vs. Relative Positioning

Most of the elements in this site are placed via static positioning, allowing the browser to place them in their default position. Floats are used to align the navigation menu and the main content area to the left and right.

Here is a statically positioned element.

Jill in Cancun

Here is the image positioned relatively to the static element by 400px to the left.

Jill in Cancun

Here is the image positioned absolutely 200px from the left of your brower window. Try adjusting the size of your browser window to see the effect.

Jill in Cancun















Click here to see an example of an image with a fixed position.

15. Visibility

Run your mouse over ME and see what happens.

Jill and her fiancee, Curt

Jill and her fiancee, Curt

Different Ways of Integrating xhtml and css

See different types of header styles and ways of embedding css into html, here. All the html files and css that this page refers to are in the folder "header styles". My personal favorite method is to use imported style sheets, through a global style sheet, which gets past problems that certain browers have with importing multiple style sheets, and also keeps my content separate from my design.