Before we go to CSS proper, we will have to first understand the HTML DOM (Document Object Model), and the CSS syntax.
Let’s begin with the HTML DOM.
The HTML DOM
In web designing, the HTML and CSS play vital roles in displaying contents to users. Before any single browser displays the content of an HTML document to users, it processes the document first.
And this is done in the following ways:
- The browser will first combine the contents of the HTML and CSS.
- The browser converts the contents into a DOM (Document Object Model).
- The HTML DOM is placed in the computer memory
- The browser displays the content of the HTML DOM to the user.
The HTML DOM is an Application Programming Interface (API) that interacts with an HTML document. It represents its data in a tree-like structure to form parents and children. The branches from the parent form the DOM nodes. These DOM nodes are used to represent the elements, attributes, and texts in a DOM tree.
Accordingly, each element in HTML is called an object, while the nested elements become their children. Texts enclosed by the elements are also called objects. It is important to understand that a parent element has child(ren) and the child may have siblings.
Let us illustrate using the HTML below.
<html> <head> <title>This is my First Title</title> <head> <body> <section> <h1>My First Section</h1> </section> </body> <html>
The above HTML when loaded creates a DOM tree shown below.
In the code above, the HTML is the root or parent, while the head and body are its children. The head becomes the parent of the title element, and the text in the title becomes the child of the title element and so on.
A child may have siblings in which case, the element will have more than one child.
For example, create a DOM tree from the following HTML code.
<ol> <li>My first list</li> <li>My second list</li> <li>My third list</li> </ol>
The CSS Syntax
The CSS syntax makes up a style definition for a selected element. To understand the CSS syntax, we shall define the following components of a CSS syntax:
- Properties
- Values
- Declarations
- Declaration block
- Selectors
Properties and values:
Every CSS rule consist of two basic building blocks which must be understood: the properties and values. A CSS property is a characteristic of an element in the HTML document that should be affected by the property value. For example: font-family, color, font-size, etc. These are CSS properties which values must be attached to create a declaration. On the other hand, a CSS property value refers to the change that must be applied to the property. For example, if you specify a color property, you must specify the value for the color, say, blue, red, #00ff00, etc.
Declaration:
When a CSS property is combined with a CSS value, it forms a declaration. Hence, a CSS declaration is what brings the actual effect to the selected HTML element. A colon “:” is used to separate the property from the value. And a semi-colon “;” is used to terminate a CSS declaration within a declaration block.
Let’s look at an example:
1 color: red;
color in the above is a CSS property, while red is a CSS value. The line of statement is a CSS declaration.
Declaration block:
A declaration block is the totality of all the CSS property: value pair applied to a selector. Each declaration block is enclosed in an open and closing brace bracket “{…}”. Each declaration within a declaration block must be terminated with a semi-colon “;”.
Let’s see the following example:
Selector {
color: red;
background-color: silver;
font-weight: 20px;
}
The above is a sample declaration block with each line representing a declaration. In actual CSS code, the last declaration may not have a semi-colon “;” if it is the last declaration in the block.
Common CSS Selectors
Selector:
A selector is an element of a prefix before the opening brace bracket to which the declaration block applies. Selectors can be simple and complex (more on this later).
Simple selectors include element selector (an element can be a selector), id selector, class selector, and universal selector.
The id and class attributes can also be selectors. To add a simple selector to a block, do the following:
Element selector:
This will apply CSS to all of such element throughout the HTML document. E.g. if <p> is selected, then CSS will be applied to all p in the website or webpage.
Example:
p {
color: red;
background-color: silver;
font-weight: 700;
}
Id selector:
This will apply CSS to all elements with the same id throughout the website or webpage. In CSS, Id selectors are prefixed with the “#” (hash tag) character.
This is an example of id selector:
#tests {
color: red;
background-color: silver;
font-weight: 20px;
}
Class selector:
This applies CSS to all elements with the same class. Using the class attribute in a HTML element, we can apply the same style to more than one element at the same time. Prefix class selectors with a “.” (dot).
To apply CSS to classes, do this:
.myHeading {
color: red;
background-color: silver;
font-weight: 20px;
}
Universal selector:
We use universal selector to apply CSS to all the HTML elements at the same time. To apply the universal selector, we use a wildcard “*”. As shown in the following CSS syntax:
* {
color: blue;
margin: 0;
padding: 0;
}
When a selector is added to a CSS declaration block it becomes a ruleset or simply, CSS rule.
Comments
Comments are an important part of every code. Comments are required when we code in HTML, CSS or JavaScript because it helps us to maintain our code. The following are some of the benefits of comments in coding:
- It helps us to understand the purpose of a set of codes at all times.
- It also helps in project collaboration, in which case people in your group can easily read and understand your code
- It helps in code revision and maintenance over time. This makes updating code easy.
- It can also be used when testing code. For example, to disable part of a code, you may add comment to enable the browser skip the codes within the comment box.
To add a comment in HTML, we usually do the following:
<!--This is the beginning of an HTML comment --> To add a comment in CSS, you do the following: /* This is a CSS comment. Everything here is comment and is ignored by the browser */ To add a comment in JavaScript you can use the “//” for single-line comment or /* This is a Multiline JavaScript comment. Everything here is comment and is ignored by the browser */
