Scribd
Upload
137 views

CSS Notes For RH

CSS stylesheets allow you to define selectors and declarations to style HTML elements. There are three main types of selectors - elements, classes, and IDs. Styles can be defined internally or linked via external stylesheets. The cascade determines which styles take precedence based on specificity, inheritance from parent elements, and order of definition.

Uploaded by

Robin Son
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
137 views

CSS Notes For RH

CSS stylesheets allow you to define selectors and declarations to style HTML elements. There are three main types of selectors - elements, classes, and IDs. Styles can be defined internally or linked via external stylesheets. The cascade determines which styles take precedence based on specificity, inheritance from parent elements, and order of definition.

Uploaded by

Robin Son
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

CSS notes for RoboHelp

In the CSS page


The 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: HTML_Selector_Name { Property: Value; Property: Value; Property: Value; } Example:
body { background-color: #FFFFFF; font-family: Arial; font-size: medium; line-height: 1em; color: #336699; text-align: center; }

Mary Ann Howell11/11/08

CSS notes for RoboHelp Page 1 of 6

CSS notes for RoboHelp

Types of selectors
There are three main types of selectors: Element HTML tags such as: <p>, <h3>, <div>, <body>, <img> The body tag <body> 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 <div> tag to give a special look to a section of content. Or, you can use it within a <p> 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:
h1, h2, h3, h4 { color: #000099; }

2 CSS notes for RoboHelp

Mary Ann Howell

CSS notes for RoboHelp

Style sheet syntax


HTML tags (elements) such as <p>, <h3>, <div>, <body> Example: (This defines the alignment of table cells (td) and table headings (th) at the same time) td, th { vertical-align: top; } .Class Example: .nameYouMakeUp { color: #ffffff; } #ID Example: #nameYouMakeUp { color: #ffffff; } 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 <p> element tag. This example applies blue text to any text found inside the <p> tag calling out the .class named .note. First, in the style sheet, we define the style for warning tag within a <p> HTML element.
p.note { text-align: center padding: 15px; background-color: #000060; }

To call these styles out in your HTML page:


<p class = "note"> Note: </p>
Mary Ann Howell 11/11/08 CSS notes for RoboHelp 3

CSS notes for RoboHelp

Referencing CSS definitions


You can link to external style sheets in the <head> section of an HTML page
<link href= "templates/mySite.css" rel= "stylesheet" type= "text/css" />

CSS styles embedded in <head> section of the HTML page:


<style type= "text/css"> td, th { vertical-align: top; } </style>

Calling out styles inline with HTML elements


Example: adding an inline style to a <p> tag:

<p style= "font-family: Times New Roman; font-size: 12pt; color: fuchsia" > Now is the time for all good men to come to the aid of their country </p>

Span tags
<span> tags affect local text, like the character tags used in FM. Example of a span tag used in HTML code:
<p>Stop if you see a <span class= "warning">Danger</span> sign.</ p>

Result on HTML page: Stop if you see a Danger sign. How the class style maybe defined in the CSS:
span.warning { color: #CC0000; }

4 CSS notes for RoboHelp

Mary Ann Howell

CSS notes for RoboHelp

Preformatted text <pre>


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 <p> tag in used in HTML code view of the text:
<p> The sun was shining on the sea, Shining with all his might. </p>

Heres the result on the HTML page displayed by the browser: The sun was shining on the sea, Shining with all his might. But if you wrap your HTML text in a special element tag named <pre>, all the white space, including spaces, tabs, and returns, is included on the output HTML page. Example of a <pre> tag in used in HTML code view of the text:
<pre> The sun was shining on the sea, Shining with all his might. </pre>

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

The sun was shining on the sea, Shining with all his might.

Mary Ann Howell 11/11/08

CSS notes for RoboHelp 5

CSS notes for RoboHelp

The cascade in cascading style sheets


Whose 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 Inheritance If an attribute is not defined by the style, the closest parent that defines the attribute is obeyed. Specificity Selectors have a weight, the heaviest is obeyed. Weights: - Inline styles 1000 - #IDs 100 - .Class selectors 10 - Element selector 1

2.

3.

6 CSS notes for RoboHelp

Mary Ann Howell

You might also like