cascading style sheets(css)

179
RESHMI. P MCA S4

Upload: reshmi-rajan

Post on 13-Jan-2015

650 views

Category:

Education


0 download

DESCRIPTION

A standards-based method for controlling the look and feel of XML content. Comprised of Rules to control elements in the document. Designed to separate formatting from the content while being flexible and scalable CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element.

TRANSCRIPT

Page 1: Cascading Style Sheets(CSS)

RESHMI. P

MCA S4

Page 2: Cascading Style Sheets(CSS)

CONTENTSCONTENTS• What are Cascading Style Sheets (CSS)?

• What can CSS do?

• Advantages

• Who Creates and Maintains CSS?

• CSS Versions

• Understanding Style Rules

• Types of CSS

• CSS rules

• CSS Rules Overriding

• What is Inheritance?

• Handling old Browsers

• CSS Comments

• CSS - Measurement Units

Page 3: Cascading Style Sheets(CSS)

CONTENTSCONTENTS•Using IDs and Classes

• Working With DIV

• Working With <span>

• Manipulating Text using CSS

• Setting Fonts using CSS

• Setting Backgrounds using CSS

• CSS – Images

• CSS – Links

• CSS – Tables

• CSS for Page Layout

• CSS - Lists

• CSS – Cursors

• Display

• Limitations

Page 4: Cascading Style Sheets(CSS)

What Are What Are Cascading Style Sheets Cascading Style Sheets

(CSS)?(CSS)?

Page 5: Cascading Style Sheets(CSS)

What Are Cascading Style Sheets?What Are Cascading Style Sheets?•Cascading Style Sheets (CSS) is a style sheet language

used to describe the presentation of a document written in a

markup language.

• Its most common application is to style web pages written

in HTML and XHTML, but the language can be applied to

any kind of XML document.

•Created by: CSS was created by Håkon Wium Lie and Bert

Bos and was adopted as a W3C Recommendation in late

1996.

Page 6: Cascading Style Sheets(CSS)

Håkon Wium Lie, chief technical officer of

the Opera Software company and co-creator of

the CSS web standard

Page 7: Cascading Style Sheets(CSS)

What Are Cascading Style What Are Cascading Style Sheets?Sheets?

•A standards-based method for controlling the look and feel of

XML content.

•Comprised of Rules to control elements in the document.

•Designed to separate formatting from the content while being

flexible and scalable

• CSS specifies a priority scheme to determine which style

rules apply if more than one rule matches against a particular

element. In this so-called cascade, priorities or weights are

calculated and assigned to rules, so that the results are

predictable.

Page 8: Cascading Style Sheets(CSS)

What Can CSS Do?What Can CSS Do?

Page 9: Cascading Style Sheets(CSS)

What Can CSS Do?•Text formatting

•Element sizing

•Element positioning

•Change link attributes

•Cursor manipulation

• support the control of hundreds or thousands of

documents from a single control file

•This makes our life much easier when it is time to make

updates

Page 10: Cascading Style Sheets(CSS)

AdvantagesAdvantages

Page 11: Cascading Style Sheets(CSS)

AdvantagesAdvantages

• Saves time

• Easy to change

• Keep consistency

• Give you more control over layout

• Use styles with JavaScript => DHTML

• Make it easy to create a common format for all the

Web pages

Page 12: Cascading Style Sheets(CSS)

AdvantagesAdvantages

• Pages load faster

• Easy maintenance

• Superior styles to HTML

• Multiple Device Compatibility

•Global web standards

Page 13: Cascading Style Sheets(CSS)

Who Creates and Maintains Who Creates and Maintains CSS? CSS?

Page 14: Cascading Style Sheets(CSS)

Who Creates and Maintains Who Creates and Maintains CSS? CSS?

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

Page 15: Cascading Style Sheets(CSS)

Who Creates and Maintains Who Creates and Maintains CSS? CSS?

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

Page 16: Cascading Style Sheets(CSS)

CSS VersionsCSS Versions

Page 17: Cascading Style Sheets(CSS)

CSS VersionsCSS VersionsCSS 1

– Font properties such as typeface and emphasis

– Color of text, backgrounds, and other elements

– Text attributes such as spacing between words, letters,

and lines of text

– Alignment of text, images, tables and other elements

– Margin, border, padding, and positioning for most

elements

– Unique identification and generic classification of

groups of attributes

Page 18: Cascading Style Sheets(CSS)

CSS VersionsCSS Versions

CSS2

includes a number of new capabilities like

– absolute, relative, and fixed positioning of elements

and z-index,

– the concept of media types

– support for aural style sheets and bidirectional text

– new font properties such as shadows.

Page 19: Cascading Style Sheets(CSS)

CSS VersionsCSS VersionsCSS3

Modules include:

– Borders (border-radius, box-shadow)

– Backgrounds (multiple backgrounds)

– Color (HSL colors, HSLA colors, opacity, RGBA

colors)

– Also:

– media queries

– multi-column layout

– Web fonts

Page 20: Cascading Style Sheets(CSS)

Understanding Style RulesUnderstanding Style Rules

Page 21: Cascading Style Sheets(CSS)

Understanding Style RulesUnderstanding Style Rules• The style characteristics for an HTML element

are expressed by Style Rules .

• A set of style rules is called a Style Sheet.

• Style rules are contained in the <STYLE> element in the

document’s <HEAD> section.

<Head><Style type=“text/css”>P {color:blue; font-size: 24pt;}</Style></Head>

Page 22: Cascading Style Sheets(CSS)

Understanding Style RulesUnderstanding Style Rules• A Style Rule is composed of two parts: a selector and a

declaration.

TH {color: red;}.

• The Selector indicates the element to which the rule is

applied.

• The Declaration determines the property values of a

selector.

SelectorDeclaration

Page 23: Cascading Style Sheets(CSS)

Understanding Style RulesUnderstanding Style Rules

• The Property specifies a characteristic, such as color,

font-family, position, and is followed by a colon (:).

• The Value expresses specification of a property, such as

red for color, arial for font family, 12 pt for font-size, and

is followed by a semicolon (;).

P {color: red;}

Property Value

Page 24: Cascading Style Sheets(CSS)

Types of Selectors :-Different types of selectors are:-

• Type selectors

• Universal selectors

• Descendant Selectors

• Class Selectors

• ID Selectors

• Child Selectors

• Attribute Selectors

• Grouping Selectors

Page 25: Cascading Style Sheets(CSS)

• To give a color to all level 1 headings :-

h1 {

color: #36CFFF;

}

The Type Selectors :-

Page 26: Cascading Style Sheets(CSS)

The Universal Selectors:-

•Rather than selecting elements of a specific type, the

universal selector quite simply matches the name of any

