css(cascading stylesheet)

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 ingreen 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. Selectorii. 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 Stylesheet2) Embedded/Internal Stylesheet3) External Stylesheet

a) Linking to External Stylesheetb) 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 STYLEattribute.

<HTML><BODY><H1 STYLE=“COLOR:GREEN”>This is a styleapplied to H1 element</H1><H1>This is the default display of H1element</H1></BODY></HTML>

OUTPUT

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><H2>This is the H2 element</H2><H3>This is the H3 element with its default style</H3></BODY></HTML>

OUTPUT

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><H2>This is the H2 element</H2><BODY>This is the body section<P><B>This example shows the linking to an externalstylesheet</B></P></BODY></HTML>

OUTPUT

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><H2>This is the H2 element</H2><BODY>This is the body section<P><B>This example shows the Importing to an externalstylesheet</B></P></BODY></HTML>

OUTPUT

SELECTOR TYPES1) Simple selector

a) HTML selectorb) Class selectorc) Id selectord) 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>

THANKYOU

css(cascading stylesheet)

Design