Cascading Style Sheet (CSS)

Introduction to CSS

Note: The following tutorial expects readers to have some basic knowledge of HTML. If not, we strongly recommend you refer the HTML course here.

Suppose you have a brilliant startup idea or want to create a website for your business. Chances are time and money are a major concern to the aspiring web developer. Fortunately enough, just by mastering HTML and CSS you can develop amazing websites, saving both time and money, while improving your visitor's experience.

Cascading Style Sheet (www.w3.org/Style/CSS/) offers what web designers have been clamoring for over the years: more control over the layout of your website. 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 align attribute, which provides simple support for text alignment.

<h1 align = "center">BIG CENTERED TEXT!</h1>

Now for those who come solely from an HTML background, knowing what a tag does, the align attribute is somewhat of a win-win situation. However most HTML tags also contain attributes like size, color etc., which are purely presentational.

Consider the <blink> tag. The following markup will cause the text to blink on Mozilla Firefox:

<blink>Firefox is the King of Internet Browsers!</blink>

The problem with using HTML for formatting is that HTML is not very good at it, nor was it designed for it. Fortunately, we have a better way of formatting our webpage – Style Sheets.

Here are 5 reasons why you should consider using CSS to style your website:

  1. Consistency

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

  2. Bandwidth Reduction

    When we write the styling code separately in a CSS file, we leave pure content in the HTML page, thereby reducing its size. When a website is loaded, the CSS file is loaded once and then cached by the browser, and for consecutive requests only the HTML page is requested, hence significantly reducing the bandwisth usage. Your reduced bandwidth needs will result in a faster load 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 more visitors will be able to view your website in the way you intended.

  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 print or for a mobile device.

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 is lagging.

But don't worry! We are here to help you learn the art of styling webpages step by step. Now, before we move on to our first look at CSS, check out the pictures below. With only HTML you can build pretty basic forms, but add a little CSS to it and you have a far better looking webpage at your service!


Introdcution to CSS

Before CSS


Introdcution to CSS

After CSS