CSS(Cascading Stylesheet)

What is CSS?
• Cascading Style Sheets(CSS) is a text-based
system used to specify formats.
• Cascading Style Sheets(CSS) is a stylesheet
language used for describing the look and formatting
of a document written in a markup language.
For example:-
For instance, if a CSS stylesheet specifies that level 1 heading
(<H1> tags) are to appear in green, then they will appear in
green rather than the standard black.

Advantages of CSS –
• Consistency
• Bandwidth Reduction
• Browser Compatibility
• Appearance
• Search Engine Optimization

STYLESHEET
• Stylesheet is the collection of formatting
styles(colour, size, position and other features)
which can be applied to a webpage.
• It enforces standards and uniformity
throughout a website and provide numerous
attributes to create dynamic efforts.
• Stylesheet consist of Stylerules.

STYLESRULES
• Stylerules are set of HTML text specifying the
formatting elements.
• Stylerules can be applied to selected content
of the webpage.
• Stylerules can be splited in two parts-
i. Selector
ii. Declaration

SELECTOR
• Selector is the first part of the stylerule.
• A selector is an HTML tag at which style will be
applied.

DECLARATION
• Declaration is enclosed within { }.
• Declaration has two sections seperated by
colon(:).
• The section before colon is property and the
section after colon is value.
{Property:Value}
So, the syntax of stylerule-
Selector{Declaration}

3 Ways for using Stylesheets-
1) Inline Stylesheet
2) Embedded/Internal Stylesheet
3) External Stylesheet
a) Linking to External Stylesheet
b) Importing to External Stylesheet

INLINE
STYLESHEET
• Here, the stylesheet is included within the
HTML document.
• It is implemented by using style attributes
with the HTML tag.
Syntax-
<HTML tag Style=“Property:Value”>
For example:-
<H1 style=“color:red”>WELCOME<H1>

Program for Inline Stylesheet-
The stylerule is applied to H1 tag by specifying it in the STYLE
attribute.
<HTML>
<BODY>
<H1 STYLE=“COLOR:GREEN”>This is a style
applied to H1 element</H1>
<H1>This is the default display of H1
element</H1>
</BODY>
</HTML>

Drawbacks of Inline Stylesheet-
• For each element we have to implement
style seperately, if we want to style in
more than one element.
• We have to do the changes as many time
as we want at each stages.

EMBEDDED/INTERNAL
STYLESHEET
• It can be grouped using style tag instead of
applying it individually in the inline style.
Syntax-
<style> HTML tag {Property:Value}
For example:-
H1,H3,P{color:red}

Program for Inline Stylesheet-
<HTML>
<HEAD>
<STYLE>
H1{COLOR:GREEN}
H1{FONT-FAMILY:ARIAL BLACK}
H2{COLOR:RED}
H2{FONT-FAMILY:ARIAL NARROW}
</STYLE>
</HEAD>
<BODY>
<H1>This is the H1 element</H1>
<H3>This is the H3 element with its default style</H3>
</BODY>
</HTML>

Drawback of Embedded Stylesheet-
• Can not be used for more than one
page styling.

Linking to the
External Stylesheet
• There may be instances that all the pages in a
website have similar settings. This can be
done by putting all the stylerules in a
stylesheet and then linking it with HTML
document.
Syntax-
<link rel=“stylesheet” type=“text/css”
href=“externalstylesheet”>

Program for Linking to external Stylesheet-
First we create .css file which has the following code-
BODY {COLOR:BLUE; FACE:COMIC}
H2 {COLOR:GREEN}
B {COLOR:RED}

The program is –
<HTML>
<HEAD>
<LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="STYLE.CSS">
</HEAD>
<BODY>This is the body section
<P><B>This example shows the linking to an external
stylesheet</B></P>
</BODY>
</HTML>

IMPORTING TO AN
EXTERNAL STYLESHEET
• Importing a stylesheet pulls a stylerule into
the document for use.
• Once imported, changes made to stylesheet
will not be reflected in the webpage into
which it has been imported.
Syntax-
<style>
@import=“stylesheetname.css”;
</style>

Program for Importing to external Stylesheet-
<HTML>
<HEAD>
<STYLE>
@IMPORT"STYLE.CSS";
</STYLE>
</HEAD>
<BODY>This is the body section
<P><B>This example shows the Importing to an external
stylesheet</B></P>
</BODY>
</HTML>

SELECTOR TYPES
1) Simple selector
a) HTML selector
b) Class selector
c) Id selector
d) Universal selector
2) Contextual /Descendant selector

HTML SELECTOR
• It uses the name of the HTML element
without blank.
Syntax-
<style>
HTML tag{Property:Value}
</style}

CLASS SELECTOR
• It gives the user the ability to apply styles to
specific path of a document and not
neccesarily to the whole document.
Syntax-
<style>
.class_selector_name{Property:Value}
</style>

CLASS_SELECTOR_NAME
• Class_selector_name can be any
valid string.
• It always proceed with a dot(.)
symbol.
• It can be applied to any of the
element by using class attribute.

ID SELECTOR
• It allows the application to style to one
specific element.
Syntax-
<style>
#specific_id_name{Property:Value}
</style>

SPECIFIC_ID_NAME
• Specific_id_name can be any valid
string.
• It always proceed with a hash(#)
symbol.
• It can be applied to any of the
element by using id attribute.

UNIVERSAL
SELECTOR
• These are denoted by *.
• It is use to apply the style to all the elements
in HTML document.
Syntax-
<style>
*{Property:Value}
</style>

CONTEXTUAL/DESCEDANT
SELECTOR
• Selectors can also specify that the style should
only apply to the elements in a certain
position of the HTML document.
• It is done by listing the elements hierarchy in
the selector , with only whitespace seperating
the element names.

<SPAN> TAG
• If we want to apply special font property to
less than a whole paragraph of text, then we
use <SPAN> tag.
• It is often useful to have a word or phrase in a
line appear in different color or size.
Syntax-
<span> ________ <span>

Example
<HTML>
<HEAD>
<STYLE>
.SPANNED{SIZE:40;
FACE:ARIAL NARROW;
COLOR:RED}
</STYLE>
</HEAD>
<BODY>
This is the example of
<SPAN
CLASS="SPANNED">
SPAN</SPAN> tag
</HTML>

<DIV> TAG
• It is more convenient to apply a section of
document rather than each paragraphevery
time. It is done by <DIV> tag.
• It’s primary use is to specify presentation
details for a section or a division of a
document.
Syntax-
<div>______</div>

Example
<HTML>
<HEAD>
<STYLE>
.SPANNING{COLOR:GREEN}
</STYLE>
</HEAD>
<BODY>
<DIV CLASS="SPANNING">
<P>This is the example of
DIV tag
</DIV>
</BODY></HTML>

CSS(Cascading Stylesheet)

More Related Content

What's hot (19)

Viewers also liked (7)

Similar to CSS(Cascading Stylesheet) (20)

Recently uploaded (20)

CSS(Cascading Stylesheet)