CSS Tutorial : Part 2

Sample of the pdf document : 

So far we’ve added style to preexisting xhtml tags, such as paragraphs (<p></p>), headers (<h1></h1>), etc. We can also create different elements to be styled. In this tutorial, you’ll be learning about 3 different ways to create your own elements and then create a style for them.

Specifically, what if you want to set a style for all the elements within one section of a web page (e.g., the header, the paragraphs, the lists, the links, etc. in a side panel on a web page). You can do that using “div” tags.

What if you want to style one paragraph (or header, or list, etc) differently than all the other paragraphs (headers, lists, etc)? You can do that by giving a paragraph it’s own id and then giving a style to that id.
Finally, what if you want to style a bunch of nonsequential elements throughout the web page with the same style? You can do that using classes and then styling the class.

All of these new styling elements involve editing and adding to your web page, not just your css style.

NOTE: every id MUST BE UNIQUE on your web page. A class can exist many times throughout the web page.

Let’s start with Div tags.


Div Tag (in HTML):

 Div tags allow you to section off parts of your html. You place div tags around the area in your html page you want to style. So first, you must edit the html page.

Step 1: Open theXHTMLExampleCss.html file for editing.

Step 2: Locate the lines:

<h2>
Find out more about giraffes!
</h2>

Right above the <h2> opening tag, we’re going to create our own tag for styling. We start the creation of our own tag with <div… and then add a unique name, or id. For this tutorial, give your div the id of “sidebar”.

The html code should now look like this:
<div id = “sidebar”>
<h2>
Find out more about giraffes!
</h2>

Step 3: We must close this div tag after all the elements we want to be styled similarly. To specify the end of the area that we wish to style, scroll down until you hit the end of the links inside the paragraph. The code looks like:......

      Click here for  Download PDF / FREE