Style Selectors

THESE PAGES ARE STILL UNDER CONSTRUCTION AND DO NOT NECESSARELY REFLECT THE CURRENT VERSION OF TÓPICO

Formatting your page is done by marking up content in your topic collection and applying CSS styles to those elements.

Learning how to appropriately use XML elements, attributes, classes, ids and stylesheet selectors is important to the success of your web projects.

Getting started with style selectors

To get you started with stylesheet selectors, here are a few examples:

Stylesheet selectors examples
Selector Target element
address The html address element is formatted using this selector
.small The dot is used to target elements of a class. This selector is applied to all elements having the small class attribute. Example <p class="small">...</p>
span.highlight Preceding the dot with an element tag allow to target specific types of elements. The <span class="highlight">...</span> is often used in this publication. This style is already available in the styles.custom.xml style list.
#logo The pound sign is used to target elements with an id attribute. The <img id="logo" href="logo.jpg" /> is targeted by this selector.
div#sidebar Preceding the pound sign with an element tag allow to target specific types of elements. The <div id="sidebar">...</span> is targeted by this selector. Since an ID cannot be shared on a page, preceding the pound sign isn't necessary but you might find is a good practice to apply to your stylesheets.
ul li The descendent selector applies the style to all the elements at the end of the sequence. In this case, all unordered (ul) list items (li).
ul#navbar li This selector could be used to format a navigation bar built with an unordered list.
#panel>#logo (1) The direct child selector (>)does not cascade to other descendants of the first element. Tihs selector would apply to the element with the attribute id="logo" if this element is a direct child of an element with the attributeid="panel". If no such relationship exists in the file, the style isn't applied.
  to be continued...

(1) Internet Explorer 6 does not support this selector. IE7 will.

THESE PAGES ARE STILL UNDER CONSTRUCTION AND DO NOT NECESSARELY REFLECT THE CURRENT VERSION OF TÓPICO

133 / 194