handout title:bedford-computing.co.uk/learning/.../09/activity-css-tutor… · web viewcss...

CSS TUTORIAL 2 – WORKING WITH SELECTORS

You will now create a variety of selector types and see how each affects a web page. We will start with the basic selector types and then move on to more advanced styles.

In your web page editing program, open the file selector_basics.html.

This page is made of very basic HTML tags. The most exciting thing about it is the graphic banner. We will start by adding an internal style sheet to this file.

Click directly after the closing </title> tag, hit Return and type:

<style type="text/css">.

This is the opening style tag, which lets a web browser know that the information that follows is CSS instructions.

document.doc Version 2 of 10

The files needed for this tutorial are in the folder CSS Tutorial Site Files located on BREO

Type selectors such as the tag selector you are about to create are the most basic type of selector.

Press Enter (Return), and then type p {

To create a tag selector, simply use the name of the HTML tag you wish to format. This style applies to all paragraphs of text within <p> tags.

Press Return again and add the following four CSS properties to supply the style's formatting colour, size, font, and left indent:

color: #5f9794;font-family: "Century Gothic", "Gill Sans", Arial, sans-serif;font-size: 1em;margin-left: 50px;

Press Enter (Return) to place each CSS property on its own line. It is also a good idea to visually organize your CSS code by indenting each property with the tab key.

Complete this style by pressing Enter (Return) and then typing a closing bracket (}), which marks the end of the style. Your completed style should look like this:

p {color:#5f9794;font-family: "Century Gothic", "Gill Sans", Arial, sans-serif;font-size: 1em;margin-left:50px;

}

Finally, you will add the closing <style> tag to complete the style sheet.

Press Return to create a new, blank line and type </style>.

Open the page in a web browser to preview your work.


Creating a Group Selector

Sometimes several different elements on a page share the same look. For instance, you may want all your headings to have the same font and colour for a consistent style. Instead of creating separate styles and duplicating the same property settings for each tag<h1>, <h2> and so on you can group the tags together into a single selector.

Return to your HTML editor and the selector_basics.html file.

You will add a new style below the <p> tag style you just created.

Click at the end of the closing brace of the tag selector, press Enter (Return) to start a new line, and then type:

