tutorialstonight logo

CSS INTRODUCTION


What is CSS?

CSS which is an acronym for Cascading Style Sheets is used to style webpages, create webpage animations, create shapes and to make the webpage responsive to different device sizes.

CSS is a design language using which you can style and design the look of your webpage. CSS has an old history and the current version of CSS is CSS3.

The latest version of CSS (CSS3) is a combination of the old version + some new specification like a media query, namespace, selector, etc.

CSS works with HTML files so before learning CSS you must be knowing HTML.

CSS let you embed its code directly in an HTML file and even write code independently in another document and then link it to your HTML file.

Here is an example showing how a simple webpage can be styled to look beautiful using CSS.

This is HTML code for the webpage without any CSS.

Output:

html without css

Now adding CSS see how the look of webpage chaged.

Output:

html without css

You can see how CSS code changes the look of the webpage. Well, this is just a glimpse of what CSS can do, you will be able to do even more after you learn it.

Note: If you don't understand CSS code currently than don't bother we will look at all properties in detail in the coming sections.


What CSS can do?

HTML was designed only for describing the content of the web page not for formatting it.

When formatting tags like <font> and attributes like color was introduced in HTML 3.2 then it becomes a nightmare for web developers to manage large websites. They had to place font and color information on every page and that looked so overwhelming.

To solve this problem, the World Wide Web Consortium (W3C) create CSS, which was able to design websites more beautiful and clean. It removed the style formatting from the HTML page.

Here is a list of few things that CSS can do:

  • Changing font properties, like size, color, weight etc
  • Adding color to text elements

  • Adding color to text elements adding background properties like, color image etc to any HTML element
  • Creating different shapes
  • Adding margin and padding to the elements
  • Designing layouts
  • Creating effects like animation, hover etc


Why you should learn CSS?

If you want to become a web developer then CSS is among the 3 languages (HTML, CSS, JavaScript) that you must learn.

Here are some key points why you should learn CSS:

  • Web development: CSS is a must-learn language for web development
  • Unique design: Using CSS you will be able to design unique looking websites
  • Access over elements: CSS gives you access to almost each element that is visible on the screen
  • Control: You can style any element according to your wish
  • Adding effects: CSS can add effects on webpages that looks fabulous
  • Create animations: Using CSS you can create animations like moving objects or shapes
  • Responsive websites: Learning CSS will let you design responsive websites that fit to any device sizes
  • Learning frameworks: If you learn and understand CSS than you be able to learn and work on many CSS based frameworks like Bootstrap


History of CSS

CSS first proposed on 10th Oct 1994 by Håckon Wieum Lie. In that year Microsoft's Internet Explorer 3 was released with very limited support of CSS.

In those days browsers were unable to add complete CSS and also had bugs. It took more than 3 years when any browser reached full implementation of CSS.

CSS has multiple versions and each version is built upon the previous version, typically adding new features. Newer versions are a subset of one or more levels of CSS build for a particular device and user interface.

  • CSS 1 - First CSS specification was published on 17th Dec 1996.
  • CSS 2 - Developed by W3C and published in May 1998.
  • CSS 2.1 - CSS level 2 revision 1, W3C published it on 7th June 1998.
  • CSS 3 - Earliest draft of CSS3 was published in June 1999.

Advantages of CSS

CSS provides powerful control over HTML documents. It is also easy to learn and understand.

There are a lot of advantages of learning CSS:

  • Easy to maintain - If you want to change any kind of styling just go to styling, change and all your elements will adjust according to the new change.
  • Handle multiple webpages: CSS saves lots of time when used externally because it can control multiple page layout at once.
  • Faster page loading - Before CSS tags like color, border, size, font etc were repeated many times which led to slower loading. But by using CSS we need to mention property and value just once.
  • High Control - We can control the style of the whole website using a single CSS page. Change just once here and the whole website shows your changes.
  • Multiple devices friendly - Using CSS we can create pages that can adjust their decorations according to the device.

Here is a working example of HTML + CSS.


points to remember Points to remember:
  1. CSS stands for Cascading Style Sheet.
  2. CSS is used to style webpage, create animation and effects.
  3. CSS can be added directly to HTML file or can be added another externall CSS file to HTML.