18 Parts of CSS – HTML and CSS Tutorial for beginners

Last updated on October 31st, 2020 at 07:52 am.

18 Parts of css - HTML and CSS Tutorial

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:

Comment Here

Need WordPress help? Linux Server help? Talk to us.

  • We are your own WordPress customer service.
  • We set up Linux servers and install or migrate WordPress. Learn more here.
  • We support WooCommerce too.
  • Check out our WordPress customer support plans here or contact us below .

If you have any questions regarding WordPress support, Linux server support or any of our services, feel free to reach out or read more on our services page.

Join this free course:

How to host multiple WordPress
websites on a VPS

Close me!