h1, h2, h3 {.

A group selector is simply a list of selectors separated by commas. This rule applies the same formatting, which you will add next, to all <h1>, <h2>, and <h3> tags on the page.

Press Return, and then add two CSS properties:

color: #102536;font-family: Georgia, Times, serif;

You are adding some basic text formatting options, just as you did in the previous steps.

Finally, press Enter (Return), and then type the closing brace to complete this style. It should look like this:


h1, h2, h3 {color:#102536;font-family: Georgia, Times, serif;

}

Save the file, and preview it in a web browser.

The <h1> heading near the top of the page and the <h2> headings introducing each of the three sections all have the same font and font colour.

Creating and Applying a Class Selector

Tag selectors are quick and efficient, but they are a bit indiscriminate in how they style a page. What if you want to style a single <p> tag differently than all the other <p> tags on a page? A class selector is the answer.


Add a new style below the group selector style you just created.

Click at the end of the closing brace of the h1, h2, h3 selector, press Enter (Return), and then type:

.note {

This style's name, note, indicates its purpose: to highlight paragraphs that contain extra bits of information for your site's visitors. Once you create a class style, you can apply it wherever these notes appear like the second paragraph, in this case.


Press Return, and then add the following list of properties to the style:

font-size: .85em;color: #294e56;margin: 0 100px;padding: 10px;border: 1px solid #73afb7;background-color: #fbef99;

Finally, complete the style by pressing Return and typing the closing brace. The completed class style should look like this:

.note {font-size: .85em;color:#294e56;margin: 0 100px;padding: 10px;border: 1px solid #73afb7;background-color: #fbef99;

}

If you preview the page now, you see no changes. Unlike tag selectors, class selectors do not have any affect on a web page until you apply the style in the HTML code.

In the page's HTML, locate the <p> tag that begins with the word "Note:" inside <strong> tags.

To apply a class style to a tag, simply add a class attribute, followed by the class selector's name in this case, the .note style you just created.

Click just after the p in the <p> tag, and then type a space followed by class="note". The HTML should now look like this:

<p class="note"><strong>NOTE:</strong> Lorem ipsum dolor

Be sure not to type class=".note". In CSS, the period is necessary to indicate a class style name; in HTML you omit the dot!

Note: Despite the name, there is no reason you cannot add this class to other tags as well, not just the <p> tag. If you happen to want to apply this formatting to an <h2> tag, for example, then your HTML would look like this: <h2 class="note">.


Save and preview the web page in a browser.

Creating and Applying an ID Selector

You can apply class selectors to multiple elements on a page. For example, you can use the note class you made in the previous exercise to create any number of notes on a page. ID selectors look and act just like classes, but you can apply an ID only once per page. Web designers frequently use ID selectors to indicate unique sections of a page.

You will create a style that sets a specific width for a web page's content, and centres it in the middle of the browser window. Once you create the ID selector, apply it to the page using a <div> tag.


Add a new style below the .note class style you created before.

Click after the previous style's closing bracket (}), hit Return or Enter to create a new line, and then type:

#wrapper {


ID selectors always begin with the pound symbol (#). The style's name indicates its role on the page: Use it to wrap all of the other content on the page, as though you're boxing it up. In that way, the set width and other formatting apply to the entire page content.

Press Return again, and then type:

width:680px;margin: 0 auto;padding: 0 20px;border-left: 1px solid #666666;border-right: 1px solid #666666;

These properties provide a width for the content, set the margins so the content floats in the centre of the web browser, and add a little space between the page content and left and right border lines.

Finish the style by typing the closing brace. The whole thing should look like this:

#wrapper {width:680px;margin: 0 auto;padding: 0 20px;border-left: 1px solid #666666;border-right: 1px solid #666666;

}

Just as with a class, this style does not do anything until you apply it to the page. So you will add a <div> tag to the page's HTML, delineating where you want the ID style to apply.

Find the page's opening <body> tag. Click after the tag's closing >, and then press Enter.

You will place the opening <div> tag here, before the contents of the page.

Type:

<div id="wrapper">

The <div> appears between the <body> and <h1> tags, like so:


<body><div id="wrapper">

<h1><img src="images/logo.gif" alt="CosmoFarmer 2.0" width="553" height="70" />

Next, you will close the <div> tag to indicate the end of the wrapper.

Scroll down the page until you find the last paragraph on the page - the one containing the copyright notice. Click after the closing </p> tag, hit Return, and then type </div>.

The closing </div> is sandwiched between that last paragraph and the closing </body> tag:

<p>Copyright 2006, <a href="http://www.cosmofarmer.com/">CosmoFarmer.com </a></p>

</div></body>

Save the page, and preview it in a browser.

Everything on the page, the CosmoFarmer logo and all of the text, now have a set width and float in the centre of the browser window. Even if you resize the browser window, the content remains centred.

Creating a Descendent Selector


On the selectors_basics.html page, you see a couple of words inside the <h2> tags that require special emphasis. The page's HTML uses the <strong> tag to indicate these special words, but since browsers automatically make headings and <strong> tags bold, you cannot see any difference when you preview the page in a web browser. How can you make those words stand out from the rest of the heading without messing up all the other <strong> tags on the page?

CSS provides a simple solution for targeting just the <strong> tags that appear inside those headings - descendent selectors - and now is your chance to see one in action.

Return to your HTML editor and the selector_basics.html file. Create a new empty line for the descendent selector style.

If you just completed the previous steps, click after the closing brace of the #wrapper style, and then hit Enter (Return).

Type:

h2 strong {

The last tag in the selector strong is the element you ultimately want to format. In this case, the style formats the <strong> tag only when it is inside an <h2> tag. It has no effect on <strong> tags inside paragraphs, lists, or <h1> tags, for example.

Press Enter (Return), type:

color: red;

and then press Enter (Return) again to create another blank line. Finish the style by typing the closing brace character.

The finished style should look like this:

h2 strong {color: red;

}

Save the page and preview it in a web browser.

The word "Before" should appear red in the first <h2> heading, as should the words "Excellent" and "Heavy" in the other two headings.


Descendent selectors are among the most powerful CSS tools. Professional web designers use them extensively to target particular tags without littering the HTML with CSS classes.


handout title:bedford-computing.co.uk/learning/.../09/activity-css-tutor… · web viewcss...

Documents