CSS

CSS, Cascading Style Sheets, is the standard way to add styling to a web page. It is actually a pretty complicated topic, so this is only going to be a fairly superficial overview.

CSS styling can be defined in several places, and the format is slightly different depending on where it is done, but we will start with the CSS file. In Quest 6, this is style.css.

A CSS definition has two parts; a selector and a declaration. The declaration can itself be composed of several properties, where each property consists of a name and a value - just like attributes in Quest in fact, except each line ends with a semi-colon, not a comma. Here is an example:

p {
  color: red;
}

Here "p" is the selector. It tells the browser that this styling is to be applied to all elements with the tag name "p" (which is standard paragraph text). The declaration is contained within the curly braces, between { and }; in this case just one property. The name is "color", the value is "red". Note that they are separated by a colon, and terminated by a semi-colon.

Selector

That example was simple enough, but selectors can be very complex.

To select a specific element, give the element an "id" attribute in the HTML, then use # before that in the selector.

<div id="red-text">Some text</div>


#red-text {
  color: red;
}

To select a set of elements, give the elements a "class" attribute, then use . before that in the selector.

<div class="red-text">Some text</div>


.red-text {
  color: red;
}

You can combine selectors in complex ways, and there are a couple of examples on this page. For more details, I recommend this page.

Properties

There is a huge number of properties Some of the more common are:

color
background-color
font-family
font-size
font-weight (for bold)
font-style (for italic)
text-decoration (for underline)
text-align
border
margin
padding

The last three can be set for each side individually, so border-left, border-top, etc. More here.

Inline styling

CSS can be applied as an attribute in HTML. This is done with the style attribute, and the value should be the bit from within the curly braces.

<div style="color:red;font-style:italic;">Some text</div>

JavaScript styling

You can also apply styling using JavaScript...

The general approach is to get the HTML element, using document.querySelector, together with the selector. Prefix with . for a class or # for an ID as normal for CSS. Attributes are accessed via the "style" attribute. For example:

document.querySelector('#text-dialog').style.width = '100px'
document.querySelector('#text-dialog').style.backgroundColor = 'red'

Note:

• when setting a value with units, there must be no space between the value and the units
• CSS attributes that are two words much be converted to camel-case