A Brief History of CSS

CSS was first proposed by Håkon Wium Lie on October 10, 1994. At the time, Lie was working with Tim Berners-Lee at CERN. ... Style sheets have existed in one form or another since the beginnings of Standard Generalized Markup Language (SGML) in the 1980s, and CSS was developed to provide style sheets for the web. Before Cascading Style Sheets (CSS) there was very little that could be done to change the design of a web page. While Hyper Text Markup Language (HTML) creates documents for the World Wide Web, it was specifically designed to hold the content of a web page. Housed in a separate file, CSS adds the style and design to a web page. The term cascading comes from the ability to combine multiple CSS files to determine the style for one page.

Introduction

CSS is one of three cornerstone technologies used on the web (the other two are HTML and JavaScript). CSS stands for Cascading Style Sheets – the clues are really in the words ‘cascading’ and ‘style’ with cascading describing the way that one style can cascade from one to another. One of the many benefits of CSS is that more than one style can be used within one HTML document.
CSS is used as a way of defining how HTML code is going to look on a website. Whereas HTML (Hypertext Markup Language) is used to create content, including written text, CSS alters the way a web page will look. The first version of the Netscape browser implemented HTML 1.0.

Rule-Set and Need of CSS?

A CSS rule-set consists of a selector and a declaration block:
Syntax:
p {color:blue; font-size:12px;}

Difference between CSS and CSS3

CSS	CSS3
Designed to offer several formatting features, CSS is not compatible with CSS3.	CSS3 provides backward compatibility with CSS and supports all codes written in CSS version 1.
In CSS, designers had to develop rounded borders separately from the other web page elements and then position them on the server to complete the look.	CSS3 allows for the setting of rounded gradients and corners with the help of codes.
In CSS, animations were coded via JQuery and JavaScript. There are no design layer features. Text shading/ shadowing and other special effects are not possible as page elements.	Text shadows can be added with CSS3 and allow for more accessible reading capabilities. Visual effects for braking longer words and lines is also possible along with advanced features for font setting.
Media queries are not supported by CSS	CSS3 supports queries for responsive websites
CSS codes cannot be split up into varied modules	CSS3 codes are capable of being split up into different modules
CSS offers standard and old colors only	Support is provided for RGBA, HSL HSLA, and gradient colors

CSS Selectors
List of various selectors in CSS are:

1. The CSS element Selector

The element selector selects HTML elements based on the element name.
Example:
Here, all </b > elements on the page will be center-aligned, with a red text color:
b {
text-align: center;
color: red;
}

2. The CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific element.The id of an element is unique within a page, so the id selector is used to select one unique element! .
To select an element with a specific id, write a hash (#) character, followed by the id of the element.
Example:
#para1 {
text-align: center;
color: red;
}

3. The CSS class Selector

The class selector selects HTML elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the class name.
Example:
.para1 {
text-align: center;
color: red;
}

4. The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.
Example:
* {
text-align: center;
color: red;
}

5. The CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style definitions.
Example:
h1,h2,p,b {
text-align: center;
color: red;
}

How to Include CSS in a Webpage.
Three ways of include CSS are:

1. External CSS

With an external style sheet, you can change the look of an entire website by changing just one file! Each HTML page must include a reference to the external style sheet file inside the element, inside the head section.
Example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

2. Internal CSS

With an external style sheet, you can change the look of an entire website by changing just one file! Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

3. Inline CSS

An inline style may be used to apply a unique style for a single element.To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.
Example:
<!DOCTYPE html<
<html<
<body<
<h1 style="color:blue;text-align:center;"<
This is a heading</h1<
<p style="color:red;"<
This is a paragraph.</p<
</body<
</html<

---