Selector ID

Under the advanced type of “Selector”, we have two possibilities.
We have the ID and we have the pseudo-class selector.
The first thing I’m going to discuss is the selector ID.

Unlike the Class Selector, which I discussed in the previous lesson, the Selector ID is just one element in our application. For example, the footer in our document.

A selector ID is always preceded by a pound sign (#), followed by a name.

In this example I make a footer for the page.
I click the “New CSS Rule” button at the bottom of the CSS panel.
Choose the “Advanced” option and enter a name preceded by a pound sign (#) in the “Selector”.
In the “Define in”, we choose our external CSS style file “mystyle.css” and click the OK button.

In the “Type”, I set the size for the text, eg 9 pixels, the footer does not have to be large and choose a color.
In the “Background” I change the background color.

I select what I want to format as footer in my document.

And click the “Insert Div Tag” button under the “Layout” tab in the “Insert” menu.
More about Div tags in the next lesson.
Why do I place my footer in a Div tag?

Now if we place text in a ‘Div tag’, it opens the “Insert Div Tag” dialog.
And in this dialog box, click the downward pointing arrow button next to the ID box and select the newly created “footer” option.
Click the OK button when you’re done.

The selected text is immediately adjusted.

OK, what can we do with Selector ID?

Actually, we can see everything we give to an ID. For example, a cell in a table.
Select the cell in the table by clicking the <td> tag in the tag selector. If you do not remember how, just go back to Lesson 2 of this course.

Open the “Tag” window by clicking the downward-pointing arrow button and click the plus sign next to “CSS / Accessibility” menu so that it opens.

Besides the “id” box, you give the cell a name like “RNavigation”.

And click the “New CSS Rule” button at the bottom of the CSS panel.
This opens the “New CSS Rule” dialog.
Select the checkbox “Advanced” and type the name you just entered as an identifier for the cell, that is RNavigation, in the “Selector”. Do not forget to type the pound sign (#) before the name.
Click OK.

In the dialog box, choose the category “Background”.
I click the “Browse” button and navigate and select the background image I wish to have in this cell.

Then choose the category “Block” and in the “Vertical Alignment” I choose the “Top”.
This will align my text on the upper side of the cell.

Click the OK button when you finish the settings.

The result looks something similar.
The text, in this case the links, is aligned at the top and the image, set for background, is not repeated.

In the next lesson, we will establish links to these buttons, only through CSS.

Featured Courses

• Downloading iPad Apps
• Lesson 1: Introduction to Publisher
• Lesson 65: File Formats