Types of CSS
CSS (Cascading Style Sheet) describes the HTML elements which are displayed on screen, paper, or in other media. It saves a lot of time. It controls the layout of multiple web pages at one time. It sets the font-size, font-family, color, background color on the page.
It allows us to add effects or animations to the website. We use CSS to display animations like buttons, effects, loaders or spinners, and also animated backgrounds.
Without using CSS, the website will not look attractive. There are 3 types of CSS which are below:
1. Internal CSS
The Internal CSS has <style> tag in the <head> section of the HTML document. This CSS style is an effective way to style single pages. Using the CSS style for multiple web pages is time-consuming because we require placing the style on each web page.
We can use the internal CSS by using the following steps:
1. Firstly, open the HTML page and locate the <head>
2. Put the following code after the <head>
3. Add the rules of CSS in the new line.
4. Close the style tag.
After adding the internal CSS, the complete HTML file looks like the following:
We can also use the selectors (class and ID) in the style sheet.
Pros of Internal CSS
Cons of Internal CSS:
2. External CSS
In external CSS, we link the web pages to the external .css file. It is created by text editor. The CSS is more efficient method for styling a website. By editing the .css file, we can change the whole site at once.
To use the external CSS, follow the steps, given below:
1. Create a new .css file with text editor, and add Cascading Style Sheet rules too.
2. Add a reference to the external .cssfile right after <title> tag in the <head> section of HTML sheet:
Pros of External CSS:
Cons of External CSS:
3. Inline CSS
Inline CSS is used to style a specific HTML element. Add a style attribute to each HTML tag without using the selectors. Managing a website may difficult if we use only inline CSS. However, Inline CSS in HTML is useful in some situations. We have not access the CSS files or to apply styles to element.
Pros of inline CSS:
Cons of inline CSS: