Introduction to CSS

If you want to become a Web developer you must know CSS. CSS or Cascading stylesheets are used to style any webpage and make it look beautiful, structured, and responsive. CSS is used alongside HTML to build a website. Using CSS you can style each and every HTML tag to make it visually appealing.

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

Cascading Style Sheet (www.w3.org/Style/CSS/) offers web developers more control over the layout of your website. HTML provides basic tags to define proper formatting of information but to structure the layout, and make it useable on different screen sizes is something only CSS can do.

If you want to learn CSS - from start to end, covering all the CSS properties and examples, you should check out our FREE CSS course to become a master of CSS.

What is CSS?

If you are confused and unable to understand what exactly is CSS, why use CSS, what purpose it fulfills, and where CSS fits in Web development, then watch this video and you should watch this video till the end.

Why use CSS?

Here are 5 main reasons (apart from 100 other 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 of 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 bandwidth 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 screen sizes. 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 a desktop or for a mobile device.

The history of CSS

CSS1 first marked its appearance in 1996 and CSS2 quickly followed it, making some significant improvements. The current version of CSS3 has added many useful features like flexbox, grid, animation, transition, etc. making it super easy to create amazing webpages using simple CSS properties.

Newer browsers are also far better than older ones in terms of performance and support, but issues still remain. Many browsers are still incompatible with the latest CSS properties so you should check for CSS properties compatibility before using it.

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

Before CSS

After CSS

Before CSS

After CSS