CSS - Cascading Style Sheets

CSS (Cascading Style Sheets) is used to formatting HTML text. The original HTML text formatting was utilizing HTML tags. Today the original HTML formatting is used in a very limited way - you can see it just for setting up bold or italics - tags <b> and <i>.

All the other formatting is solved by CSS. There are three ways of using CSS:

1. Direct style

Formatting is defined directly in the source text in the attribute style.

Example:

<p style="margin-left: 40px;">The paragraph will be indented 40 px from the left.</p>

The paragraph will be indented 40 px from the left.

If you are using ObjectGears HTML editor anad you choose e.g. font type or script colour, HTML editor will generate tag <span> and will use property style.

2. Stylesheet defined in the document head

In this way you can define at the beginning of the page e.g. how all the headlines should look like. This will ensure a consistent look across the whole page.

<style>
p {color: blue}
</style>

Above stated code in the head of the page will cause all the paragraphs in the page having a blue script.

3. External file

You will use an external stylesheet (file with the suffix .css), that will enable you to use in more page a style that you have defined just once. The page will refer to the file by means of tag <link>. If you refer in this way from all the pages, then they will look consistent.

You will create a file with name e.g. my_styles.css. There will be just this text in the file:

p {color: blue}

You will state in pages, where you want to use this style, following:

<link rel="stylesheet" type="text/css" href="my_styles.css">

Advantages of using CSS in external file:

• Styles in the file will be downloaded just once for the whole web. User can then navigate much faster in the web.
• Size of the HTML page will be reduced substantially. The pages then have just their own information content.
• You will perform the change just in one file once without need to do anything with the pages. The documentation that you are using now contains more than one thounsand pages and in case a change is needed, it is not possible anymore to change the pages one after another.

You can use CSS in severall place in ObjectGears:

• Column type Text and its properties CSS content class and URL of the file with styles.
• Webpart Script, in which you can define CSS class, URL of the file with styles and Styles themselves.
• Webpart HTML text
• Schema of the Page
• Themes and global styles

We recommend Wikipedia and w3schools for more information about CSS.