External CSS link

In the previous lesson so we had seen how to change an internal CSS to an external CSS.

It is now intended that we will use this in other pages of our site.

Piece of cake, for you know who.

Click the “Attach Style Sheet” button at the bottom of the “CSS Styles” pane.

 

 

This opens the “Attach External Style Sheet” dialog.

In this dialog box, click the “Browse” button and navigate to the CSS style created in the previous lesson.

Check “Link” and click the OK button.

If you choose “Import” then the CSS style will be imported into the page and this is not the intention.

That’s it.
When you look at the source code of your page, you see that the link to the CSS style is added. You can indeed see this in the CSS Styles panel.

Repeat for each page of your site where you want to add this CSS style.

You can change the style in a number of ways.

One way to change a style, such as “body” option in the upper part of the CSS panel, double-click the color picker in the

“Properties” of “body” and choose a different color.

A second way is to choose the style and click on the “Edit Style” button.

A third way is to change the style in the mystyle.css page.

In all cases, the change will be performed automatically on all pages using the CSS style.

 

“Selector” (Selector) Types

To create a new CSS rule, click the “New CSS Rule” button at the bottom of the CSS pane.

This opens the “New CSS Rule” dialog:

In the “Define in”, select the CSS file you want to add the new rule.
If you have not already created the css file, choose “New Style Sheet File”.

At the top of the dialog we have three types for the “Selector”.

We have the “Class” selector, the “Tag” selector and the “Advanced” selector.

The “Class” selector is a CSS rule that can be applied to each element in your page and can be used as many times as you want. But this is precisely the mistake made by beginners in CSS. If you define a certain “class” again and again and again in the code of your document, it is more than likely that you have little efficiency and have focused on the use of CSS and it might be better, for your example, to try the “Tag” selector.

The “Tag” selector is applied to a specific HTML tag you have selected in the “Tag”, by clicking the downward pointing arrow or by typing the HTML tag in the box.

And finally we have the “Advanced” selector.

We use this when we have a combination of HTML tags to specify, for example, td h2, which heading (h2) format to apply when it is inside a table cell (td).

Or for the use of pseudo class styles, such a: link, a: hover, a: visited. Do you remember the different views of our links?

Or if we did not want to use HTML tags, we use an ID.

In the next lesson are we going to take a closer look.

Featured Courses

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