Skip to main content
Engineering LibreTexts

14.5: CSS - Cascading Style Sheets

  • Page ID
    39658
    \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

    Cascading Style Sheets (http://www.w3.org/Style/CSS/), or CSS for short, are a standard way for web applications to separate style from content. Seaside relies on CSS to avoid cluttering your rendering code with layout considerations.

    You can set the CSS style sheet for your web components by defining the method style, which should return a string containing the CSS rules for that component. The styles of all the components displayed on a web page are joined together, so each component can have its own style. A better approach can be to define an abstract class for your web application that defines a common style for all its subclasses.

    Actually, for deployed applications, it is more common to define style sheets as external files. This way the look and feel of the component is completely separate from its functionality. (Have a look at WAFileLibrary, which provides a way to serve static files without the need for a standalone server.)

    If you already are familiar with CSS, then that’s all you need to know. Otherwise, read on for a very brief introduction to CSS.

    Instead of directly encoding display attributes in the paragraph and text elements of your web pages, CSS lets you define different classes of elements, and place all display considerations in a separate style sheet.

    To put it another way, a CSS style sheet consists of a set of rules that specify how to format given HTML elements. Each rule consists of two parts. There is a selector that specifies which HTML elements the rule applies to, and there is a declaration which sets a number of attributes for that element.

    SeasideDemoWidget >> style
        ^'
    body {
        font: 10pt Arial, Helvetica, sans-serif, Times New Roman;
    }
    h2 {
        font-size: 12pt;
        font-weight: normal;
        font-style: italic;
    }
    table { border-collapse: collapse; }
    td {
        border: 2px solid #CCCCCC;
        padding: 4px;
    }
    #author {
        border: 1px solid black;
        padding: 2px;
        margin: 2px;
    }
    .subcomponent {
        border: 2px solid lightblue;
        padding: 2px;
        margin: 2px;
    }
    .highlight { background-color: yellow; }
    .boolean { background-color: lightgrey; }
    .field { background-color: lightgrey; }
    '
    

    The previous method illustrates a simple style sheet for the rendering demo shown earlier in Figure 14.4.2. The first rule specifies a preference for the fonts to use for the body of the web page. The next few rules specify properties of second-level headings (h2), tables (table), and table data (td).

    The remaining rules have selectors that will match HTML elements that have the given class or id attributes. CSS selectors for class attributes start with a . and those for id attributes with #. The main difference between class and id attributes is that many elements may have the same class, but only one element may have a given id (i.e., an identifier). So, whereas a class attribute, such as highlight, may occur multiple times on any page, an id must identify a unique element on the page, such as a particular menu, the modified date, or author. Note that a particular HTML element may have multiple classes, in which case all the applicable display attributes will be applied in sequence.

    Selector conditions may be combined, so the selector div.subcomponent will only match an HTML element if it is both a div and it has a class attribute equal to subcomponent.

    It is also possible to specify nested elements, though this is seldom necessary. For example, the selector p span will match a span within a paragraph but not within a div.

    There are numerous books and web sites to help you learn CSS. For a dramatic demonstration of the power of CSS, we recommend you to have a look at the CSS Zen Garden (http://www.csszengarden.com/), which shows how the same content can be rendered in radically different ways simply by changing the CSS style sheet.


    This page titled 14.5: CSS - Cascading Style Sheets is shared under a CC BY-SA 3.0 license and was authored, remixed, and/or curated by via source content that was edited to the style and standards of the LibreTexts platform; a detailed edit history is available upon request.