Class selector

The following is the “Class” Selector.
We use this when we want to create a custom style that we want to apply to any HTML element in our page.
A class selector can be applied repeatedly to different elements in our document.

A class selector always begins with a period followed by a name. It does not matter what this name is, as long as you know where it stands. So give it an appropriate name.

To add a “Class” selector, we click again on the “New CSS Rule” button at the bottom of the CSS panel.
Select “Class”, and enter a name preceded by a point in the “Name:”.
In the “Define in”, we choose the external CSS style “mystyle.css” and click the OK button.

In this example, I want a red line for the first paragraph in my document.
For this I choose the first category “Border”.
Uncheck all the boxes above. Why? Well, I just want a line to the left of the paragraph.
Down in the “Left”, I choose as a style option “continuous”, in the second column “width” I choose the option “Normal” and in the third column “Color” I choose a color from the color picker button .

It is quite logical that when you get a line on the right, top or bottom, set this box (es). And if you want a box around the section, set all four boxes for this.

Choose the second category “Box” and in the “Left” box in “Padding” column, give in the number of pixels you wish to use as margin between the line and the text. In this case I type this as 10.
This gives me a margin of 10 pixesl between the line and the text.
Click the OK button.

The new CSS rule is added to the CSS panel, but not to the section.

Now, to apply the new CSS rule inserted, to an HTML element, in this case the P tag, place the cursor in the paragraph, click the downward pointing arrow next to the “Style” box in the “Properties Window”.
As you can see the Class-style “Vert Line” is added to the list.
Click to apply it.

When we look into the source of our database, we see that this class style is applied to the P tag, this is the paragraph tag of our page.

And when we open the file mystyle.css, we see below that the new rule is added.

If you’re planning to apply this style to each P tag in your document then you know that you’re wrong and that you are better with this tag selector, namely the P tag.
(See the previous lesson)

This Class-style can not only be applied to a paragraph. If I want to add a dash for the logo,no problem, place the cursor on the logo, click the downward pointing arrow next to the “style” box in “Properties Window”. And choose “Vert Line” in the list.

Featured Courses

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