In front-end development, we have three major tools use HTML, CSS, and JavaScript. HTML gives a structure to a web page, CSS colors, and styles that web page, and JavaScript puts some logic on that web page. Before the introduction of CSS, web pages were like the black-and-white text on the internet. CSS provides styling and adds color to those web pages.
Here in this article, we have provided a simple explanation of what CSS is and why we use it.
What is CSS?
CSS stands for Cascading Style Sheets which is used to style different web pages, which includes design, layout, and variations in the display. It was developed by W3C (World Wide Web Consortium) to solve the problem with HTML individual line styling. Everything that we see on a web page with color and layout is because of CSS and its Framework.
Now more than using a direct CSS code, we use its frameworks because they are able to adjust the web page layout and design according to the devise size. With regular updates, CSS has gained a lot in past years. Instead of calling it CSS, developers prefer it CSS4, and it contains many updates and new terms.
Type of CSS?
CSS is divided into three types on the basis of how it is introduced in an HTML file.
- Inline CSS
- Internal or Embedded CSS
- External CSS
Inline CSS:
In Inline CSS, the CSS property is directly assigned along with the HTML tag using the style attribute.
Inline CSS syntax:
<p style = "color:#001200; font-size:40px; text-align:left;"> Techgeekbuzz </p>
Internal or Embedded CSS:
In Internal or Embedded CSS, the HTML file itself contains a unique and single style tag. The style tag in an HTML tag can affect all tags inside that HTML file.
Internal or Embedded CSS Syntax:
<!DOCTYPE html> <html> <head> <title>Internal CSS</title> <style> </style> </head> <body> </body> </html>
External CSS:
In External CSS we create a separate CSS file using .css extension. To link the external CSS file in our HTML page we use the HTML <link> tag.
External CSS extension:
<link rel="stylesheet" href="tech.css"/>
Why use CSS?
The only reason to use CSS is to provide a proper interface and layout to the skeleton-looking HTML pages. With some new updates, CSS is able to perform some of the JavaScript tasks. Even before the introduction of CSS, HTML tags possessed some styling tools. The only problem was developers had to visit each tag in order to provide the styling to that particular tag.
Syntax of pre-CSS HTML:
<h1><font color="blue"> Heading 1 </font></h1>
CSS Peculiarities
Here are some major features of CSS:
- HTML Individual line Problem: Before, CSS developers had to visit every single line in order to style that particular tag. This was so time-consuming and tedious.
- Save Time: CSS saves a lot of time. We can style all the similar tags of an HTML page by using a single style tag.
- Load page fast: With the introduction of CSS, it replaces the HTML tag individual styling and reduces the number of style attributes associated with each tag. This makes the web load an HTML file much faster.
- Device compatibility: Now, CSS and its frameworks use to style HTML pages. It adjusts the page layout according to the device size.
Conclusion
CSS is one of the three core technologies of the World Wide Web (WWW). The primary purpose of CSS is to separate the presentation and content of documents written in a markup language, such as HTML. Also, while HTML provides the structure to a web page, CSS styles HTML elements and makes them visually appealing.
Hopefully, this blog post has helped you to develop a better understanding of CSS and the different types of CSS . If you have any queries regarding this topic, feel free to post them in the comments section below.
People are also reading:
Leave a Comment on this Post