CSS Syntax

A CSS code or document is basically a set of style rules. We apply these CSS Rules for the formatting of HTML Page.

For example, we can change the size of text or background color of HTML web page using CSS.

Basic CSS Syntax

Each CSS rule made up of Selector part and Declaration part. Declaration part is a combination of CSS Property and Value. To write a CSS Rule, we start with a "selector", and then have a bracket {} containing a sequence of declarations.

The basic CSS Syntax is defined as:

selector { property : value; }


Description of CSS Syntax

  • Selector:

    We place HTML tag name here. You can specify which tag you want to style, for example: "body", "h1", "div", and "p".

  • Property:

    A property is a type of attribute (like a feature) of HTML tag. An example of HTML property are: color, font-size & border.

  • Value:

    Each property has a set of value. We can specify that value here. For example, “color” attribute value will be color name: "red" or "green".


CSS Syntax Example:

Let us have a CSS rule to set all text color red inside paragraph tag.

p {
color: red;
}

Complete CSS Example in HTML Program:

Now, we will see a complete example of using CSS Rules in HTML Document.

You can define Different CSS rules for multiple tags in the same documents. Each CSS Rule declaration block can contain one or more declarations separated by semicolons.

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: green;
}

p {
    color: yellow;
    font-size: 25px;
}
</style>
</head>
<body>

<p> This is a Sample text inside p tag. Welcome to Tutorials Class. </p>

</body>
</html>

In the above example, we have created a CSS rule that defines all text inside the paragraph tag will have font-size 25px and text color will be red. There is another CSS Rule that will set the HTML Page body’s background color green.


We have used a paragraph (p) element as a selector to select an HTML Element. This is called Element Selector. There are many other CSS Selectors available such as class Selector and id Selector.


Congratulations! Chapter Finished. Learn more about the similar topics:
Exercises & Assignments
No Content Found.
Interview Questions & Answers
No Content Found.