What are Cascading Style Sheets (CSS)?

What is CSS?

CSS, short for Cascading Style Sheets, is a type of style sheet language. A style sheet language is a language that determines how a document should be designed. A document in this aspect means any text file or webpage that is written in a markup language like HTML, SVG, etc.

The need for CSS

To make any webpage presentable i.e. to add elements such that it appeals to the user, we use CSS. This can range from placing pictures on webpages, font colors, the background style to as little as the spacing between paragraphs! To do this, CSS uses tags.

How do we use CSS?

It can be incorporated into a webpage in three different ways:

1. Internal Stylesheet:

This format allows you to declare the styles within the HTML file, in the head tag. The stylesheet is defined within the <style></style> tags. The snippet below shows how to do this.

2. External Stylesheet:

This is when an external CSS file is written and attached in the HTML document. This external file is written with a .css extension. The snippet below shows the tag to do this.

3. Inline Stylesheet

This method is slightly more cluttered than the other two where you define the style within the tag that you want to format. The code snippet below shows how to do this.

How is CSS beneficial?

Using a CSS file has many benefits, here are three major ones:

• One CSS file can be used across multiple HTML documents. Hence it becomes more efficient to define styles in one CSS document.

• Defining styles within a CSS file also allows ease of change when it comes to changing the formatting of certain elements. You can simply modify the design details in the CSS sheet and they will be implemented on all objects of that tag.

• Once you use a CSS sheet to define styles, you do not need to render the tag styles for each element again and again. The style tag is loaded once and can be used for all occurrences of the element. Hence, it saves time by loading the page faster!