CSS 103: Ids and Classes (Programming in Python)

CSS 103: Ids and Classes

In this lesson, we'll discuss some more advanced HTML/CSS topics, including applying styles to specific html elements and to classes of elements. The instructor will use Dreamweaver to demonstrate the examples.

Applying Styles directly on an HTML Element

You can specify CSS styling directly on an HTML element, e.g.,

<p style="background-color:#FF3300>this is a paragraph</p>

With Dreamweaver, you can apply such a style by typing, in the html area, "<p style=' and then choosing from the list of attributes that Dreamweaver lists:

In this case, you'd choose 'background-color'. Dreamweaver then helps by allowing you to choose a color for a color palette (instead of knowing the RGB color code).

Specifying Styles for IDs

As we discussed in the previous CSS discussion, it is standard practice to keep styling separate from the HTML "content". The above sample breaks this rule.

The appropriate method is to specify an id for the element, then specify the style for that id in the CSS code. So instead of your HTML File doing this:

<p style="background-color:#FF0000>this is a paragraph</p>

your HTML file has:

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

       </head>

<p id="redP">this is a paragraph</p>

and in the CSS file mystyle.css we specify the styling:

#redP {background-color:#FF0000}

The paragraph element in the HTML is named "redP". Then the CSS statement says 'elements named redP have a red background color'.

By using this indirection-- naming things and then setting styling based on those names-- we separate the style (css file) and the content (HTML).

Divs

The <div> element allows you to define a block of html code as a unit. You can define a div, give it an id, then specify styling for the entire div:

<p id="redP">this is a paragraph</p>
<p>this is another paragraph</p>
<p>this is a third paragraph</p>

</div>
<p>this is a fourth paragraph</p>

If the CSS was defined as:

#redP {background-color:#FF0000}

#boringEssay {background-color:#00FF33}

you'd get a web page looking something like:

Note that this sample illustrates the 'cascading' part of Cascading Style sheets. The 'redP' style (red) overrides the style defined by its enclosing div (green) If there were a general style on the <p> element, the 'boringEssay' style would override it.

Specifying Styles for Classes

You can also assign a class to HTML elements, and then apply a CSS style to all elements of a particular class. For instance, suppose you wanted every page to have a left panel and a right panel. One way to define this would be with the 'float' style which specifies that an element should float right or left of the previous element.

An elegant way to code this would be by defining CSS classes for the left and right side in our CSS file:

.leftDiv {float:left}
.rightDiv {float:right}

Note that the dot (.) refers to a class, e.g., .leftDiv means the class named leftDiv.

With these classes defined, we can now specify our left/right panels for our pages.

<p id="redP">this is a paragraph</p>
<p>this is another paragraph</p>
<p>this is a third paragraph</p>

</div>

<div class="rightDiv">

<p> this is a paragraph I want on the right</p>
<p>this is another paragraph I want on the right</p>
<p>this is a third paragraph I want on the right</p>

</div>

The resulting page looks something like:

A key aspect of using class definitions in CSS is that you can apply that class to many different HTML elements, either in the same page or other pages of your site. So, for instance, you might use the classes "leftDiv" and "rightDiv" on every page on your site so that your pages will have left and right columns. Note also that the div element can have any sub-elements, so you can have left and right columns with different information (e.g., pictures) but still adhering to the left/right float definitions.

Summary

Most websites are fairly large and consist of tens if not hundreds of pages. Most websites also mature over age-- just check out the previous versions of any popular site at the Internet Archive (http://archive.org) and you'll see that web development is a process-- you refine and refine and then you refine some more.

Because of this, writing clean HTML and CSS code is essential. Keeping the content (HTML) and styling (CSS) separate is key to allowing easy maintenance of a site. Instead of modifying ten or a hundred HTML files, you can change a single CSS setting and your entire website can have a new look. The separation is also important because you may want to show your website information on devices other than computer screens-- like a cell phone. The easiest way to do this is to have HTML files which are just content, and just use different CSS files depending on the device.

In-Class Assignment

Create a web page that is a two-column newspaper report with an image and text in each column. You should create an HTML file with two divs containing the content. Each div should have a class applied to it. You should also define a CSS file which defines the styling for the classes of the divs.

Put a link to your newspaper report web page on your portfolio, explaining that it demonstrates the use of CSS classes.