CSS
Digest
The term CSS refers to a Cascading Style Sheet, which is the standard method for styling the appearance of a website. Cascading Style Sheets effectively separate the code needed to create the look and feel of a website from the actual XHTML tags that define the structure of its pages. When designing a website, it is important to separate the concepts of presentation and structure, because a site can quickly become very hard to maintain when a designer mistakenly combines them together. Because CSS properties reside inside an independent file, multiple pages within a single website can simply link to it to receive the style definitions that dictate the appearance and positions of elements on a page. When a website designer uses this modular approach to site development, it is easy to change the properties of all pages within a site by making a simple edit to the single CSS file to which all of the pages link.
Concept
Using CSS in Cascade
There are several ways to use CSS in Cascade. The most common ways include:
- Include the CSS file(s) in the template. This is the standard practice for web sites.
- Include a global CSS file and available classes (styles) in Tools -> Preferences -> Content. The global styles and CSS are included by default in the WYSIWYG for all users unless a more local CSS file and classes exist.
- Include a local CSS file and available classes at the Target-level. This allows for specific CSS classes across different sites and pages.
- Include a local CSS file and available classes at the Group-level. This allows for specific CSS classes based on the default group of the user. The Group-level classes and CSS override the Target and global levels.
- CSS in the XSLT. CSS classes can be applied programmatically in the XSL to style the data definition and index block XML in whatever way desired.
Please note it may be necessary to extend or provide an alternate CSS file for use in Cascade that is different from what is used on your live site. This occurs when more precise selectors are used in the CSS (especially the use of ids like div#content). For the classes made available in Cascade’s word processor, standard classes that are not dependent on being positioned according to other elements should be used. We recommend a standard naming convention like styles.css and styles-cms.css to differentiate the two.
Technical
Example XHTML and CSS
The XHTML below represents a simple webpage document that has a single paragraph in its body. Without any CSS styles, the page would have a plain, white background and the standard web browser font (Times New Roman in many cases).
XHTML Page (index.html)
The CSS file defined below contains two CSS definitions that could be applied to an XHTML document and any others in the website that contain the <body> and <p> elements. The highlighted, red <link> tag in the XHTML document demonstrates how a designer would link the particular page to the CSS file. Since the example XHTML document links with the example CSS file, the background of the webpage will be blue with the page text appearing in the Arial font with an 11-pixel letter height. Likewise, the paragraph in the body of the document would have a 10-pixel margin on all sides, and its text color will be white.
Cascading Style Sheet (styles.css)
CSS Class
A CSS class is a special component of Cascading Style Sheets that may be used to target unique elements within an XHTML document and assign CSS properties to them. In contrast to a typical CSS definition such as a rule that targets all <p> elements within a document, a class may be used to target a specific <p> element in the document while skipping the others. Implementing a class within an XHTML document may be useful when an element or group of elements need to stand out on the page with different style properties.
Example XHTML and CSS
XHTML Page (index.html)
Cascading Style Sheet (styles.css)
The XHTML document above contains three paragraphs within its body. The attached, example CSS file styles all <body> and <p> with their respective properties. The page background is blue and the font has been set to Arial with a letter height of 11 pixels. All paragraphs on the page will have 10-pixel margins, and their text color will be white by default except for the last paragraph with the class attribute “red.” The name “red” in the paragraph class attribute corresponds to the CSS class definition “.red” in the CSS file. Since the class contains a foreground color property set to “red,” the color of the paragraph text will consequently be red instead of white.
In Cascade Server, an administrator may configure a selection of CSS classes to be made available in a drop down box in the WYSIWYG editor. Users can then select the appropriate classes visually as they enter content.