Unlike HTML, CSS is not a programming language. It is not a marking language, it is a stylization language. This means it allows you to apply styles to elements in HTML documents selectively.
For example, to select all the paragraph elements in an HTML page and convert the text inside them into red, you will write this CSS code:
p {
color: red;
}
Let’s try: Insert these three lines of CSS into a new file in your text editor, and then save the file as style.css in your styles directory.
But you still need to apply the CSS code in your HTML document. Otherwise, the CSS style will not change the way your browser displays the HTML document.
1. Open the index.html file and insert the following line somewhere in the head element (ie between the <head> and </head> tags): <link href = “styles / style.css” rel = “stylesheet” type = “text / css “>
2. Save the index.html file and upload it to your browser.
Anatomy of a set of CSS rules
p {
color: red;
}
Let’s look in more detail at the CSS line above:
The whole structure is called a set of rules (but is often abbreviated “rule”).
Also, note the names of the individual parts:
– Selector
The name of the HTML element at the beginning of the ruleset. It selects the element (s) to be stylized (in this case, the p elements). To stylize a different element, change the selector.
– The statement
A single rule such as color: red, which specifies which of the properties of the element will be stylized.
– Properties
Ways you can style a given HTML element. (In this case, color a property of the <p> elements.) In CSS, you choose the properties that you want to modify using your rule.
– Property value
To the right of the property, after two points, you have the value of the property, which chooses one of the many possibilities for a particular property (there are several values of the color property outside the network).
Note the other important parts of the syntax:
– Each set of rules (except the selector) must be inside the braces ({}).
– Within each declaration, you must use two points (:) to separate the property from its values.
– Within each set of rules, you must use a semicolon (;) to separate each statement from the next.
To change multiple property values at once, you just need to separate them using a semicolon, as follows:
p {
color: red;
width: 500px;
border: 1px solid black;
}
Selecting multiple items
You can also select multiple types of elements and apply a single set of rules. It includes several comma-separated selectors. E.g.:
p, li, h1 {
color: red;
}
Different types of selectors
There are several different types of selectors. Above, you only looked at item selectors, which select all items of a particular type in the given HTML documents. But you can make more specific selections than that.
1. Element selector (sometimes called tag or type selector) selects all HTML elements of the specified type.
2. Selector Identifier (id) selects the item on the page with the specified ID (in an HTML page, only one item per ID is allowed)
3. The class selector selects the elements on the page with the specified class (there may be several class instances on a page).
4. The attribute selector selects the item (s) on the page with the specified attribute.
5. The pseudo-class selector selects the specified element (s), but only in the specified situation.