Tasks

What is CSS?

Cascading Style Sheets are how the presentation of a web page is controlled. HTML is used for the structure of the page, CSS is used for layout, appearance and function.

The best way to understand CSS is to watch it in action.

and becomes beautiful with the application of CSS:

Three ways to apply CSS

Styles are made up of tags and one or more definitions that determine the appearance of text within that tag. Definitions are created with a property, a colon, and one or more values. Note that some properties can be grouped together, as in the font declaration in the paragraph below.

Styles may be applied locally, internally, and externally.

Local (inline) Styles

This is an example of an inline or local style. View the source and look at the STYLE attribute in the paragraph tag for this text. It is followed by a string of properties and values. Note that due to my use of a blockquote tag, more of the background may be filled that would be desired.

All of the above was accomplished with this version of the <p> tag. Note that there are a number of values for the style attribute.

Internal Styles

Internal styles are placed in the head of a document. They are declared in the <head> with the style tag and type="text/css" attribute. As in JavaScript, the contents of the tag are commented out. Then a list of desired definitions are listed. Note that properties and values are contained within brackets, and multiple declarations are separated by semi-colons. Here is an example of what an internal style sheet looks

<style type="text/css">
<!--
body {color: black; background: white; }
h1, h2 { color: gray; font-family: Arial, Helvetica, Sans Serif; }
h3, h4, h5, h6 { color: red; font-family: Arial, Helvetica, Sans Serif; }
p { color: blue; font-family: Comic-Sans, Western, fantasy; }
-->
</style>

This is a page created using this inline style.

External Styles

Most powerful of all is the external style sheet. Here a separate document is created containing the desired styles for a site. All pages within the site are linked to it with the LINK tag. The URL is defined in order to access the document, and its REL and TYPE are declared:

<link href="../resources/css/a1_styles.css" rel="stylesheet"type="text/css">

Once this relationship is established in all the pages, changing the look and feel of the site becomes a simple process of changing the style document. This is how my site works.

The external document is simply a text file containing all of the definitions. No HTML coding is included in this document. It is saved with the extension .css. My external sheet simply looks like this.

 

arrow upreturn to top

Selectors and Properties and Values, Oh My

Selectors are the CSS version of tags. They are written very differently. Please be sure to understand the CSS Beginners Tutorial page on this topic:

We are starting by "redefining" the formatting of HTML tags. Selectors are written like this:

 

selector {

property1: value;

property2: value;

}

 

So, in other words, everything you learned about tags does not apply to CSS.

Measuring

There are two ways to declare size - absolute and relative

Absolute - pixels (px) and points (pt). These are the same on any screen or browser setting, and are good for things like borders and line widths

Relative - ems (em) and percentages (%). Em is most often used for font sizes, and are multiples of the current default font size. Percentages act like percentages should.

We will practice these things.

 

arrow upreturn to top

Fonts

An easy place to start working with CSS is fonts. Review the CSS Beginner Tutorial on Text, then start playing with different looks for your site. Include at least:

 

Hooking Up CSS

Now we'll add a file called a Cascading Style Sheet to your web site. Basically, a CSS file formats the presentation of your web document by styling the different elements.

  1. Create a new folder in the yourname_website folder called resources
  2. Create a subfolder in the resources folder called css
  3. Download this sample stylesheet and save it into the new css folder.
  4. In the head of index.html in your website, place the following line of code:
    • <link rel="stylesheet" type="text/css" href="resources/css/csspract.css" />
  5. In the head of resume.html and hotlist.html, place the following line of code:
    • <link rel="stylesheet" type="text/css" href="../resources/css/csspract.css" />
  6. Preview in the browser

 

arrow upreturn to top

Finish Simple Site

The first thing to do is be sure the simple site is in good shape. Below is an example of what your site should be looking like after you finish it. We'll take a few minutes on it to get some content updated.

 

arrow upreturn to top

Boxes and Borders

If time permits, we'll play around with putting spacing and borders around the tags. If it doesn't, continue to apply the tutorial topics to your site.

 

arrow upreturn to top

 

Assignments

Lab Work

Readings

Hollenbeck Home

Last modified Friday, April 15, 2011 4:17 PM
.

202 Home
Current Student Work
Blackboard

Assignment 1 Rubric

Assignment 2 Rubric

Search SMAD 202

|