Declarations

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>

2.2.5. Glossary#

Cascading#

Cascading refers to the way styles are applied in a specific order of importance. If multiple styles conflict, CSS follows rules to decide which one to apply. For example, styles in a more specific rule or applied later will usually override earlier ones.

Property#

A CSS property is an aspect of an element that you want to style, like color, font-size, or margin. It defines what part of the element you are customizing.

Value#

A CSS value is the setting you give to a property. For instance, if the property is color, the value might be blue or #0000FF, telling the browser what color to use for the text.

Contents