18 Parts of CSS – HTML and CSS Tutorial for beginners

In this post let us look at the various parts of CSS.

Last updated on February 27th, 2017 at 07:00 pm

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;
}

 

Join the FULL HTML and CSS Tutorial Here >>

 

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:

 

Join the FULL HTML and CSS Tutorial Here >>

 

 

 

 

The following two tabs change content below.
Just a geek who loves Trance . Be yourself everywhere you go. And Be yourself in everything you do. Cheers !

Comment Here