What is CSS (cascading style sheets) in HTML

What is the CSS (Cascading Style Sheet) in HTML?

Cascading: it is referring to the procedure that determines which style will apply to a certain section if you have more than one style rule.

Style: that means how you want a certain part of your page to look. You can set things like color, margins, font, etc for things like tables, paragraphs, and headings.

Sheets: the “sheets” are like templates, or a set of rules, for determining how the web page will look.

CSS (all together) is a simple design language intended to simplify the process of making web pages presentable. 

CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, as well as a variety of other effects.

CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML.

Before we had CSS (and before it was widely adopted) all of this formatting information was embedded directly in the document- either in the form of attributes like width or BG color (background color) or in the form of purely presentational tags like the font.

Any modification in the design of websites was a very difficult and boring task, as it evolves manually editing every HTML page.

 Providing support for multiple browsers was a difficult task.  CSS fixed all that (kind of.)

====================================================================

Advantages of CSS (Cascading Style Sheet)

1.CSS Save Time

You can write CSS once and then reuse the 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. 

2. 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 to all the occurrences of that tag. So less code means faster download times.

3.Easy Maintenance 

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

4.Superior Style 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 of HTML attributes.

5. Multiple Device Compatibility

CSS 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. 

6.Global Web Standards

Now HTML attributes are being deprecated and it is being recommended to use CSS. So it's a good idea to start using CSS in all the HTML pages to make them compatible with future browsers.

*******************************************************************************

Who Creates and Maintains a Cascading Style Sheet

CSS is created and maintained by 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 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.

################################################################################

Cascading Style Sheet Versions

Cascading Style Sheets, level 1 (CSS1) was 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.

I also write on Cascading Style Sheet Box Model 

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 level 3 has been under development since June 1999.

Applying a single style sheet to multiple documents

Applying multiple sheets to a single document

*******************************************************************************

CSS ASSOCIATING STYLES

There are four ways to associate styles with your HTML document. Most commonly used methods are inline CSS and External CSS. 

CSS Selectors 

You can put your CSS rules into an HTML document using the <style> element. This tag is placed inside <head>...</head> tags. Rules defined using this syntax will be applied to all the elements available in the document.

<head>
<style> h1{ color: #36C; } </style>
</head>

You can use the style attribute of any HTML element to define style rules. These rules will be applied to that element only. Here is the generic syntax:

<h1 style ="color:#36C;"> This is inline  </h1>

The <link> element can be used to include an external style sheet file in your HTML document. 

An external style sheet is a separate text file with a CSS extension. You define all the Style rules within this text file and then you can include this file in any HTML document using <link> element. 

Consider a simple style sheet file with a name mystyle.css having the following rules:

h1 , h2 , h3 {

color: #36CFFF;

font-weight: normal;

letter-spacing: .4em;

text-transform: #36cff; } 

Now you can include this file mystyle.css in any HTML document as follows:

<head> <link type="text/css" href="mystyle.css" rel=“stylesheet” /> </head>

Imported CSS - @import Rule: 

@import is used to import an external stylesheet in a manner similar to the <link> element. Here is the generic syntax of a @import rule.

<head> <style>@import "URL"; </style></head> 

Here URL is the URL of the style sheet file having style rules. You can use another syntax as well:

<head> <style>@import url("URL");</style></head> 

EXAMPLE:
Following is the example showing you how to import a style sheet file into an HTML document:

<head><style> @import "mystyle.css";</style> </head>

We have discussed four ways to include style sheet rules in an HTML document. Here is the rule to override any Style Sheet Rule.

Any inline stylesheet takes the highest priority. So it will override any rule defined in <style>...</style> tags or rules defined in an external style sheet file. 

Any rule defined in <style>...</style> tags will override rules defined in any external style sheet file.

Any rule defined in the external style sheet file takes the lowest priority and rules defined in this file will be applied only when the above two rules are not applicable.

Many times you may need to put additional comments in your stylesheet blocks. So it is very easy to comment on any part in the style sheet.

You simply put your comments inside /*.....this is a comment in style sheet.....*/. 

 You can use /* ....*/ to comment multi-line blocks in a similar way you do in C and C++ programming languages