### Understanding the Different Types of CSS

Cascading Style Sheets (CSS) is a commonly used tool for styling web pages. With CSS, we can transform a simple web page into an attractively designed one. Understanding the different types of CSS is essential for creating well-designed web pages. This discussion will cover the basics of CSS concepts such as Selectors, Declarations, Classes, and IDs, along with an introduction to the three main types of CSS: Inline CSS, Internal CSS, and External CSS. We will also provide a detailed explanation of each type of CSS.

Understanding CSS

CSS stands for Cascading Style Sheets and is used for styling web pages designed with HTML. Websites without CSS appear plain. CSS adds aesthetic changes such as font style, size, color, animations, and borders to images and improves the alignment of content. Inline CSS is one type of CSS code shown in the example.

Simplified Introduction to CSS

CSS is a blend of selectors and declarations. But what do these terms mean?

Selectors identify which element(s) on a webpage the following declarations will affect. Declarations define the visual presentation of those element(s), including properties like color, font size, and layout.

CSS SELECTORS AND DECLARATIONS

In CSS, selectors identify the HTML tags that we want to style while declarations are a combination of properties and their values. For example, consider the code:

Hello World

Here, “h1” is the selector and “color: blueviolet; font-family: ‘Segoe UI’,Tahoma,Geneva,Verdana,sans-serif” is a declaration, consisting of properties and their values such as “color” and “font-family”.

Besides normal HTML tags, selectors in CSS can also be classes and IDs. Let us learn more about them in CSS.Classes in CSS

In CSS, we can assign classes to elements or groups of elements to identify them as selectors. For example, to change the color of headings to blue, we can assign a custom class name like “blueHeadings” to all relevant HTML heading tags. It’s important to choose related names for better code understanding and readability.

Below is an example code for a webpage with headings without any CSS styling:

[code]
Now, let’s apply a CSS class to all headings to change their color to blue:

[code]

With this CSS styling, all headings with the “blueHeadings” class will have a blue color. This method of writing CSS inside the HTML file using the style tag is called Internal CSS. We’ll discuss this in detail later. Now, let’s move to the meaning of a CSS ID.Applying ID in CSS

In CSS, we can assign a unique ID to an HTML element to make changes to a specific tag. Unlike a class, an ID is unique, and no two elements can have the same ID.

For example, if we want to change the color of a specific h1 tag, we can assign it a unique ID and apply the style to that ID.

Here is an example HTML code where we assign an ID to the third h1 tag to change its color:

Code:

“`

I am H1.

I am also H1.

Me too.

Hey man, me too.

“`

Screenshot:


“`
#blue {
color: blue;
}
“`

CSS Variants

CSS has three different types of style sheets:

• Cascading Style Sheets (CSS)
• Inline Style Sheets
• Internal Style Sheets

Inline CSS

Inline CSS is CSS that is written within an HTML tag. For example, to change the color of a heading to red, we can use inline CSS as follows:


<h1 style="color: red">I am a heading</h1>


However, inline CSS has a disadvantage of not separating content from design, which goes against the principles of HTML and CSS. It also makes code more difficult to read and write. Therefore, it is best to avoid using inline CSS for cleaner and more maintainable code.

Internal CSS

Internal CSS eliminates the need for a separate file for CSS but separates it from HTML tags. It is a hybrid between inline and external CSS. The CSS code is written inside the head section of the HTML webpage between the style tags. For example, we can change the color of a heading to red using internal CSS with the following code:

Code:
“`

    

IQCode

“`

However, Internal CSS still requires CSS and HTML to be in the same file, which hinders the separation of concerns between the presentation and content layers.

External CSS

The external CSS file is used to separate the styling concerns from HTML. This is achieved by writing the CSS code in a separate .css file and linking it to the HTML file using the tag. Here’s how you can link an external CSS file to your HTML file, based on their directory structure:

– If the HTML and CSS files are in separate directories: Use the href attribute of the tag to provide the path of the CSS file.
– If the HTML and CSS files are in the same directory: Use only the name of the .css file in the href attribute.

To color the heading “IQCode” in red, follow these code examples:

HTML Code:

IQCode

CSS Code:

h1 {
color: red;
}

In the above code, the CSS file “style.css” is linked to the HTML file. Based on their directory structure, only the name of the file is used in the href attribute.

These are the three types of CSS and the methods to use them.

Conclusion: Understanding the Three Types of CSS and Why External CSS is the Preferred Choice

In summary, External CSS is the most commonly used type due to its separation of concerns benefits, which means that design and styling are kept separate from coding. This makes the CSS code easy to write, neat, and separates it from HTML tags, avoiding any confusion. It is recommended to use External CSS for these reasons.

ADDITIONAL RESOURCES

Additional resources for learning CSS and HTML:

• CSS Interview Questions
• CSS Multiple Choice Questions
• HTML/CSS Books
• Difference between CSS and CSS3
• Difference between HTML and CSS

Make use of these resources to improve your CSS and HTML skills!