What is cascading style sheet (CSS) in HTML

Welcome friends to my blog.

Recall from our last post where we learned about web development part 2, we understood that everything that displays on the web page is using a technology called HTML, a mark-up language that is not a programming language because HTML does not instruct the computer. HTML uses tags to mark up pages. So each tag has a specific task to accomplish.

Learn more about HTML tags on www.w3schools.com

But today’s publication, we are going to learn about CSS, cascading Style Sheets. By the end of this post you will be able to understand CSS, its history and how does it work.

CSS was introduced in 1994 to give beauty to the websites, the designing side of page views.

What is CSS?

By definition, Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a mark-up language. It can control the layout of multiple pages at once by using its external files.

To learn about CSS, let us look at its history.

The Brief History of CSS

It all started in 1994 when CSS was first proposed. At that time there were also other style sheet languages proposed, but the W3C consortium who was working on HTML standard opted for CSS.
Then in 1996, the CSS1 or CSS version one was recommended with the specifications that the web browsers can adopt.
In 1998, the CSS2 was recommended. This version was introduced to deal with issues found in version 1.
2004, W3C introduced the CSS2.1 with great features. But then the introduction of this version was still a recommendation.
Later 2011, CSS2.1 was adopted to be used as the official version for the browsers to be implemented.
After this point, the new level of CSS was in development, the CSS3. This was not the recommendation as earlier versions rather than collections of CSS modules that describe a category of capabilities. They were the result of publications of other CSS3 modules. This brought to emergence by the end of 2011 modules such as CSS3-Selectors, CSS3-Colour, and more other CSS3 modules.
Then in 2012, the CSS3-media-queries module was released.
In 2017 CSS3-UI module was realized as well. The applications followed the modules principles until it reaches level 4.
Reason why in 2017 at the end, new module level-1 was introduced, like CSS3 Flexbox level 1.

It is all to remember that all those versions and modules contain different capabilities and are determined by commissions like W3C. This means they agreed upon capabilities or protocols so that web browsers can implement them.

For all those modules to be used in a web page, it has to be supported or implemented by the browser otherwise, the web page can not display correctly.

To see how those CSS modules or versions are supported by browsers, let us use www.caniuse.com (a website that helps developers to check the capabilities of technologies).

Let us check those some modules of flexbox

Flexbox layout module: this module is supported by most major browsers such as:

Chrome
Firefox
Safari
Edge
Opera

For illustration, look at the picture below.

Green color means supported,
Red means not supported and
Olive means partially supported

Note: when a web page is built using this flexbox layout module, the browser version that does not implement it, will have browser compatibility issues. As seen in the picture, IE (Internet Explorer version 11 and 10 was partially implemented. But version 6 to 9 is not implemented). So when you a developer implements a web page using the flexbox layout module, a user on those browser versions will see their pages break or wrong formated.

2. Flexbox Gap Property: unlike for layout module, Gap property is not implemented much in many browsers.

Look at the picture below as it showed with a lot of red

In Conclusion,

CSS is a style sheet that gives shape and design to our web pages. It tells browsers how to display, how to style or how to layout the content of our pages. For these CSS features to be understandable by the browser we are using, that browser must implement these CSS features, which is why some features are not supported on some browsers, as shown in the images we have provided previously. We also learned the history of CSS, which makes us understand where it came from and how these modules were introduced.

Thanks, friends for taking the time to read my blog. If you found my content helpful please subscribe to be notified when I will realize new content.