CSS 101 (Programming in Python)

CSS 101

HTML defines the elements that appear in a web page. It can also be used to specify style-- how the web page is presented. Here are some samples:

<body bgcolor="#ff0000">                
    
<h1 align="center">

Though you can style your web page directly with HTML, as above, it is now convention to:

Use HTML to define what information to show. Use CSS to define how that information is presented (the style).

Definitions like that in the body and h1 elements above break this convention.

CSS -- Cascading Style Sheets

The keys to CSS are that it:

allows you to easily change styling for an entire page or site
Facilitates uniform styling throughout the site.
keeps styling details out of HTML so that the HTML is clean.
facilitates content that can be displayed on different devices (e.g. computer screens, cellphones)

Here's what the w3c says about CSS:

CSS is a breakthrough in Web design because it allows developers to control the style and layout of multiple Web pages all at once. As a Web developer you can define a style for each HTML element and apply it to as many Web pages as you want. To make a global change, simply change the style, and all elements in the Web are updated automatically.

CSS Try it Samples-- excellent w3c tutorial let's you try CSS definitions and see their effect.

You can define CSS styles:

in-line within a particular element,
within the 'head' area of the HTML file (for page definitions)
within a separate CSS file which is pointed to from HTML file(s). (Site-wide definitions)

Defining the style for a single page (CSS directly in HTML)

Here is a sample CSS style specification-- this specification goes directly in an HTML file, within the <head> element.

<head>
   <style type="text/css">
       body {background-color: blue }
        h1 {background-color: green}
       h2 {background-color: transparent}
       p {background-color: purple)}
       p {font-family:"Courier New", Courier, monospace}
   </style>

</head>

This code specifies how the body of the page should have a background of blue, that all top-level headers should be green, all second-level headers should be transparent, and all paragraphs should have a specific background and font.

Defining the style for a particular element

Page-wide definitions, such as those above, define the style for all elements of a certain type, e.g., all paragraphs. You can override a particular setting by defining the style for a particular element. Suppose your HTML file had the CSS definitions above, and the following two paragraphs:

<p style=background-color:red>This is the text </p>

<p>This is the second line of text </p>

How would the paragraphs appear? The key is that the inner-most definition overrides any previous definitions.

In-Class Assignment 1

1. Use Notepad or another editor to open the portfolio web page you created directly with HTML. Modify the <head> area in that page by copying and pasting the style information in the code above.
2. In a browser, open your file and see how it looks. Try making some changes to the colors/fonts and see how it affects the page.
3. Dreamweaver is a web page editor. Select All Programs | Adobe CS 3 | Dreamweaver to open the editor, then open your html file within Dreamweaver. Select the Split tab so that you can see the HTML source and page at the same time.
4. Dreamweaver allows you to style by choosing from pre-defined lists. In the CSS definitions, try retyping the colon (:) after 'background_color': The system will allow you to choose a color from a palette. You can also set plenty of style attributes other than background-color. Dreamweaver makes it easy-- you can choose as opposed to remembering the exact syntax for a style.

Defining Styles for multiple web pages:

It is standard practice to create CSS sytling in its own file, separate from the HTML. The code looks like the definitions above, but without the <style> tags:

A CSS file, mystyle.css:

body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: purple}

The HTML file then links to the CSS file, within the <head> tag:

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

Putting the styling in a separate file is important because you can share your style sheet across all pages in a site. This is how sites provide a uniform 'look' across pages.

Note that style definitions within a particular page can override the ones from the separate CSS files.

In-Class Assignment 2

1. Copy your portfolio page to another file, e.g., me2.html.

2. Use Notepad to create a new file named mystyle.css within the same directory as your me2.html file. Paste the following text into the file:

body {background-color: green}
h1 {background-color: #00ff33}
h2 {background-color: brown}
p {background-color: green}

3. In your new portfolio page, attach the styles defined in your CSS file by adding a 'link' tag as shown above. Note that the CSS file you created can now be applied to any web pages you create, and when you modify the CSS file, all pages will automatically be updated. Try the following:

4. Create another page and enter some sample paragraphs and headings. Attach the same style sheet to it.

5. Open a browser and look at your two pages. They should have the same "style". Go back to Notepad and modify your CSS file (change a color or something). Then refresh your pages in the browser and see how they change.