element type :-

* {

color: #000000;

}

-This rule renders the content of every element in our

document in black.

Page 27: Cascading Style Sheets(CSS)

The Descendant Selectors :-

•Suppose you want to apply a style rule to a particular

element only when it lies inside a particular element.

•In the following example, style rule will apply to <em>

element only when it lies inside <ul> tag.

ul em {

color: #000000;

}

Page 28: Cascading Style Sheets(CSS)

The Class Selectors :-•can define style rules based on the class attribute of the

elements. All the elements having that class will be

formatted according to the defined rule.

.black {

color: #000000;

}

-This rule renders the content in black for every element

with class attribute set to black in our document.

Page 29: Cascading Style Sheets(CSS)

The Class Selectors (Cntd.)

•To make it a bit more particular. For example:-

h1.black {

color: #000000;

}

-This rule renders the content in black for only <h1>

elements with class attribute set to black.

Page 30: Cascading Style Sheets(CSS)

The Class Selectors (Cntd.)

•You can apply more than one class selectors to given

element. Consider the following example :-

<p class="center bold">

This paragraph will be styled by the classes center

and bold.

</p>

Page 31: Cascading Style Sheets(CSS)

The ID Selectors :-

•You can define style rules based on the id attribute of the

elements. All the elements having that id will be formatted

according to the defined rule:-

#black {

color: #000000;

}

-This rule renders the content in black for every element with

id attribute set to black in our document.

Page 32: Cascading Style Sheets(CSS)

The ID Selectors (Cntd.)•To make it a bit more particular. For example: -

h1#black { color: #000000; }

-This rule renders the content in black for only <h1>

elements with id attribute set to black.

•The true power of id selectors is when they are used as the

foundation for descendant selectors, For example:

#black h2 { color: #000000; }

-In this example all level 2 headings will be displayed in

black color only when those headings will lie with in tags

having id attribute set to black.

Page 33: Cascading Style Sheets(CSS)

The Child Selectors:- •A type of selector which is very similar to descendants but

have different functionality. Consider the following example:

body > p {

color: #000000;

}

-This rule will render all the paragraphs in black if they are

direct child of <body> element. Other paragraphs put inside

other elements like <div> or <td> etc. would not have any

effect of this rule.

Page 34: Cascading Style Sheets(CSS)

The Attribute Selectors:- •To apply styles to HTML elements with particular attributes.

The style rule below will match all input elements that has a

type attribute with a value of text:-

input[type="text"]{

color: #000000;

}

•The advantage to this method is that the <input

type="submit" /> element is unaffected, and the color

applied only to the desired text fields.

Page 35: Cascading Style Sheets(CSS)

The Attribute Selectors(Cntd.): There are following rules applied to attribute selector.:-

• p[lang] - Selects all paragraph elements with a lang

attribute.

• p[lang="fr"] - Selects all paragraph elements whose

lang attribute has a value of exactly "fr".

• p[lang~="fr"] - Selects all paragraph elements whose

lang attribute contains the word "fr".

• p[lang|="en"] - Selects all paragraph elements whose

lang attribute contains values that are exactly "en", or

begin with "en-".

Page 36: Cascading Style Sheets(CSS)

Grouping Selectors:- •can apply a style to many selectors if you like. Just separate the

selectors with a comma as given in the following example:

h1, h2, h3 {

color: #36C;

text-transform: lowercase;

}

- This define style rule will be applicable to h1, h2 and h3

element as well.

• The order of the list is irrelevant. All the elements in the selector

will have the corresponding declarations applied to them.

Page 37: Cascading Style Sheets(CSS)

Types of CSSTypes of CSS

Page 38: Cascading Style Sheets(CSS)

Types of CSSTypes of CSS

Three CSS implementations:-

Inline

• Affects only the element applied to

Embedded

• Affects only the elements in a single file

External

• Linked to an unlimited number of files

Page 39: Cascading Style Sheets(CSS)

HTML Page StructureHTML Page StructureDocument (HTML)

Head

Body

H1 Heading

Paragraph 1

Paragraph 2

Title Text

<HTML>

<HEAD>

<TITLE>Title Text</TITLE>

</HEAD>

<BODY>

<H1>H1 Heading</H1>

<P>Paragraph 1</P>

<P>Paragraph 2</P>

</BODY>

</HTML>

Page 40: Cascading Style Sheets(CSS)

Inline CSSInline CSS

• Add styles to each tag within the HTML file

• Use it when you need to format just a single section in

a web page

The style Attribute:

• can use style attribute of any HTML element to define

style rules. These rules will be applied to that element

only.

syntax:- <element style="...style rules....">

Page 41: Cascading Style Sheets(CSS)

Inline CSSInline CSS

•Use the STYLE attribute

<p>This is normal text</p>

<p><b>This is bold text</b></p>

<p style=“font-weight: bold”>This is

bold text</p>

Page 42: Cascading Style Sheets(CSS)

Inline CSSInline CSSAttributes:

Attribute Value Description

style style rules The value of style attribute is a combination of style declarations separated by semicolon (;).

Example:- Following is the example of inline CSS based on above syntax: <h1 style ="color:#36C;"> This is inline CSS </h1>

This will produce following result:

This is inline CSS

Page 43: Cascading Style Sheets(CSS)

Embedded or internal stylesEmbedded or internal styles

• A style is applied to the entire HTML file

• Use it when you need to modify all instances of

particular element (e.g., h1) in a web page

Page 44: Cascading Style Sheets(CSS)

Embedded CSSEmbedded CSSThe <style> Element:

• can put CSS rules into an HTML document using the

<style> element.

• This tag is placed inside <head>...</head> tags.

Syntax: -

<head>

<style type="text/css" media="...">

Style Rules ............

</style>

</head>

Page 45: Cascading Style Sheets(CSS)

Embedded CSSEmbedded CSS

Attributes:

Attributes associated with <style> elements are:

Attribute Value Description

type text/css Specifies the style sheet language as a content-type (MIME type). This is required attribute.

media screentty tv projection handheld printbraille auralall

Specifies the device the document will be displayed on. Default value is all. This is optional attribute.

Page 46: Cascading Style Sheets(CSS)

External style sheetsExternal style sheets

• An external style sheet is a text file containing the

style definition (declaration)

• Use it when you need to control the style for an entire

web site

Page 47: Cascading Style Sheets(CSS)

External CSSExternal CSS• The <link> element can be used to include an

external stylesheet file in your HTML document.

• An external style sheet is a separate text file with .css

extension. Define all the Style rules within this text file

and then include this file in any HTML document using

<link> element.

Syntax:-

<head>

<link type="text/css" href="..." media="..." />

</head>

Page 48: Cascading Style Sheets(CSS)

