What is CSS?

CSS are a number of formatting rules that determine the appearance of a web page.

When we use CSS styles for the layout of our page, the page content is separated from the layout of the page.
The content of our pages, these are the texts, images, tables, forms, etc. .., lies in the HTML code or in one part (usually the upper part) of the HTML (internal), while the CSS rules are located in another file (external).

You can also use then both internally and externally.
If for some reason both CSS styles are in conflict, for example the internal style sheet says that the background color should be green and the external style sheet says that the background color should be yellow, then the internal style sheet is applied .

 

Using CSS rules gives us two advantages:

1. you will not have to repeat any changes, you make to the appearance of a page, for each page. At least not when you work with external CSS.
2. separating the contents of the page with the layout of the page gives a more simple HTML code, which in turn leads to shorter loading time in the browser.

 

By using CSS rules we have control over a (large) number of text properties, background colors, color of links, positioning of elements and much more.

It is impossible to discuss all the possibilities of CSS in this course, but this course will go a long way in giving help.
For those of you who want to know more about CSS styles, can Google on this topic.

 

Internal CSS

To create a page with internal CSS first open this page.
Click “Modify” in the menu bar and select “Page Properties” in the drop-down menu.
This opens the “Page Properties” dialog box.
On the left side of the dialog box, we have different categories and on the right side, we have the settings for the selected category on the left side.

For example, in the “Appearance” category, we can set the font to use on this page, text color, text size etc.
We have the “Links” category, where we enter the settings for the display of the links.

In thec”Headings” category, we enter the settings for the display of the headings used in this page.If you do not know what the “headings” are, they are in the “Properties Window” under the “Format” box.

So by the choosing the “Headings” category, we can change the default settings of these different headings.

 

We continue with the “Appearance” category.
In the top box you choose by clicking on the downward pointing arrow, the font to use for this page. In this case I choose the font Verdana. I choose the font size 12 pixels, for the text color, I choose blue. And for the background color I choose a khaki color.
You can customize colors by clicking on the color picker or by typing the HEX code, this is a Internet color code, in the textbox. Enter the color code with a hash (#), so you avoid problems in some browsers.
Click the OK button when you’re done.

With all this set, let’s see what this has added in the HTML of this page. Select the “Code” tab to view your document.

As you can see in the image below, an internal CSS style is added at the top of the page, which includes the four options that we just entered.

A CSS style is classified according to CSS rules or a composition of several rules. More about CSS rules in the next lesson.

When we display our document changes back in ‘Draft’, we see the following:
the background color is a khaki color, the text is Verdana 12 pixels wide and the color is blue.

Now let’s see what we can do with the “Links” category.
Reopen the “Page Properties” dialog and choose the “Links” category.
In the top box can we change the font for the links.
In the second box, we can adjust the size.
And we have the color for “link color”, “Visited Links”, “Rollover Links” and the “Active Links” boxes.

The first, “Link Color”, determines the color of the link.
The second, “Visited Links”, determined the color of the link that has been clicked by the visitor.
The third “Rollover Links” determines the color of the link for rollover.
And the fourth, “Active Links”, determines the color of the link when the visitor is on this page.And in the last box “Underline Style” is where we decide how we want to underline the link. Default is set to “Always underline”, but we also have the options of “Never underline”, “Show underline only on rollover” or the “hide underline on rollover” for our links.

Click OK when you’re done.

If we take a look at the source code of our document, we see that the CSS style is updated.
The four newly defined rules are added to the CSS style.
a: link, a: visited, a: hover, a: active.

When we view the page in our browser, by clicking the F12 key on your keyboard, you can see the various newly created CSS styles into force.

If we want to modify one or more styles, we have various options.
The first is again to open the “Page Properties” dialog window.
The second way is to change the properties in the source code of your document.

And the third way is to open the CSS panel and then change in the CSS styles.
Under the “All” tab, select the style and change in the “Properties ****” . But more about that in subsequent lessons.

 

Featured Courses

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