css notes for rh

7/31/2019 CSS Notes for RH

1/6

Mary Ann Howell11/11/08 CSS notes for RoboHelp Page 1 of 6

CSS notes for RoboHelp

In the CSS pageThe CSS (Cascading Style Sheet) is made up of a list of selectors and their

declarations, in this general format:

Selector: {Declaration}

Selector:names the style and defines where to use it,

for instance, in which tag (p, h1).

Declaration: Defines what the style does,

through various properties and their values.

Example of an HTML element selector and its properties:

Style:

HT ML _ S e l e c t o r _ Na me {

P r o p e r t y : Va l u e ;P r o p e r t y : Va l u e ;

P r o p e r t y : Va l u e ;

}

Example:

b o d y {

b a c k g r o u n d - c o l o r : # F F F F F F ;

f o n t - f a mi l y : Ar i a l ;

f o n t - s i z e : me d i u m;l i n e - h e i g h t : 1 e m;

c o l o r : # 3 3 6 6 9 9 ;

t e x t - a l i g n : c e n t e r ;

}


2/6


2 CSS notes for RoboHelp Mary Ann Howell

Types of selectors

There are three main types of selectors:

Element

HTML tags such as:

< p > , < h 3 > , < d i v > , < b o d y > , < i mg >

The body tag is a key element.It sets the default style for the whole page.

.Class

Creates a special look for blocks of HTML text.

On your HTML page, you can use a .class tag within a tag to give a

special look to a section of content.

Or, you can use it within a

tag to give a special look to a paragraph.

#ID

Is set up and applied like the .class tag, but can only be used once on each

HTML page

Grouping selectors

You can group selectors (separate each with a coma) and set their properties at the

same time:

h 1 , h 2 , h 3 , h 4 {

c o l o r : # 0 0 0 0 9 9 ;

}


3/6


Mary Ann Howell 11/11/08 CSS notes for RoboHelp 3

Style sheet syntax

HTML tags (elements) such as

, , ,

Example:

(This defines the alignment of table cells (td) and table headings (th)

at the same time)

t d , t h {

v e r t i c a l - a l i g n : t o p ;

}

.Class

Example:

. n a me Yo u Ma k e Up {

c o l o r : # f f f f f f ;

}

#ID

Example:

# n a me Yo u Ma k e Up {

c o l o r : # f f f f f f ;

}

Defining styles for special cases

Contextual selectors apply style to text depending on what element the text is in

your HTML page. For example, you may want to apply a special style to use for

introducing notes.

In Robohelp, you need to define the style in the context of a

element tag.

This example applies blue text to any text found inside the

tag calling out the

.class named .note.

First, in the style sheet, we define the style for warning tag within a

HTML

element.

To call these styles out in your HTML page:

p . n o t e {

t e x t - a l i g n : c e n t e rp a d d i n g : 1 5 p x ;

b a c k g r o u n d - c o l o r : # 0 0 0 0 6 0 ;

}

Note:


4/6



Referencing CSS definitions

You can link to external style sheets in the

section of an HTML page

CSS styles embedded in section of the HTML page:

Calling out styles inline with HTML elements

Example: adding an inline style to a

tag:

Span tags

tags affect local text, like the character tags used in FM.

Example of a span tag used in HTML code:

Result on HTML page:

Stop if you see a Danger sign.

How the class style maybe defined in the CSS:

td, th {vertical-align: top;

}

Now is the time for all good men to come to the aid of their country

Stop if you see a Danger sign.

span.warning {

color: #CC0000;

}


5/6


Mary Ann Howell 11/11/08 CSS notes for RoboHelp 5

Preformatted text

Usually, what you see when you view your HTML code is not what you get after

its displayed by the browser.

White spaces and line breaks are ignored by the browser.

Example of a

tag in used in HTML code view of the text:

Heres the result on the HTML page displayed by the browser:

T h e s u n wa s s h i n i n g o n t h e s e a , S h i n i n g wi t h a l l h i s

mi g h t .

But if you wrap your HTML text in a special element tag named , all the white

space, including spaces, tabs, and returns, is included on the output HTML page.

Example of a tag in used in HTML code view of the text:

Heres the result on the HTML page displayed by the browser:

T h e s u n wa s s h i n i n g o n t h e s e a ,

S h i n i n g wi t h a l l h i s mi g h t .

The sun was shining on the sea,

Shining with all his might.

The sun was shining on the sea,

Shining with all his might.


6/6



The cascade in cascading style sheetsWhose attribute controls the appearance of your text?

Three rules apply:

1. Cascade

This is the order of styles that the browser reads,

the style read last is obeyed:

- the stylesheet

- the styles embedded in the head of the HTML page

- styles defined inline with the text

2. Inheritance

If an attribute is not defined by the style, the closest parent that defines the

attribute is obeyed.

3. Specificity

Selectors have a weight, the heaviest is obeyed.

Weights:

- Inline styles 1000

- #IDs 100

- .Class selectors 10

- Element selector 1

css notes for rh

Documents