Introduction to Cascading Style Sheets

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 [Link] is easy to learn and
understood but it provides powerful control over the presentation of an HTML document.

History of CSS

CSS was proposed in 1994 as a web styling language. To helps solve some of the problems HTML [Link]
were other styling languages proposed at this time, such as Style Sheets for HTML and JSSS but CSS
won.CSS2 became the recommendation in 1998 by W3CCSS3 was started in 1998 but it has never been
completed. Some parts are still being developed and some components work on some browsers.
Why CSS?

CSS saves time : You can write CSS once and reuse same sheet in multiple HTML pages.

Easy Maintainence : 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 as 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 offline [Link] of this we
can view offline websites.

Versions of CSS
 The first CSS specification to become an official W3C Recommendation is CSS1, published in
December 1996.
Among its capabilities are support for:
1) Font properties such as typeface and emphasis
2) Color of text, backgrounds, and other elements
3) Text attributes such as spacing between words, letters, and lines of text
4) Alignment of text, images, tables and other elements
5) Margin, border, padding, and positioning for most elements
6) Unique identification and generic classification of groups of attributes

The W3C maintains the CSS1 Recommendation.CSS2 was developed by the W3C and published as a
Recommendation in May 1998. A superset of CSS1, CSS2 includes a number of new capabilities like
absolute, relative, and fixed positioning of elements, the concept of media types, support for aural style
sheets and bidirectional text, and new font properties such as shadows. The W3C maintains the CSS2
[Link] level 2 revision 1 or CSS 2.1 fixes errors in CSS2, removes poorly-supported
features and adds already-implemented browser extensions to the specification. While it was a
Candidate Recommendation for several months, on 15 June 2005 it was reverted to a working draft for
further review. It was returned to Candidate Recommendation status on 19 July 2007.

CSS level 3 is currently under [Link] W3C maintains a CSS3 progress report. As with the
evolving XHTML specification, CSS3 is modularized and will consist of several separate
Recommendations. An Introduction to CSS3 roadmap will be the starting [Link] biggest difference
between CSS2 and CSS3 is that CSS3 has been split up into different sections, called modules. Each of
these modules is making it's way through the W3C in various stages of the recommendation process.

Features of CSS

❖The key property of style sheet technology is that it can be used to separate the presentation of
 information from the information content and semantic tagging.

❖Such style sheets are called persistent and can be recognized by their lack of a title attribute
specification in the link element referencing the style sheet.

❖From a developer’s perspective, another useful feature of using style sheets is that it is relatively easy
to give all of the elements on a page a consistent appearance.

❖Provides precise control over font size, color and so on.

CSS Core Syntax

A CSS style sheet consists of one or more style rules (sometimes called statements). This form of rule is
called a ruleset and consists of two parts: a selector string followed by a declaration block, which is
enclosed in curly braces ({ and }) .The declaration block contains a list (possibly empty) of declarations
separated by semicolons (;) (the final declaration can also be followed by a semicolon, and many style sheet
authors follow this convention).The selector string indicates the elements to which the rule should
apply, and each declaration with in the declaration block specifies a value for one style property of those
elements.

CSS Example
body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p{
font-family: verdana;
font-size: 20px;
}

Selector

Definition: identifies the HTML elements that the rule will be applied to, identified by the actual element
name, e.g. <body>, or by other means such as class attribute values. The selector is normally the HTML
element you want to style .
Property & Value
The property is the style attribute you want to change. Each property has a value. Properties are separated
from their respective values by colons : Pairs are separated from each other by semicolons ;.This Property
and Value pair is called Declaration,multiple declarations inside the curly braces is called Declaration
Block.

Types of CSS Selector

There are several different types of selectors in CSS.

[Link] Element Selector

[Link] Id Selector
[Link] Class Selector
[Link] Universal Selector
[Link] Group Selector
 CSS Group/Type Selector
Probably the simplest form of selector string, which we have already seen, consists of the name of a
single element type, such as body or p.A rule can also apply to multiple element types by using a
selector string consisting of the comma-separated names of the element types.

For example, the rule

h1,h2,h3,h4,h5,h6
{
background-color:purple
}

Says that any of the six heading element types should be rendered with a purple background. This form
of selector is called a type selector.

Universal Selector
The selector, which is denoted by an asterisk(*) The universal selector represents every possible
element type. So, for example, the rule specifies a value of bold for the font-weight property of every
element in the document.

For example, the rule

*
{
font-weight: bold
}

ID Selector
Another form of selector is the ID selector. Recall that every element in an XHTML document has an
associated id attribute, and that if a value is assigned to the id attribute for an element then no other
element’s id can be assigned the same value. If a selector is preceded by a number sign (#), then it
represents an id value rather than an element type name. So, for example, if a document contains the
markup.

<p id="p3"> ... </p>

#p1, #p3
{
background-color:aqua
}
Note that id values are case-sensitive, so this rule will not apply to an element that has an id value of P1.

Class Selector
Another HTML attribute that is frequently used with style sheets is class. This attribute is used to
associate style properties with an element as follows. First, the style sheet must contain one or more
rulesets having class selectors, which are selectors that are preceded by a period (.), such as .takeNote in
the rule

#p4, .takeNote { font-style:italic }

Pseudo Class Selector

InadditiontoIDandclassselectors,severalpredefinedpseudo-classesareassociated with a (anchor) elements
that have an href attribute.
Pseudo-Classes Associated with a Element Type

Example:
a:link
{
color:black
}
a:visited
{
color:yellow
}
a:hover
{
color:green
 }
a:active
{
color:red
}
Finally,a selector may be specialized so that it holds only within the content of certain element types.

For example, the rule

ul span
{
font-variant:small-caps
}
says that the text within a span element that is in turn part of the content of an unordered,or bulleted, list (ul
element) should be displayed using a small-cap font form. Such a selector is known as a descendant
selector.

ul ol li
{l
etter-spacing:1em
}
applies only to an li element within an ol(ordered,or numbered,list) element that is within a ul element

At-Rules
The other form of rule is called an [Link] only at-rule that is widely supported and used at the time
of this writing is the rule beginning with @import. This rule is used to input one style sheet file into
another one.
For example, a style sheet such as

@import url("[Link]");
h1, h2 { background-color: aqua

Style Sheets and HTML

How CSS is Applied to A Web Page (Types)

CSS is applied to a web page using three different methods:

–Inline style
–Internal style sheet
–External style sheet
 Inline CSS

Applies styles directly to the elements by adding declarations into the style

For Example:
<p style=“color: red;”> This is a simple paragraph and the inline style makes it red.</p>

Internal Style Sheet

•Applies styles to HTML by placing the CSS rules inside the tag <style> inside the document tag
<head>
<html>
<head>
<style type="text/css">

p
{
color:red;
text-align:center;
}
</style>
</head>
<body>
<h2>SHOW THE DIFFERENCE</h2>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
</body></html>

External CSS
•Applies styles as a separate file with a .css extension. The file is then referenced from inside the <head>
element by a link to the file.
•For Example:
<head>
<title>my external style sheet page</title>
<link rel=“style sheet” type=“text/css” href=“[Link]”>
<body>
<p>this is a simple paragraph</p>
</body>
You can create an external style sheet in your text editor.