External CSSExternal CSSAttributes:

Attributes associated with <style> elements are: Attribute Value Description

type text/css Specifies the style sheet language as a content-type (MIME type). This attribute is required.

href URL Specifies the style sheet file having Style rules. This attribute is a required.

media screenttytv projection handheld print brailleaural all

Specifies the device the document will be displayed on. Default value is all. This is optional attribute.

Page 49: Cascading Style Sheets(CSS)

Creating an External Style Creating an External Style SheetSheet

• Open a new blank document in Notepad

• Type style declarations

– h1 {color:red; font-family:sans-serif;}

• Do not include <style> tags

• Save the document as filename.css

Page 50: Cascading Style Sheets(CSS)

Linking to Style SheetsLinking to Style Sheets

• Open an HTML file

• Between <head> and </head> add

– <link href=URL rel=“relation_type”

type=“link_type”>

• URL is the file.css

• Relation_type=“stylesheet”

• Link_type=“text/css”

• Save this file and the .css file in the same web server

directory

Page 51: Cascading Style Sheets(CSS)

Imported CSS - @import Rule:Imported CSS - @import Rule:

• @import is used to import an external stylesheet

in a manner similar to the <link> element.

• Generic syntax of @import rule:-

<head>

<@import "URL";

</head>

Here URL is the URL of the style sheet file having style

rules.

Page 52: Cascading Style Sheets(CSS)

Imported CSS - @import Rule: Imported CSS - @import Rule:

•You can use another syntax as well:-

<head>

<@import url("URL");

</head>

Example:-

<head>

@import "mystyle.css";

</head>

Page 53: Cascading Style Sheets(CSS)

External CSSExternal CSS

A few reasons this is better :-

• Easier Maintenance

• Reduced File Size

• Reduced Bandwidth

• Improved Flexibility

Page 54: Cascading Style Sheets(CSS)

CSS RulesCSS Rules

Page 55: Cascading Style Sheets(CSS)

Cascading Style Sheets (CSS)Cascading Style Sheets (CSS)

Style Rules:-

H1 {font-weight: bold; color:black; }

Inline style=“font-weight: bold”

Selector Declaration

Property Value

H1 {font-weight: bold}Embedded/External

Page 56: Cascading Style Sheets(CSS)

CSS Rules OverridingCSS Rules Overriding

Page 57: Cascading Style Sheets(CSS)

CSS Rules OverridingCSS Rules OverridingThere are four ways to include style sheet rules in a an HTML

document. Here is the rule to override any Style Sheet Rule.:-

Any inline style sheet takes highest priority. So it will

override any rule defined in <style>...</style> tags or

rules defined in any 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 external style sheet file takes lowest

priority and rules defined in this file will be applied only

when above two rules are not applicable

Page 58: Cascading Style Sheets(CSS)

InheritanceInheritance

Page 59: Cascading Style Sheets(CSS)

InheritanceInheritance• When we nest one element inside another, the nested

element will inherit the properties assigned to the containing

element. Unless we modify the inner elements values

independently.

• For example, a font declared in the body will be inherited

by all text in the file no matter the containing element, unless

you declare another font for a specific nested element.

body {font-family: Verdana, serif;}

- Now all text within the (X)HTML file will be set to

Verdana.

Page 60: Cascading Style Sheets(CSS)

InheritanceInheritance

• If you wanted to style certain text with another font, like an

h1 or a paragraph then you could do the following:-

h1 {font-family: Georgia, sans-serif;}

p {font-family: Tahoma, serif;}

-Now all <h1> tags within the file will be set to Georgia

and all <p> tags are set to Tahoma, leaving text within other

elements unchanged from the body declaration of Verdana

Page 61: Cascading Style Sheets(CSS)

InheritanceInheritance

• There are instances where nested elements do not inherit

the containing elements properties.

•For example, if the body margin is set to 20 pixels, the other

elements within the file will not inherit the body margin by

default.

body {margin: 20px;}

Page 62: Cascading Style Sheets(CSS)

Handling old BrowsersHandling old Browsers

Page 63: Cascading Style Sheets(CSS)

Handling old BrowsersHandling old Browsers•To handle old browsers while writing our Embedded CSS in

an HTML document, can use comment tags to hide CSS

from older browsers:

<style type="text/css">

<!--

body, td {

color: blue;

}

-->

</style>

Page 64: Cascading Style Sheets(CSS)

CSS CommentsCSS Comments

Page 65: Cascading Style Sheets(CSS)

CSS CommentsCSS Comments•We can use /* ....*/ to comment multi-line blocks in similar

way you do in C and C++ programming languages.

Example:-

/* This is an external style sheet file */

h1, h2, h3 {

color: #36C;

font-weight: normal;

}

/* end of style rules. */

Page 66: Cascading Style Sheets(CSS)

CSS - Measurement UnitsCSS - Measurement Units

Page 67: Cascading Style Sheets(CSS)

CSS - Measurement UnitsCSS - Measurement Units

Page 68: Cascading Style Sheets(CSS)

Using IDs and ClassesUsing IDs and Classes

Page 69: Cascading Style Sheets(CSS)

Working With IdsWorking With Ids• Use an id to distinguish something, like a paragraph,

from the others in a document.

• To create an ID for a specific tag, use the property:-

<tag ID=id_name>

For example, to identify a paragraph as “head”, use the

code:-

<p id=“head”>… </p>

• To apply a style to a specific ID, use:-

#id_name {style attributes and values}

Page 70: Cascading Style Sheets(CSS)

ClassesClasses

• HTML and XHTML require each id be unique–

therefore an id value can only be used once in a

document.

• can mark a group of elements with a common

identifier using the class attribute.

<element class=“class”> … </element>

Page 71: Cascading Style Sheets(CSS)

Working With ClassesWorking With Classes

• To create a class, enter the following in the HTML tag:

– <tag CLASS=class_name>

– <h1 CLASS=FirstHeader>IU</h1>

– class_name is a name to identify this class of tags

• To apply a style to a class of tags, use:

– tag.class_name {style attributes} or

– .class_name {style attributes}

Page 72: Cascading Style Sheets(CSS)

Applying a style to a classApplying a style to a class

Page 73: Cascading Style Sheets(CSS)

Working With Classes and IdsWorking With Classes and Ids

• The difference between the Class property and the ID

property :-

– The value of the ID property must be unique. you

can’t have more than one tag with the same ID

value

– You can apply the same Class value to multiple

document tags

Page 74: Cascading Style Sheets(CSS)

Working With DIVWorking With DIV

Page 75: Cascading Style Sheets(CSS)

Working With DIVWorking With DIV• <DIV> tag is used for blocks of text, e.g., paragraphs, block

