Basic Syntax of CSS

Every scripting or programming runs on a specific collection of rules. Likewise, CSS has some particular rules that govern how users will have to implement the different CSS concepts. In this chapter, you will learn about the CSS concept and how it benefits its users.

CSS Syntax

It is a standard set of rules with three parts, a selector, a property, and a value. You do not have to create this every time while web designing using CSS. The selectors will be discussed separately in the upcoming chapter. At the fundamental level of CSS, it has two building blocks that define how CSS code will perform:

1. Properties: These are understandable identifiers that point to different stylistic characteristics (such as font, background color, width, etc.) you wish to change.
2. Values: Every particular property is set with a value that tells how you wish to alter those stylistic characteristics within the web page (such as what font size you want, the width of any particular CSS entity, or the background color).

The property and value together as a single pair are called the CSS declaration. These declarations are placed inside CSS declaration Blocks. So, before getting deep into the theory and written explanation, let us go through a basic CSS example:

Example:

h2 {
     font-size: 30px;
     line-height: 36px
}

p {
     padding: 10px 10px 10px 40px
}

p:hover, li {
     text-decoration: underline
}

In the above example, h2 and p are element selectors classes. In "heading 2," the font size is defined as 30 pixels and line-height 36 pixels. And some padding is defined in the "paragraph tag," and it will be underlined on the hover.

CSS Block Declaration

Declarations in CSS are clustered into different blocks, where each declaration is wrapped within opening curly brace "{ " and closing curly brace "}". Semicolons are used where there is a declaration or set of declarations inside another declaration block, or else the code will not work or may give unexpected results. A semicolon is not usually required to terminate the last declaration statement or block. However, it is a good practice to do so to prevent any unknown error.

Comments in CSS

A CSS comment allows its users to write something that is not read as a CSS command but makes others understand how the code is working after a gap or interval of several months. Moreover, these comments can also be valuable for temporarily remarking or noting out certain segments of your CSS code for testing purposes. In CSS, comments are written within /* and */.

Example:

.class_name{ display: block; } /* Eample description */

/* .class_name{ display: block; } */

.class_name{
     display: block; 
     /* color: blue; */
}

White Spaces in CSS

White spaces are special characters that can be an actual space, tab, or newline (carriage return). These whitespaces are used to construct your stylesheets extra readable. Like HTML, browsers usually ignore almost all white space in CSS code, making the code human-readable.