Certainly, you are now on the road to setting up a web page. Probably you have had some knowledge about HTML and now you heard that using CSS will save you time and make your web page look better.

But if the reverse is the case in the sense that you have not had any knowledge of HTML before coming here I will advise you to see our course on HTML before coming to CSS.

This is because CSS is used to style HTML documents and that is the reason I suggest that you must have known about HTML first before studying CSS.

CSS (Cascading Style Sheet)

Cascading Style Sheet (CSS) offers what web designers have been desiring to see over many years by providing developers with more control over the layout of a website.

Though as you might already know, HTML can also be used for formatting content on a webpage. For example, many of the HTML tags support the bold attribute, which provides simple support for bolding the font of a text on a web page.

Example   <b>THIS TEXT IS BOLD<b>.

Looking at the example above, if you have studied HTML you must have known what tags does and how a simple tag will format a text which it encloses.

The problem with using HTML for formatting is that HTML is not very good at it, neither was it designed for it. Fortunately enough the good way of formatting our webpage is by using CSS (Cascading style sheet).

Before we go deep into coding it’s important that you have a quick overview of the advantages of using CSS in formatting a web page.

Here are 5 reasons why CSS is a must use for styling a web page professionally

1.    Uniformity

By making one change to your CSS file, you can change the entire look of your website. The bigger your website, the more time CSS saves you. Also, with CSS, all the styles across your website are uniform.

Quick practice: just click ctr+shift+I on your windows laptop or click command+shift+I on mack to open the browser console.

If you open it try changing or removing any element style or its style value, and immediately you will see how it will reflect on the web page.

2.    Quick website loading

When the CSS file is placed in a separate file, we leave pure content in the HTML page, thereby reducing its size and decreasing the loading time. This is because when a website is loaded, the CSS file is loaded once and then cached by the browser, and then served consecutively upon requests by the HTML page. You don’t have to worry in case if the CSS of another website will be served to your own website because the browser is going to handle the job perfectly.  Hence significantly reducing your website bandwidth usage. Your reduced bandwidth needs will result in faster loading time and could cut your web hosting costs.

3.    Search Engines

CSS is considered a clean coding technique, which means search engines won't have to struggle to read its content. Also, using CSS will leave your website with more content than code – and content is critical to your search engine success.

4.    Browser Compatibility

CSS stylesheets increase your website's adaptability and ensure that visitors will be able to view your website the way you have planned it to look.

This is because every browser knows how to read CSS file easily and server it accordingly

5.    Viewing options

Another common web design concern is the increasing need to make websites available for different media. CSS can help you tackle this challenge by allowing the same markup page to be presented in different viewing styles, for example, you may create a separate stylesheet for desktop, large devices or for a mobile device.

BRIEF HISTORY ABOUT CSS

CSS1 first marked its appearance in 1996 and CSS2 quickly followed it, making some significant improvements. The current version, CSS3 has added many useful features. Newer browsers are far better than older ones in terms of performance and support, but issues still remain. Browser bugs still exist, developer education and uptake are lagging.

In our next tutorial on CSS we will be looking into the basis of coding or CSS file and from there you can write your first hello world in CSS :).