CSS Syntax

Writing CSS is pretty straightforward once you get the hang of it and can prove to be quite helpful in styling your web pages.

All CSS codes follow certain universal fundamentals.

The basic CSS structure always has three essential components which are:

  1. Selector
  2. Property
  3. Value

 

1. What is a selector in CSS?

Selectors are essential in deciding which an element you want to style.

They are an essential part of the CSS rule set.

For instance, if you have a paragraph tag <p> that needs to be restyled, you will use the p selector to do so.

In this example, p is the selector:

p {color: blue}

 

2. What is the property in CSS?

The property can be defined as a sub-element of selectors.

They are used to adjust the styling of an HTML element.

For instance, if you wish to adjust the color of a paragraph tag <p> to blue, the property is what will help you do that.

In this example, color is the property:

p {color: blue}

 

What is the value in CSS?

The value defines what you wish the end state for the style to be.

For instance, if you describe the selector as the color property, the value can be any color.

In this example, the value is blue:

p {color: blue}

This the final piece that will convert your <p> paragraph to blue.

When you put all three of the components, the declaration will look like this:

p {color: blue}

It is important to maintain the order in which things are written.

 

Adjusting Multiple Properties

You can alter many different properties at the same time using code like this, giving all of your properties and their values within the parentheses brackets and by adding a semicolon after each value.

Example:

p {
color: blue;
font-weight: bold;
}

You can assign CSS styles to any of the body tags.

As you may have noticed, if we use the above style, ALL of our paragraphs will be blue and bold.

In the coming pages, we’ll also show you how to style individual paragraphs so that your entire page isn’t blue and bold 🙂