In NOLOH, CSS can be used in various different ways: you can assign an application multiple style sheets, assign a CSS class to objects, or assign a specific CSS property of an object.

Adding Cascading Style Sheets to an Application

Assigning Cascading style sheets to your application is a powerful way to skin and customize the visual style of your application quickly and easily. You can dynamically add or remove any style sheet. This allows the flexibility to decide whether a particular event might trigger a complete change to the look and feel of your website/application.

//Adding a single style sheet to an application
class CSSExample extends WebPage
{
    function CSSExample()
    {
        parent::WebPage("CSS Example");
        /*To add a CSS class to the page you would do the following*/
        $this->CSSFiles->Add("Styles/Sheet1.css");
    }
}
//Adding multiple style sheets to an Application individually
class CSSExample extends WebPage
{
    function CSSExample()
    {
        parent::WebPage("CSS Example");
        /*Adding multiple CSS classes to an application individually*/
        $this->CSSFiles->Add("Styles/Sheet1.css");
        $this->CSSFiles->Add("Styles/Sheet2.css");
    }
}
 
//Adding a "range" of style sheets to an Application
class CSSExample extends WebPage
{
    function CSSExample()
    {
        parent::WebPage("CSS Example");
        /*Using AddRange to add multiple CSS classes to an application*/
        $this->CSSFiles->AddRange("Styles/Sheet1.css", "Styles/Sheet2.css");
    }
}

AddRange is used to easily add multiple items to an ArrayList in NOLOH. More on those, later.

So, what implications does adding a style sheet to an application have? Well, assigning a style sheet to your application would allow you to assign CSS classes to an object.

Assigning CSS Classes to an Object

Take the following Panel SomePanel. It has a Label to which we're going to assign a CSS class to. The CSS class assigned should correspond to a CSS class in a stylesheet that was previously added to the WebPage, as in the previous example.

class SomePanel extends Panel
{
    function SomePanel()
    {
        parent::Panel();
        //Instantiate a Label
        $label = new Label("I'm a CSS Example");
        //Assign a CSS Class to the $label Object
        $label ->CSSClass = "Example1";
        //Or, one can assign multiple CSS Classes
        $label ->CSSClass = "Example1 Example2";
    }
}

Assigning CSS Properties Directly to an Object

Now that you've seen how to add Cascading Style Sheets and assign CSS Classes, we're now going to show you how you can set a CSS property directly without adding a sheet, or assigning a class using SomePanel to demonstrate this.

class SomePanel extends Panel
{
    function SomePanel()
    {
        parent::Panel();
        $this->CSSPadding = "5px"; //Set the CSS property "padding:5px;" to all instances of SomePanel.
        //Instantiate a Label
        $label = new Label("I'm a CSS Example");
        //Set a CSS Property directly to an Object
        $label->CSSPadding_Left = "2px"; //Sets the CSS property "padding-left:2px;"
        $label->CSSFont_Style = "italic"; //Sets the CSS property "font-style:italic;"
    }
}

So, you see that you can easily assign ANY CSS property an object, regardless of classes or stylesheets. It's IMPORTANT to note that setting a CSS property directly will override any setting set via a CSS Class. This allows you with some flexibility if you would want a specific object to use a CSS Class, but dynamically override a property in a particular situation.