Tutorial: Styles

Many aspects of HTML elements can be changed, such as color, padding, size and font style (see w3schools.com for a good reference). One way is to edit the attributes of an element directly:

<p style=’color: blue’>This text will be blue.</p>

However, once you want to change more than a handful of attributes, this method gets quite cumbersome. It becomes more efficient to use a stylesheet. The basic idea is that the styles are stored in a stylesheet, the stylesheet is imported into the HTML file, and the class attribute of the elements indicate which styles to apply to each.

The following would be the equivalent stylesheet:

// myStyles.css
.blueText {
    color: blue;
}

Then in your HTML, the stylesheet is imported in the tag, and the styles are applied via the class attribute:

// client.html
<link rel="stylesheet" href="<appId>/myStyles.css">
<p class=’blueText’>This text will be blue.</p>