18 Parts of CSS – HTML and CSS Tutorial for beginners

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.


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;


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:

Comment Here