1. Introduction to CSS Syntax
The present topic in this CSS tutorial series is CSS syntax. The syntax is the method to write the code according to the rules and SOPs in any language. The principal focus of this tutorial is to confer the thorough understanding about what is the syntax of CSS, how to write CSS declarations, the fundamental properties of CSS syntax, and the types of CSS selectors. Therefore, let's dive into these sections of the tutorial to extract the information.
1.1. What is CSS Syntax?
Firstly, any web-page is made up of HTML elements that systematically link to form a web-page. These elements are the building blocks that outline each section of the web-page. Also, the HTML elements complete their job after defining the page sections. Further, to extend the aesthetics and presentation of that web-page, CSS comes along and apply styling to each section by selecting these HTML elements one by one. CSS does this with the help of CSS selectors. Importantly, these CSS selectors have the authority to select any HTML element on the screen and modify its properties. Also, these CSS selectors are a key component of the CSS syntax. A CSS style sheet can have infinite CSS selectors. Further, these CSS selectors can have single to many CSS declarations. let's look at what is a CSS declaration?
1.2. What is a CSS Declaration?
A CSS declaration is the combination of a property and a value. A CSS declaration is part of the CSS code block. There are single to many declarations in any code block. Following the basic syntax of CSS or CSS declaration.
{ property: value; property: value; .... }
2. Basics or Rules of CSS Syntax
Moving on to the next segment of this tutorial is to learn some basics or set of rules. These are important and will guide a developer on how to define and declare the CSS code blocks properly. The above illustration of syntax depicts that there are three terms in a CSS code block, which include selector, property, and value. Let's move on to find out the set of rules for these three terms.
2.1. Rules To Propelry Understand CSS Syntax
- Selector: It selects the HTML element or elements
- Property: It selects the specific feature of HTML element
- Value: This term will apply some definitions to the selected property
- A property and a value combine to form a declaration
- Each selector can have multiple declarations
- Importantly, all the declarations must end with a semi-colon (;)
- Further, there is a colon (:) between a property and a value
- Furthermore, different declarations separate from each other with a semi-colon (;)
- Also, all the declarations for a single selector must come within the curly braces {....}
- Moreover, W3C is responsible for CSS recommendations
2.2. CSS Declaration Example
The following example illuminates all the aspects of syntax and its members like selectors, declarations, property, value.
Example
The HTML paragraph element is selected in the below declaration by element selector p. It selects all the paragraphs on the screen and then applies the enclosed declarations which are the text formatting properties.
p{
font-size: 15px;
color: red;
font-family: 'Roboto', sans-serif;
}
3. Types of CSS Selectors
Finally, this section lists the types of CSS selectors. There are certain types of selectors to select the markup blocks on the screen and then to define them. Below is the overview of these selectors, however, there is an ultimate guide about these selectors in the next CSS selectors tutorial.
- The name of HTML element or element selectors
- The specific ID for an element or id selectors
- Class Name as CSS class selectors
- Attribute name as CSS attribute selectors
- Some Pseudo element selectors
- Some Pseudo class selectors
- And some other CSS Combinators