The design is the heart of any website since it greatly impacts a website’s performance and loading speed. Having a good website design drives more traffic and improves search engine rankings. The modern web development process highly relies on CSS to make a website attractive.
CSS is a style sheet language that manages the layout and presentation of websites. It allows developers to style the elements and make a website interactive. This article will help you become familiar with CSS, its properties, and its different types. Moreover, the pros and cons of each type of CSS are also mentioned. So, let us begin.
What is CSS?
CSS stands for Cascading Style Sheets, and it is a style sheet language that describes the appearance of a document scripted in a markup language, such as HTML, SVG, and XUL. Alternatively, we can define CSS as a language used for specifying how documents or web pages are styled.
Along with JavaScript and HTML, CSS is one of the most fundamental technologies of the World Wide Web (WWW). It manages the appearance of a web page. With CSS, we can control the font style, the text color, background color and images, layout designs, spacing between paragraphs, and element display style.
CSS enables separating a document’s content and presentation. It is independent of HTML, and we can use CSS with any of the XML-based markup languages.
Hakon Wium Lie proposed CSS in 1994. While many other sheet-style languages were being developed at the same time, CSS became the first W3C (World Wide Web Consortium) recommendation, and CSS1 was released in 1996.
Types of CSS
There are three types of CSS, namely inline CSS, internal CSS, and external CSS. All three types of CSS serve the same purpose of styling HTML code, but they do it differently. Let us have a detailed discussion about each type of CSS with an example.
1. Inline CSS
The inline CSS enables styling a particular HTML element . It does not use selectors; instead, we need to add the style attribute to each HTML tag that requires styling. In general, inline CSS is not recommended since it requires every HTML tag to be styled separately. Thus, it becomes pretty challenging to maintain websites by using only the inline CSS. The two scenarios where inline CSS is useful are:
- When we need to apply the CSS style to a single element.
- When there is no access to CSS files of a web page.
The inline CSS is ideal when we need to employ quick fixes and preview changes made to a website or web page.
Example: Here is an example of inline CSS.
<!DOCTYPE html>
<html>
<body>
<h1 style="color: orange;">Welcome to TeckGeekBuzz!</h1>
<p style="color: black;">Step up and begin your game and if you are already on the journey, and enter the league of Tech Pros!</p>
</body>
</html>
In the above code, we have added the CSS code for displaying the text of <h1> in orange color. Also, we have inserted the CSS code for setting the text of <p> to black color. The output of the above code will be:
Pros of Inline CSS
- We can instantly insert CSS code into any HTML file.
- There is no need to create and upload a different file to add CSS code.
Cons of Inline CSS
- It is time-consuming since we need to insert the CSS code to each HTML tag for styling.
- Using the inline CSS for every HTML tag may result in a more complex HTML structure.
- The page size and download speed of a web page may get affected if we style multiple HTML elements.
2. Internal or Embedded CSS
Unlike inline CSS, internal or embedded CSS is used to style a single HTML page. We need to add the style attribute in the <head> section of a specific HTML page that requires styling. However, it is not ideal for styling multiple web pages as we need to add the style attribute on every web page.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color: purple;}
p {color: green;}
</style>
</head>
<body>
<h1>Welcome to TechGeekBuzz!</h1>
<p>Step up and begin your game and if you are already on the journey, and enter the league of Tech Pros! Read tutorials, try examples, learn to code. Do whatever it takes to lead the tech world in this era!
</p>
</body>
</html>
In the above code, we have inserted the CSS code for styling <h1> and <p> in the <head> section. The output of the above code will be:
Pros of Internal CSS
- We can use class ID and selectors in the internal CSS.
- There is no need to upload multiple files since we add the CSS code to the same HTML file of a particular web page.
Cons of Internal CSS
- The internal CSS is not a good option to style multiple web pages since we need to add the same CSS code to every web page.
3. External CSS
In external CSS, the CSS code is written externally in a file having the ‘.css’ extension. A CSS file needs to be linked to a specific web page that requires styling. It is important to notice that the external CSS makes it possible to keep the HTML and CSS code of a web page separated from each other. External CSS is the most effective way to style the complete website.
Every minor and major change to a website’s appearance can be made easily from the external .css file linked to the different HTML documents of a website. Also, there are various CSS editors that can make it easy for you to edit CSS files and manage all the files of a web development project .
Example: HTML Document
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="changes.css">
</head>
<body>
<h1>Welcome to TechGeekBuzz!</h1>
<p>Read tutorials, try examples, learn to code. Do whatever it takes to lead the tech world in this era!</p>
</body>
</html>
Below is the CSS code in the external CSS file having the name, changes.css:
h1 {
color: grey;
}
p {
color: red;
}
We have linked the above changes.css file in the HTML document using the href tag. The output will be:
Pros of External CSS
- We can style multiple web pages using a single CSS file.
- As we write the CSS code in a file other than the one containing the HTML code, the size of the HTML file remains small. Also, it becomes easier to organize the HTML code.
Cons of External CSS
- Using multiple external CSS files can affect a website’s performance.
Can We Use All Three CSS Styles on a Single Web Page?
Yes, we can use all three types of CSS, namely inline, internal, and external, in one web page. But the inline CSS will override internal and external CSS styles. There is a particular order for these three CSS styles in which they affect the HTML code: inline CSS > internal CSS > external CSS When we use internal and external styles together on a single web page, the internal CSS style will override the external CSS code.
Conclusion
All three CSS styles serve the same purpose of styling HTML code but in different ways. The inline CSS is ideal for styling a single HTML element while the internal CSS is a great option to choose if we need to style the entire web page. Also, when it comes to external CSS, it is an ideal choice if you want to style the whole website from a unified location. Each of these CSS types has its own pros and cons. Thus, you can choose one that best suits your requirements.
The design is the heart of any website since it greatly impacts a website’s performance and loading speed. Having a good website design drives more traffic and improves search engine rankings.
People are also reading:
Leave a Comment on this Post