quotes, headers, or lists

• To create a container for block-level elements, use:

– <DIV CLASS=class_name>

• Block-level elements

</DIV>

– Class_name is the name of the class

– We can substitute the ID proper for the Class

property (with ID, the syntax for CSS style,

#id_name {style attributes and values}

Page 76: Cascading Style Sheets(CSS)

Working With <DIV>Working With <DIV>

DIV.Slogan {font-weight:bold}

<DIV CLASS=Slogan>Maxwell Scientific’s new

Slogan is:<BR>”We teach science”</DIV>

style

HTML code

Maxwell…:

“We teach…Resultin

gtext

Page 77: Cascading Style Sheets(CSS)

Working With <span>Working With <span>

Page 78: Cascading Style Sheets(CSS)

Working With <span>Working With <span>

• Spans are very similar to divisions except they are an

inline element versus a block level element.

• No linebreak is created when a span is declared

•With the <span> tag, you can use inline elements, e.g.,

<B>, <I>

Page 79: Cascading Style Sheets(CSS)

• To create a container for inline elements, use:

– <span CLASS=class_name>

• inline elements

</span>

• can use the span tag to style certain areas of text, as:-

<span class="italic">This text is italic</span>

• Then in CSS file:

.italic{

font-style: italic;

}

Working With <span>Working With <span>

Page 80: Cascading Style Sheets(CSS)

Manipulating Text using CSS Manipulating Text using CSS

Page 81: Cascading Style Sheets(CSS)

Manipulating Text using CSS Manipulating Text using CSS

We can set following text properties of an element:

• The color property is used to set the color of a text.

• The direction property is used to set the text direction.

• The letter-spacing property is used to add or subtract space

between the letters that make up a word.

• The word-spacing property is used to add or subtract space

between the words of a sentence.

• The text-indent property is used to indent the text of a

paragraph.

Page 82: Cascading Style Sheets(CSS)

Manipulating Text using CSS Manipulating Text using CSS • The text-align property is used to align the text of a

document.

• The text-decoration property is used to underline,

overline, and strikethrough text.

• The text-transform property is used to capitalize text or

convert text to uppercase or lowercase letters.

•The white-space property is used to control the flow and

formatting of text.

• The text-shadow property is used to set the text shadow

around a text.

Page 83: Cascading Style Sheets(CSS)

Set the text color:- Set the text color:-

• We can set the color of text with the following:

color: value;

•Possible values are:-

- color name - example:(red, black...)

- hexadecimal number - example:

(#ff0000, #000000)

- RGB color code - example:

(rgb(255, 0, 0), rgb(0, 0, 0))

Page 84: Cascading Style Sheets(CSS)

Set the text color:- Set the text color:-

• Following is the example which demonstrates how to set the

text color. Possible value could be any color name in any valid

format.

<p style="color:red;">

This text will be written in red.

</p>

This will produce following result:-

This text will be written in red.

Page 85: Cascading Style Sheets(CSS)

Set the text direction :- Set the text direction :- •We can set the direction of text with the following:

direction: value;

•Possible values are:-

- ltr

- rtl

•Example:-

<p style="direction:rtl;">

This text will be renedered from right to left

</p>

Page 86: Cascading Style Sheets(CSS)

Set the space between characters:- Set the space between characters:-

•We can adjust the space between letters in the following

manner:-

letter-spacing: value;

•Setting the value to 0, prevents the text from justifying. You

can use negative values.

•Possible values are:-

- normal

- length

Page 87: Cascading Style Sheets(CSS)

Set the space between characters:-Set the space between characters:-

•Following is the example which demonstrates how to set the

space between characters.

<p style="letter-spacing:5px;">

This text is having space between letters.

</p>

- This will produce following result: -

T h i s t e x t i s h a v i n g s p a c e b e t w e

e n l e t t e r s.

Page 88: Cascading Style Sheets(CSS)

Set the space between words:- Set the space between words:-

•We can adjust the space between words in the following

manner :-

word-spacing: value;

•We can use negative values.

•Possible values are :-

- normal

- length

Page 89: Cascading Style Sheets(CSS)

Set the space between words:- Set the space between words:-

•Following is the example which demonstrates how to set

the space between words:-

<p style="word-spacing:5px;">

This text is having space between words.

</p>

-This will produce following result:-

This text is having space between words.

Page 90: Cascading Style Sheets(CSS)

Set the text indent:- Set the text indent:- • We can indent the first line of text in an (X)HTML element

with the following:-

text-indent: value;

•Possible values are:-

- length

- percentage

Page 91: Cascading Style Sheets(CSS)

Set the text alignment:- Set the text alignment:-

•We can align text with the following:-

text-align: value;

•Possible values are:-

- left

- right

- center

- justify

Page 92: Cascading Style Sheets(CSS)

Decorating the text:-Decorating the text:-• You can decorate text with the following:-

text-decoration: value;

•Possible values are :-

- none

- underline

- overline

- line through

- blink

Page 93: Cascading Style Sheets(CSS)

Set the text cases:- Set the text cases:- • We can control the size of letters in an (X)HTML element

with the following:-

text-transform: value;

• Possible values are

- none

- capitalize

- lowercase

- uppercase

Page 94: Cascading Style Sheets(CSS)

Set the white space between Set the white space between text:- text:-

• We can control the whitespace in an (X)HTML element with

the following:-

white-space: value;

• Possible values are

- normal

- pre

-nowrap

Page 95: Cascading Style Sheets(CSS)

Set the white space between Set the white space between text:- text:-

•Example:-

<p style="white-space:pre;">This text has a line

break

and the white-space pre setting tells the browser to

honor it just like the HTML pre tag.</p>

- This will produce following result:-

This text has a line break

and the white-space pre setting tells the browser to

honor it just like the HTML pre tag.

Page 96: Cascading Style Sheets(CSS)

Set the text shadow:- Set the text shadow:- •Following is the example which demonstrates how to set the

shadow around a text.

<p style="text-shadow:4px 4px 8px blue;">

If your browser supports the CSS text-shadow

property, this text will have a blue shadow.</p>

• This may not be supported by all the browsers.

Page 97: Cascading Style Sheets(CSS)

Setting Fonts using CSSSetting Fonts using CSS

Page 98: Cascading Style Sheets(CSS)

Setting Fonts using CSSSetting Fonts using CSSWe can set following font properties of an element:-

• The font-family property is used to change the face of a font.

•The font-style property is used to make a font italic or oblique.

• The font-variant property is used to create a small-caps effect.

• The font-weight property is used to increase or decrease how

bold or light a font appears.

• The font-size property is used to increase or decrease the size

of a font.

• The font property is used as shorthand to specify a number of

other font properties.

Page 99: Cascading Style Sheets(CSS)

Font- family Property :-Font- family Property :-•In CSS, there are two types of font family names:

- generic family - a group of font families with a similar

look (like "Serif" or "Monospace")

- font family - a specific font family (like "Times New

Roman" or "Arial")

• Format:-

font-family:"Times New Roman", Times, serif;

Page 100: Cascading Style Sheets(CSS)

Font- family Property :-Font- family Property :-

Generic family Font family Description

Serif Times New RomanGeorgia

Serif fonts have small lines at the ends on some characters

Sans-serif ArialVerdana

"Sans" means without - these fonts do not have the lines at

the ends of characters

Monospace Courier NewLucida Console

All monospace characters have the same width

Page 101: Cascading Style Sheets(CSS)

Font- family Property:-Font- family Property:-• If the name of a font family is more than one word, it must be

in quotation marks, like font-family The font family of a text

is set with the font-family property.

• The font-family property should hold several font names as a

"fallback" system. If the browser does not support the first

font, it tries the next font.

• Start with the font you want, and end with a generic family.

• More than one font family is specified in a comma-separated

list:

Example:-

p{font-family:"Times New Roman", Times, serif;}

Page 102: Cascading Style Sheets(CSS)

Set the font style:-Set the font style:-•We can set the style of text in a element with the font-style

property

font-style: value;

•Possible values are:-

- normal - The text is shown normally

- italic - The text is shown in italics

- oblique - The text is "leaning" (oblique is very similar

to italic, but less supported)

• Example:-

p.normal {font-style:normal;}

Page 103: Cascading Style Sheets(CSS)

Set the font variant:- Set the font variant:- •We can set the variant of text within an element with the

font-variant Property

font-variant: value;

•Possible values are:-

- normal

- small-caps - displayed when all the letters of the word are in capitals with uppercase characters slightly larger than lowercase.

•Later versions of CSS may support additional variants such as

- condensed

- expanded

- small-caps numerals or other custom variants.

Page 104: Cascading Style Sheets(CSS)

Set the font weight:- Set the font weight:- •We can control the weight of text in an element with the

font-weight property:-

font-weight: value;

•Possible values are:-

- lighter

- normal

- bold | bolder

- 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

• The bolder and lighter values are relative to the inherited

font weight, while the other values are absolute font weights.

Page 105: Cascading Style Sheets(CSS)

Set the font weight:- Set the font weight:- Note:-

•Since not all fonts have nine possible display weights some of

the weights may be grouped together in assignment.

•If the specified weight is not available, an alternate will be

chosen on the following basis:-

- 500 may be switched with 400, and vice versa

- 100-300 may be assigned to the next lighter weight, if

any, or the next darker weight otherwise

- 600-900 may be assigned to the next darker weight, if

any, or the next lighter weight otherwise

Page 106: Cascading Style Sheets(CSS)

Set the font size:-Set the font size:-• We can set the size of the text used in an element by using the

font size Property

font-size: value;

• There are a lot of choices for values:

- xx-large | x-large | larger | large

- medium

- small | smaller | x-small | xx-small

- length

- % (percent)

Page 107: Cascading Style Sheets(CSS)

Set the font size adjust: -Set the font size adjust: -•We can set the font size adjust of an element.

font-size-adjust: value;

•This property enables you to adjust the x-height to make

fonts more legible.

• Possible value could be any number.

•Example:-

<p style="font-size-adjust:0.61;">

This text is using a font-size-adjust value.

</p>

Page 108: Cascading Style Sheets(CSS)

Set the font stretch:- Set the font stretch:- •We can set the font stretch of an element.

font-stretch:value;

•This property relies on the user's computer to have an

expanded or condensed version of the font being used.

•Possible values could be :-

-normal | wider | narrower

- ultra-condensed | extra-condensed | condensed | semi-

condensed

- semi-expanded | expanded | extra-expanded | ultra-

expanded.

Page 109: Cascading Style Sheets(CSS)

Setting the Font property:-Setting the Font property:-•We can use the font property to set all the font properties at

once.

font:value;

• Example :-

<p style="font:italic small-caps bold 15px

georgia;">

Applying all the properties on the text at once. </p>

- This will produce following result:

APPLYING ALL THE PROPERTIES ON THE

TEXT AT ONCE

Page 110: Cascading Style Sheets(CSS)

Setting Backgrounds using CSSSetting Backgrounds using CSS

Page 111: Cascading Style Sheets(CSS)

Setting Setting BackgroundsBackgrounds using using CSSCSS

We can set following background properties of an element:-

• The background-color property is used to set the

background color of an element.

• The background-image property is used to set the

background image of an element.

• The background-repeat property is used to control the

repetition of an image in the background.

Page 112: Cascading Style Sheets(CSS)

Setting Backgrounds using Setting Backgrounds using CSSCSS

• The background-position property is used to control the

position of an image in the background.

• The background-attachment property is used to control

the scrolling of an image in the background.

• The background property is used as shorthand to

specify a number of other background properties.

Page 113: Cascading Style Sheets(CSS)

Set the background color:-Set the background color:-•We can specifically declare a color for the background of an

element using the background-color property.

background-color: value;

•Possible values are:-

- color name

- hexadecimal number

- RGB color code

- transparent

•Example:-

<p style="background-color:yellow;"> This text has a yellow

background color. </p>

Page 114: Cascading Style Sheets(CSS)

Set the background image:-Set the background image:-

•We can set an image for the background of an element using

the background-image property.

background-image: url(path_to_image);

•Possible Values are:-

- url

- none

Page 115: Cascading Style Sheets(CSS)

Repeat the background image:- Repeat the background image:- •We can set if an image set as a background of an element is to

repeat(across=x and/or down=y) if image is small, using the

background-repeat property.

background-repeat: value;

• possible values are:-

- repeat

- repeat-x | repeat-y

• We can use no-repeat value for background-repeat property if

you don't want to repeat an image, in this case image will

display only once.

Page 116: Cascading Style Sheets(CSS)

Set the background image Set the background image position: position:

• We can position an image used for the background of an

element using the background-position property.

background-position: value;

•Possible values are:-

- top left | top center | top right

- center | leftcenter | centercenter

- rightbottom | leftbottom | centerbottom

- rightx-% y-%

- x-pos y-pos

Page 117: Cascading Style Sheets(CSS)

Set the background Set the background attachment:-attachment:-

•If we are using an image as a background. We can set whether

the background scrolls with the page or is fixed when the user

scrolls down the page with the background-attachment

property

background-attachment: value;

• Possible values are:-

- fixed

- scroll

Page 118: Cascading Style Sheets(CSS)

Set the background property:-Set the background property:-•We can style the background of an element in one declaration

with the background property.

background: #ffffff url(path_to_image) top left

no-repeat fixed;

• Possible Values:-

- attachment

- color

- image

- position

- repeat

Page 119: Cascading Style Sheets(CSS)

CSS – ImagesCSS – Images

Page 120: Cascading Style Sheets(CSS)

CSS – ImagesCSS – Images

We can set following image properties using CSS.:-

• The border property is used to set the width of an

image border.

• The height property is used to set the height of an

image.

• The width property is used to set the width of an

image.

• The -moz-opacity property is used to set the opacity

of an image.

Page 121: Cascading Style Sheets(CSS)

The image border Property:-The image border Property:-•The border property of an image is used to set the width of an

image border.

•This property can have a value in length or in %.

• A width of zero pixels means no border.

• Example:-

<img style="border:0px;" src="/images/css.gif" /> <br>

<img style="border:3px dashed red;”

src="/images/css.gif" />

Page 122: Cascading Style Sheets(CSS)

The image height Property:-The image height Property:-•The height property of an image is used to set the height of an

image.

•This property can have a value in length or in %.

•While giving value in %, it applies it in respect of the box in

which an image is available.

•Example:-

<img style="border:1px solid red; height:100px;"

src="/images/css.gif" /> <br /> <img style="border:1px

solid red; height:50%;" src="/images/css.gif" />

Page 123: Cascading Style Sheets(CSS)

The image width Property:- The image width Property:- •The width property of an image is used to set the width of an

image.

•This property can have a value in length or in %.

•While giving value in %, it applies it in respect of the box in

which an image is available.

• Example:-

<img style="border:1px solid red; width:100px;"

src="/images/css.gif" /> <br /> <img style="border:1px

solid red; width:100%;" src="/images/css.gif" />

Page 124: Cascading Style Sheets(CSS)

The -moz-opacity Property:-The -moz-opacity Property:-• The -moz-opacity property of an image is used to set the

opacity of an image.

• This property is used to create a transparent image in

Mozilla.

•IE uses filter:alpha(opacity=x) to create transparent images.

• In Mozilla (-moz-opacity:x) x can be a value from 0.0 - 1.0.

A lower value makes the element more transparent (The same

things goes for the CSS3-valid syntax opacity:x).

• In IE (filter:alpha(opacity=x)) x can be a value from 0 - 100.

A lower value makes the element more transparent.

Page 125: Cascading Style Sheets(CSS)

CSS – Links CSS – Links

Page 126: Cascading Style Sheets(CSS)

CSS – Links CSS – Links We can set different properties of a hyper link using CSS:-

• The :link Signifies unvisited hyperlinks.

• The :visited Signifies visited hyperlinks.

• The :hover Signifies an element that currently has the

user's mouse pointer hovering over it.

• The :focus like :hover, but this one is for users that are

not using a mouse and are tabbing through the links via

there keyboards tab key, it sets the color a link changes

to as the user tabs through the links

• The :active Signifies an element on which the user is

currently clicking.

Page 127: Cascading Style Sheets(CSS)

CSS – Links CSS – Links •Usually these all properties are kept in the header part of HTML document.

• a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.

•Also, a:active MUST come after a:hover in the CSS definition as follows.:-

<style type="text/css">

a:link {color: #000000;}

a:visited {color: #006600;}

a:hover {color: #FFCC00;}

a:active {color: #FF00CC;}

</style>

Page 128: Cascading Style Sheets(CSS)

Set the color of Links:-Set the color of Links:-• To set the link color, use a:link

• Example :-

<style type="text/css">

a:link {color:#000000}

</style>

<a href="/html/index.html“>Black Link</a>

Page 129: Cascading Style Sheets(CSS)

Set the color of Visited Links:- Set the color of Visited Links:-

• To set the color of visited links, use a:visited

• Example:-

<style type="text/css">

a:visited {color: #006600}

</style>

<a href="/html/index.html">Click this link</a>

- Once you will click this link, it will change its color to

green.

Page 130: Cascading Style Sheets(CSS)

Change the color of links when Change the color of links when mouse is over:-mouse is over:-

•To change the color of links when we bring a mouse pointer

over that link, use a:hover

•Example:-

<style type="text/css">

a:hover {color: #FFCC00}

</style>

<a href="/html/index.html">Bring Mouse Here</a>

- Now you bring your mouse over this link and you will see

that it changes its color to yellow.

Page 131: Cascading Style Sheets(CSS)

Change the color of active Change the color of active links:-links:-

• To change the color of active links, use a:active

• Example:-

<style type="text/css">

a:active {color: #FF00CC;}

</style>

<a href="/html/index.htm">Click This Link</a>

- This will change it color to pink when user clicks it.

Page 132: Cascading Style Sheets(CSS)

CSS – TablesCSS – Tables

Page 133: Cascading Style Sheets(CSS)

CSS – TablesCSS – TablesWe can set following properties of a table:-

• The border-collapse Specifies whether the browser

should control the appearance of adjacent borders.

• The border-spacing Specifies the width that should

appear between table cells.

• The caption-side property is to control the placement of

the table caption.

• The table-layout Allows browsers to speed up layout of

a table.

Page 134: Cascading Style Sheets(CSS)

The border-collapse Property:-The border-collapse Property:-•Specifies whether the browser should control the appearance

of adjacent borders.

•This property can have two values collapse and separate.

• collapse- the appearance of adjacent borders that touch each

other

• separate - each cell should maintain its style.

• Format:-

border-collapse: collapse;

border- collapse: separate;

Page 135: Cascading Style Sheets(CSS)

The border-spacing Property:-The border-spacing Property:-•The border-spacing property specifies the distance that

separates adjacent cells borders.

•It can take either one or two values; these should be units of

length.

•If we provide one value it will applies to both vertical and

horizontal borders

• If we specify two values, the first refers to the horizontal

spacing and the second to the vertical spacing

• Format:-

border-spacing:10px;

border-spacing:10px; 15px;

Page 136: Cascading Style Sheets(CSS)

The caption-side Property:-The caption-side Property:-

• We use the caption-side property to control the placement of

the table caption.

• The caption-side property allows us to specify where the

content of a <caption> element should be placed in

relationship to the table.

• The table that follows lists the possible values :-

- top | bottom

- left | right.

Page 137: Cascading Style Sheets(CSS)

The empty-cells Property:-The empty-cells Property:-

• The empty-cells property indicates whether a cell without

any content should have a border displayed.

empty- cells: value;

•This property can have one of the three values:-

- show

- hide

- inherit.

Page 138: Cascading Style Sheets(CSS)

The table-layout Property:- The table-layout Property:-

• The table-layout property is supposed to help you control

how a browser should render or lay out a table.

•This property can have one of the three values :-

- fixed

- auto

- inherit.

•This property is not supported by many browsers so do not

rely on this property.

Page 139: Cascading Style Sheets(CSS)

CSS for Page LayoutCSS for Page Layout

Page 140: Cascading Style Sheets(CSS)

CSS for Page LayoutCSS for Page Layout• All HTML elements can be considered as boxes. In CSS, the

term "box model" is used when talking about design and layout.

• The CSS box model is essentially a box that wraps around

HTML elements, and it consists of:-

- margins

- borders

- padding

- the actual content.

• The box model allows us to place a border around elements and

space elements in relation to other elements.

Page 141: Cascading Style Sheets(CSS)

CSS for Page LayoutCSS for Page Layout

I appreciate the prompt delivery of

the pack of star disks.

bordermarginpadding

Page 142: Cascading Style Sheets(CSS)

CSS – MarginsCSS – Margins

Page 143: Cascading Style Sheets(CSS)

CSS – MarginsCSS – Margins• The margin property defines the space around an HTML

element.

• It is possible to use negative values to overlap content.

• The values of the margin property are not inherited by child

elements.

• The adjacent vertical margins (top and bottom margins) will

collapse into each other so that the distance between the

blocks is not the sum of the margins, but only the greater of

the two margins or the same size as one margin if both are

equal..

Page 144: Cascading Style Sheets(CSS)

CSS – MarginsCSS – MarginsThere are following four properties to set an element margin:-

• The margin A shorthand property for setting the margin

properties in one declaration.

• The margin-bottom Specifies the bottom margin of an

element.

• The margin-top Specifies the top margin of an element.

• The margin-left Specifies the left margin of an element.

• The margin-right Specifies the right margin of an

element

Page 145: Cascading Style Sheets(CSS)

The margin Property:-The margin Property:-

• The margin property allows you set all of the properties for

the four margins in one declaration.

• Format :-

margin: value;

• Possible values are:-

- length

- percentage

- auto

Page 146: Cascading Style Sheets(CSS)

The margin Property:-The margin Property:-• We can also declare all the margins of an element in a single property

as follows:-

margin: 10px 10px 10px 10px;

The order of values as follows:-

1. top 2. right 3. bottom 4. left

• If only one value is declared, it sets the margin on all sides.

margin: 10px;

•If you only declare two or three values, the undeclared values are

taken from the opposing side.

margin: 10px 10px; /* 2 values */

margin: 10px 10px 10px; /* 3 values */

Page 147: Cascading Style Sheets(CSS)

The margin Property:-The margin Property:-• We can set the margin property to negative values. If you

do not declare the margin value of an element, the margin is

0 (zero).

margin: -10px;

• Elements like paragraphs have default margins in some

browsers, to combat this set the margin to 0 (zero).

p {margin: 0;}

• We do not have to add px (pixels) or whatever units you

use, if the value is 0 (zero).

Page 148: Cascading Style Sheets(CSS)

The margin-bottom Property:- The margin-bottom Property:- • The margin-bottom property allows you set bottom margin of

an element.

• It can have a value in length, % or auto.

• Format:-

margin-bottom: value;

• Example:-

<p style="margin-bottom: 15px; border:1px solid

black;">

This is a paragraph with a specified bottom margin</p>

Page 149: Cascading Style Sheets(CSS)

The margin-top Property:-The margin-top Property:-• The margin-top property allows you set top margin of an

element.

•It can have a value in length, % or auto.

• Format:-

margin-top: value;

• Example:-

<p style="margin-top: 5%; border:1px solid black;">

This is a paragraph with a specified top margin in

percent </p>

Page 150: Cascading Style Sheets(CSS)

The margin-left Property:-The margin-left Property:-•The margin-left property allows you set left margin of an

element.

•It can have a value in length, % or auto.

•Format:-

margin-left: value;

• Example:-

<p style="margin-left: 15px; border:1px solid

black;">

This is a paragraph with a specified left margin</p>

Page 151: Cascading Style Sheets(CSS)

The margin-right Property:- The margin-right Property:- •The margin-right property allows you set right margin of an

element.

•It can have a value in length, % or auto.

•Format:-

margin-right: value;

• Example:-

<p style="margin-right: 15px; border:1px solid

black;">

This is a paragraph with a specified right margin</p>

Page 152: Cascading Style Sheets(CSS)

CSS – BordersCSS – Borders

Page 153: Cascading Style Sheets(CSS)

CSS – BordersCSS – Borders•The border properties allow you to specify how the border

of the box representing an element should look.

border: value;

• There are three possibilities of values we can change:-

- The border-color Specifies the color of a border.

- The border-style Specifies whether a border should

be solid, dashed line, double line, or one of the

other possible values.

- The border-width Specifies the width of a border.

Page 154: Cascading Style Sheets(CSS)

The border-color Property:-The border-color Property:-

• We can set the color of a border independently with the

border-color property.

border-color: value;

• Possible Values are:-

- color name

- hexadecimal number

- RGB color code

- transparent

Page 155: Cascading Style Sheets(CSS)

The border-color Property:-The border-color Property:-• The border-color property allows you to change the color of

the border surrounding an element.

• We can individually change the color of the bottom, left, top

and right sides of an element's border using the properties:-

- border-bottom-color changes the color of bottom

border.

- border-top-color changes the color of top border.

- border-left-color changes the color of left border.

- border-right-color changes the color of right

border.

Page 156: Cascading Style Sheets(CSS)

The border-style Property:- The border-style Property:- • We can set the style of a border independently with the border-style property.

border-style: value;

• Possible values are:-

- none: No border. (Equivalent of border-width:0;)

- solid: Border is a single solid line.

- dotted: Border is a series of dots.

- dashed: Border is a series of short lines.

- double: Border is two solid lines.

- groove: Border looks as though it is carved into the page.

- ridge: Border looks the opposite of groove.

- inset: Border makes the box look like it is embedded in the page.

- outset: Border makes the box look like it is coming out of the canvas.

- hidden: Same as none, except in terms of border-conflict resolution for table elements.

Page 157: Cascading Style Sheets(CSS)

The border-style Property:- The border-style Property:-

• We can individually change the style of the bottom, left,

top, and right borders of an element using following

properties:-

- border-bottom-style changes the style of bottom

border.

- border-top-style changes the style of top border.

- border-left-style changes the style of left border.

- border-right-style changes the style of right border.

Page 158: Cascading Style Sheets(CSS)

The border-width Property:-The border-width Property:-

• The border-width property allows us to set the width of an

element borders.

border-width: value;

• The value of this property could be:-

- a length in px, pt or cm

- thin

- medium

- thick.

Page 159: Cascading Style Sheets(CSS)

The border-width Property:-The border-width Property:-

• We can individually change the width of the bottom, top,

left, and right borders of an element as:-

- border-bottom-width changes the width of bottom

border.

- border-top-width changes the width of top border.

- border-left-width changes the width of left border.

- border-right-width changes the width of right

border.

Page 160: Cascading Style Sheets(CSS)

CSS – PaddingsCSS – Paddings

• The padding property allows you to specify how much space

should appear between the content of an element and its border:

padding: value;

•The value of this attribute should be either

- a length

- a percentage

- the word inherit.

•If the value is inherit it will have the same padding as its parent

element.

•If a percentage is used, the percentage is of the containing box.

Page 161: Cascading Style Sheets(CSS)

CSS – PaddingsCSS – Paddings• We can also set different values for the padding on each side of the

box using the following properties:-

- The padding-bottom Specifies the bottom padding of an

element.

- The padding-top Specifies the top padding of an element.

- The padding-left Specifies the left padding of an element.

- The padding-right Specifies the right padding of an

element.

- The padding Serves as shorthand for the preceding

properties.

Page 162: Cascading Style Sheets(CSS)

CSS - Lists CSS - Lists

Page 163: Cascading Style Sheets(CSS)

CSS - Lists CSS - Lists • Lists are very helpful in conveying a set of either numbered or bulleted points. • There are following five CSS properties which can be used to control lists:-

- The list-style-type Allows you to control the shape or

appearance of the marker.

- The list-style-position Specifies whether a long point that wraps

to a second line should align with the first line or start underneath the start

of the marker.

- The list-style-image Specifies an image for the marker rather

than a bullet point or number.

- The list-style Serves as shorthand for the preceding properties.

- The marker-offset Specifies the distance between a marker and

the text in the list.

Page 164: Cascading Style Sheets(CSS)

The list-style-type Property:-The list-style-type Property:-•This allows us to control the shape or style of bullet point

(also known as a marker) in the case of unordered lists, and

the style of numbering characters in ordered lists.

• Format:- list-style-type: value;

• The values which can be used for an unordered list: -

Value Description

none NA

disc (default) A filled-in circle

circle An empty circle

square A filled-in square

Page 165: Cascading Style Sheets(CSS)

The list-style-type Property:-The list-style-type Property:-• The values which can be used for an ordered list: -

Value Description Example

decimal Number 1,2,3,4,5

decimal-leading-zero 0 before the number 01, 02, 03, 04, 05

lower-alpha Lowercase alphanumeric characters

a, b, c, d, e

upper-alpha Uppercase alphanumeric characters

A, B, C, D, E

lower-roman Lowercase Roman numerals

i, ii, iii, iv, v

upper-roman Uppercase Roman numerals

I, II, III, IV, V

Page 166: Cascading Style Sheets(CSS)

The list-style-position Property: The list-style-position Property: • The list-style-position property indicates whether the marker

should appear inside or outside of the box containing the bullet

points.

• Format:- list-style-position: value;

•It can have one the two values:-Value Description

none NA

inside

If the text goes onto a second line, the text will wrap underneath the marker. It will also appear indented to where the text would have started if the list had a value of outside.

outside If the text goes onto a second line, the text will be aligned with the start of the first line (to the right of the bullet).

Page 167: Cascading Style Sheets(CSS)

The list-style-image Property:- The list-style-image Property:-

• The list-style-image allows us to specify an image so that

you can use your own bullet style.

• The syntax is as follows, similar to the background-image

property with the letters url starting the value of the property

followed by the URL in brackets.

list-style-image: url(path_to_image.gif, jpg or

png);

•If it does not find given image then default bullets are used.

Page 168: Cascading Style Sheets(CSS)

The list-style Property:- The list-style Property:-

• The list-style allows you to specify all the list properties

into a single expression.

•These properties can appear in any order.

• Format :-

list-style: value value;

- values can be any of the list-style-type, list-style-position,

list-style-image properties.

Page 169: Cascading Style Sheets(CSS)

The marker-offset Property:-The marker-offset Property:-

• The marker-offset property allows you to specify the

distance between the marker and the text relating to that

marker.

• Format :-

marker- offset: value;

- Its value should be a length.

• This property is not supported in IE 6 or Netscape 7.

Page 170: Cascading Style Sheets(CSS)

CSS – Cursors CSS – Cursors

Page 171: Cascading Style Sheets(CSS)

CSS – Cursors CSS – Cursors • The cursor property of CSS allows you to specify the type of

cursor that should be displayed to the user.

cursor: value;

•One good usage of this property is in using images for submit

buttons on forms.

•By default, when a cursor hovers over a link, the cursor changed

from a pointer to a hand.

• For a submit button on a form this does not happen. Therefore,

using the cursor property to change the cursor to a hand

whenever someone hovers over an image that is a submit button.

•This provides a visual clue that they can click it.

Page 172: Cascading Style Sheets(CSS)

CSS – Cursors CSS – Cursors • The possible values for the cursor property:-

- auto - Shape of the cursor depends on the context area

it is over. For example an I over text, a hand

over a link, and so on...

- crosshair - A crosshair or plus sign

- default - An arrow

- pointer - A pointing hand (in IE 4 this value is hand)

- move - The I bar

- e-resize - The cursor indicates that an edge of a box is to

be moved right (east)

Page 173: Cascading Style Sheets(CSS)

CSS – Cursors CSS – Cursors

- ne-resize - The cursor indicates that an edge of a box is to

be moved up and right (north/east)

- nw- resize - The cursor indicates that an edge of a box is

to be moved up and left (north/west)

- text - The I bar

- wait - An hour glass

- help - A question mark or balloon, ideal for use over help buttons

- <url> - The source of a cursor image file

Page 174: Cascading Style Sheets(CSS)

DisplayDisplay

Page 175: Cascading Style Sheets(CSS)

DisplayDisplay• We can control how an element is displayed with the

display property :-

display: value;

• Possible Values are:-

- block - Creates a line break before and after the

element

- inline - No line break is created

- list-item - Creates a line break before and after the

element and adds a list item

marker

- none - Makes an element not display on the page

Page 176: Cascading Style Sheets(CSS)

Limitations of CSSLimitations of CSS

Page 177: Cascading Style Sheets(CSS)

Limitations Limitations • Poor controls for flexible layouts

• Selectors are unable to ascend

• Vertical control limitations 

• Absence of expressions 

• Lack of column declaration

• Cannot explicitly declare new scope independently of

position

• Pseudo-class dynamic behavior not controllable 

• Cannot name rules 

• Cannot include styles from a rule into another rule

Page 178: Cascading Style Sheets(CSS)
Page 179: Cascading Style Sheets(CSS)