Last updated on October 31st, 2020 at 07:52 am.
18 Parts of CSS
In this post let us look at the various parts of CSS. We are going to do this by analyzing the sample CSS code below:
body { background-color: #fff; color: #000; }
Explanation of the code
In the above styles, the first part (background-color: #fff;) will make the background color of the body/page white.
The second part (color: #000;) will make the color of the text on the page , black.
You will learn more about all these later. Or you may go ahead and watch the full HTML and CSS tutorial here.
Rule
The full style block is a rule.
body { background-color: #fff; color: #000; }
Style Declaration
Style declaration is the actual styles that affect a CSS element (called selector)
From our example above it will be:
/** * This is a comment */ background-color: #fff; color: #000;
Selector
Selects what needs to be styled. It may be a class, an identity (id) or a HTML tag .
From our example the selector is body .
You will learn about selectors later on. You will see how to combine different selectors.
Property and value
Property refers to the first part of the style element .
From our example above, examples are :
- background-color
- color
The value refers to the second part of a style element.
From our example above, examples are :
- #fff
- #000
They form the property value pairs. And they must be terminated by a semicolon ( ; ) as shown in the examples above. The value and the property are separated by a colon ( : )
background-color: #fff ;
You will learn more about all these . You will learn about CSS selectors in details, where we’ll talk about different types of selectors. You will learn how to use compound selectors to dig down into your HTML elements, you will also learn about pseudo selectors and so much more.
To learn more about HTML and CSS right away, click on the button below: