Introduction



Introduction: 

Cascading Style Sheets, fondly referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page. It describes how a webpage should look: it prescribes colors, fonts, spacing, and much more. In short, you can make your website look however you want. CSS lets developers and designers define how it behaves, including how elements are positioned in the browser. 

while html uses tags, css uses rulesets.
CSS is easy to learn and understand, but it provides powerful control over the presentation of an HTML document.

WHY CSS? 

  • CSS saves time: You can write CSS once and reuse the same sheet in multiple HTML pages.
  • Easy Maintenance: To make a global change simply change the style, and all elements in all the webpages will be updated automatically.
  • Search Engines: CSS is considered a clean coding technique, which means search engines won’t have to struggle to “read” its content.
  • Superior styles to HTML: CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes.
  • Offline Browsing: CSS can store web applications locally with the help of an offline cache. Using this we can view offline websites.

Advantages of CSS

  • CSS saves time − You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many Web pages as you want.

  • Pages load faster − If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means faster download times.

  • Easy maintenance − To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.

  • Superior styles to HTML − CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes.

  • Multiple Device Compatibility − Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cell phones or for printing.

  • Global web standards − Now HTML attributes are being deprecated and it is being recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible to future browsers.

Who Creates and Maintains CSS?

CSS is created and maintained through a group of people within the W3C called the CSS Working Group. The CSS Working Group creates documents called specifications. When a specification has been discussed and officially ratified by the W3C members, it becomes a recommendation.

These ratified specifications are called recommendations because the W3C has no control over the actual implementation of the language. Independent companies and organizations create that software.

NOTE − The World Wide Web Consortium, or W3C is a group that makes recommendations about how the Internet works and how it should evolve.

CSS Versions

Cascading Style Sheets level 1 (CSS1) came out of W3C as a recommendation in December 1996. This version describes the CSS language as well as a simple visual formatting model for all the HTML tags.

CSS2 became a W3C recommendation in May 1998 and builds on CSS1. This version adds support for media-specific style sheets e.g. printers and aural devices, downloadable fonts, element positioning and tables.


CSS Syntax:
A CSS comprises style rules that are interpreted by the browser and then applied to the corresponding elements in your document.
A style rule set consists of a selector and declaration block.

Selector -- h1
Declaration -- {color:blue;font size:12px;}
  • The selector points to the HTML element you want to style.
  • The declaration block contains one or more declarations separated by semicolons.
  • Each declaration includes a CSS property name and a value, separated by a colon.
    For Example:
    –; color is property and blue is value.
    –; font-size is property and 12px is value.
  • A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

Example : 
In the following example all p elements will be center-aligned, with a blue text color:
 

p {

color: blue;

text-align: center;

}