2.2. Declarations#
2.2.1. Syntax#
Styling an element is performed by using a CSS declaration, which consists of property- value pairs, seperated by semi-colons.
For example the syntax for two properties with values is:
property1: value1; property2: value2;
2.2.2. Properties#
CSS defines many properties which can be adjusted. These range from changing the style of text such as the font used, font size, font colour all the way to complex masking or setting style dynamically based on whether the cursor is hovering over the element.
Some examples of valid properties and associated values are:
color: red;- set the font colour to CSS Red.font-size: 14px;- set the font size to 14 pixels tall.text-align: right;- right align any text within the tag.
Hint
The links below will be helpful in learning about available properties and their associated values.
2.2.3. Inline Styling#
Inline CSS is written directly inside an HTML tag using the style attribute.
In the example below the font size is set to 64 pixels tall.
<p style="font-size:32px;color:red !important;">
Big RED text
</p>
2.2.4. Cascading#
A powerful feature of CSS is that they are cascading, which means that a style defined by a parent tag, is applied to all children until it is overwritten. This cascading of styles is applied until the last child tag.
In the example below, the child <b> tag overwrites the colour of the
parent <p>.
As shown in the example below the <span> tag is a generic tag than can be used to
select a section of the document. Here the child <span> tag overwrites the
colour of the parent <p>. Note that the font size doesn’t change because that
hasn’t been overwritten.
<p style="font-size: 64px; color: red !important;">
Some <span style="color: black">really</span> important warning!
</p>