Basic Syntax of CSS

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

Table of Contents

1. CSS Syntax
2. CSS Block Declaration
3. Comments in CSS
4. White Spaces in CSS

CSS Syntax

It is a standard set of rules with three parts, a selector, a property, and a value. You do not have to recall this every time to code your web designing thing using CSS. Selectors will be discussed separately in the upcoming chapter. At the fundamental level of CSS, it has the 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 for 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 class. 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. For the last declaration statement or block, a semi-colon is not usually required for termination. Though, it is a good practice to do so for preventing any unknown error.

Comments in CSS

A CSS comment allows its users to write something that is not read as a command of CSS but makes others understand how the code is working after having 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 that of HTML, the browser usually ignores almost all of the whitespaces within your CSS code; and is meant to make the code human-readable.