The syntax of CSS comprises of a selector and declaration block and the declaration block contains the properties and their values. As shown in the given example
In this example “h1” is a selector, “text-align” is a property, and “right” is the value of the mentioned property.
Just like HTML has tags same as CSS has selectors, which are used to access the HTML elements and style them internally or using an external CSS file. These selectors are used to apply the specific CSS properties on selected HTML elements.
An element can be selected using elements name, id, and class name. For example, to access an element with the class name, put a dot (.) before the class name as shown in the given example.
According to the above example, HTML elements with “center” class will be right-aligned and has green color.
How to implement CSS on HTML?
There are three ways for the implementation of CSS on an HTML file:
- internal and
Inline CSS Styling
In inline styling, CSS properties are fixed within the HTML tags by using the style attribute such as shown in the given example.
The given style property makes the specific paragraph green. By using the inline CSS styling you can only apply this styling on specific elements.
However, this inline CSS styling is not recommended because it increases the complexity of code.
Internal CSS Styling
The internal CSS stylingcan be applied on whole web page because it is embedded into head section on an HTML page with a <style> element and we can simply access any elelmtn using CSS selectors. As shown in the given example.
External CSS Styling
In external CSS styling, a sperate CSS file is created with the extension of .css that linked with the HTML file by adding its link in head section. Multiple HTML pages can be use this external file at the same time. An example of external CSS style file is given below.
Comments in CSS
In every programming language comments are not displayed on browser however, they can help to elaborate and understand the code at the time of editing.
In CSS a comment is write between these signs ( /* and */ ). Pattern of a comment is also shown in the given example:
CSS stands for cascading style sheets and it is used to design HTML-based web pages. By using CSS styling, the designing of a page including layouts, colors, font size, and much more things can be done. In this post the introduction of CSS, syntax of CSS, working of CSS with HTML files and how to write comments in CSS is explained with the help of examples.