[go: up one dir, main page]
Scribd
Upload
21 views21 pages

Web Notes Unit 2 - Modified

Uploaded by

MANJUNATH K B
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
21 views21 pages

Web Notes Unit 2 - Modified

Uploaded by

MANJUNATH K B
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

UNIT 2 CASCADING STYLE SHEETS (CSS) Web Designing BCA III Sem

XHTML style sheets are called cascading style sheets because they can be defined at three different levels to
specify the style of a document. Lower level style sheets can override higher level style sheets, so the style of the
content of a tag is determined, in effect, through a cascade of style-sheet applications.

Cascading Style Sheets (CSS) describe how documents are presented on screens, in print, or perhaps how they
are pronounced. W3C has actively promoted the use of style sheets on the Web since the consortium was founded
in 1994. Cascading Style Sheets (CSS) provide easy and effective alternatives to specify various attributes for the
HTML tags. Using CSS, you can specify a number of style properties for a given HTML element. Each property
has a name and a value, separated by a colon (:). Each property declaration is separated by a semi-colon (;).

You can use CSS in three ways in your HTML document −

• External Style Sheet − Define style sheet rules in a separate .css file and then include that file in your
HTML document using HTML <link> tag.
• Internal Style Sheet − Define style sheet rules in header section of the HTML document using <style>
tag.
• Inline Style Sheet − Define style sheet rules directly along-with the HTML elements using style attribute.

LEVELS OF STYLE SHEETS


▪ The three levels of style sheets, in order from lowest level to highest level, are inline, document level, and
external.
▪ Inline style sheets apply to the content of a single XHTML element.
▪ Document-level style sheets apply to the whole body of a document.
▪ External style sheets can apply to the bodies of any number of documents. Inline Style Sheet
Inline style sheets have precedence over document style sheets, which have precedence over external style
sheets. Inline style specifications appear within the opening tag and apply only to the content of that tag. You
can apply style sheet rules directly to any HTML element using style attribute of the relevant tag. This
should be done only when you are interested to make a particular change in any HTML element only. Rules
defined inline with the element overrides the rules defined in an external CSS file as well as the rules defined
in <style> element.
Example of Inline style sheet
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style = "color:red;">This is red</p>
<p style = "font-size:20px;">This is
thick</p>
<p style = "color:green;">This is green</p>
<p style = "color:green;font-size:20px;">
This is thick and green</p>
</body>
</html>
Internal Style Sheet (Document level or Embedded)

If you want to apply Style Sheet rules to a single document only, then you can include those rules in header section
of the HTML document using <style> tag. Rules defined in internal style sheet overrides the rules defined in an
external CSS file

S.G.T College, Bellary. 1


UNIT 2 CASCADING STYLE SHEETS (CSS) Web Designing BCA I Sem NEP
Document-level style(Embedded or internal) specifications appear in the document head section and apply to
the entire body of the document.

Example of Document-level style sheet


<html>
<head>
<title>HTML Internal CSS</title>

<style type = "text/css">


.red { color: red; }
.thick{ font-size:20px; }
.green { color:green; }
</style>
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is
green</p>
<p class = "thick green">This is
thick and green</p>
</body>
</html>

External Style Sheet

▪ External style sheets stored separately and are referenced in all documents that use them.
▪ External style sheets are written as text files with the MIME type text/css.
▪ They can be stored on any computer on the Web. The browser fetches external style sheets just as it fetches
documents.
▪ The <link> tag is used to specify external style sheets. Within <link>, the rel attribute is used to specify
the relationship of the linked-to document to the document in which the link appears. The href attribute
of <link> is
used to specify
the URL of the
style sheet
document.
Example:
“style.css” file

.red { color: red;


}
.thick { font-
size:20px;
}
.green {
color:green;
}
Externalstyle.html
<html>
<head>
<title>HTML External CSS</title>

From the desk of Roopa R, S.G.T College, Bellary. 2


UNIT 2 CASCADING STYLE SHEETS (CSS) Web Designing BCA III Sem
<link rel = "stylesheet" type = "text/css"
href = "style.css">
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
</html>
STYLE SPECIFICATION FORMATS Inline
Style Specification:
Style = “Property1 : Value1; Property2 : Value2; Property3 : Value3; ............... Property_n : Value_n;”
Document Style Specification
<style type = “text/css”> Rule list </style>

Each style rule in a rule list has two parts: a selector, which indicates the tag or tags affected by the rule, and a list of
property–value pairs. The list has the same form as the quoted list for inline style sheets, except that it is delimited by
braces rather than double quotes. So, the form of a style rule is as follows:

Selector { Property1 : Value1; Property2 : Value2; Property3 : Value3; ................... Property_n : Value_n; }
SELECTOR FORMS
1. Simple Selector Forms
In case of simple selector, a tag is used. If the properties of the tag are changed, then it reflects at all the places when
used in the program. The selector can be any tag. If the new properties for a tag are not mentioned within the rule list,
then the browser uses default behavior of a tag.
<html>
<head>
<title>Sample CSS</title>
<style type = "text/css"> p { font-family: 'Lucida Handwriting'; font-
size: 50pt; color: Red; } </style>
</head>
<body>
<p>Sample paragraph 1</p>
<p>Sample paragraph 2</p>
<p>Sample paragraph 3</p>
</body>
</html>

S.G.T College, Bellary. 3


UNIT 2 CASCADING STYLE SHEETS (CSS) Web Designing BCA I Sem NEP
2. Class Selectors
In class selector, it is possible to give different properties for different elements <html>
<head>
<title>Sample CSS</title>
<style type = "text/css">
p.one { font-family: 'Lucida Handwriting'; font-size: 25pt; color: Red; }
p.two { font-family: 'Monotype Corsiva'; font-size: 50pt; color: green; } </style>
</head>
<body>
<p class = "one">This is paragraph 1 to test internal style sheet</p>
<p class = "two"> This is paragraph 2 to test internal style sheet </p> </body>
</html>

3. Generic Selectors
In case of generic selector, when the class is created, it would not be associated to any particular tag. In other words,
it is generic in nature.
<html>
<head>
<title>Sample CSS</title>
<style type = "text/css">
.one { font-family: 'Monotype Corsiva'; color: blue; }
</style>
</head>
<body>
<p class = "one">This is paragraph 1 to test Generic selector</p>
<h1 class = "one">This is heading 1</h1>
<h6 class = "one">This is heading 6</h6>
</body>
</html>

From the desk of Roopa R, S.G.T College, Bellary. 4


UNIT 2 CASCADING STYLE SHEETS (CSS) Web Designing BCA III Sem

4. id Selectors
An id selector allows the application of a style to one specific element.
<html>
<head>
<title>Sample CSS</title>
<style type = "text/css">

S.G.T College, Bellary. 5


UNIT 2 CASCADING STYLE SHEETS (CSS) Web Designing BCA I Sem NEP
#one { font-family: 'lucida calligraphy'; color: magenta; }
#two { font-family: 'comic sans ms'; color: red; }
</style>
</head>
<body>
<p id = "two">This is a paragraph</p>
<h1 id = "one">This is heading 1</h1>
</body>
</html>

5. Universal Selectors
The universal selector, denoted by an asterisk (*), applies its style to all elements in a document. <html>
<head>
<title>Sample CSS</title>
<style type = "text/css">
* { font-family: 'lucida calligraphy'; color: purple; }
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3> <p>This
is a paragraph</p>
UNIT 2 CASCADING STYLE SHEETS (CSS)
</body>
</html>

From the desk of Roopa R, S.G.T College, Bellary. 5


6. Pseudo Classes
Pseudo class selectors are used if the properties are to be changed dynamically. For example: when mouse movement
happens, in other words, hover happens or focus happens.
<html>
<head>
<title>Sample CSS</title> <style type =
"text/css"> input:focus { font-family: 'lucida
calligraphy';
color: purple; font-size:100; }
input:hover { font-family: 'lucida handwriting'; color:
violet; font-size:40; }
</style>
</head>
<body>
<form action = " ">
<p>
<label> NAME: <input type = "text" /></label> </p>
</form>
</body>
</html>
UNIT 2 CASCADING STYLE SHEETS (CSS) Web Designing BCA I Sem NEP

PROPERTY VALUE FORMS


CSS includes 60 different properties in seven categories: fonts, lists, alignment of text, margins, colours,
backgrounds, and borders. Property values can appear in a variety of forms.

▪ Keyword property values are used when there are only a few possible values and they are predefined. ▪ A
number value can be either an integer or a sequence of digits with a decimal point and can be preceded by a
sign (+ or -).
▪ Length values are specified as number values that are followed immediately by a two-character abbreviation
of a unit name. The possible unit names are px, for pixels; in, for inches; cm, for centimeters; mm, for
millimeters; pt, for points.
▪ Percentage values are used to provide a measure that is relative to the previously used measure for a
property value. Percentage values are numbers that are followed immediately by a percent sign
(%).Percentage values can be signed. If preceded by a plus sign, the percentage is added to the previous value;
if negative, the percentage is subtracted.
▪ There can be no space between url and the left parenthesis.
▪ Color property values can be specified as color names, as six-digit hexadecimal numbers, or in RGB form.

From the desk of Roopa R, S.G.T College, Bellary. 6 Web Designing BCA I Sem NEP
RGB form is just the word rgb followed by a parenthesized list of three numbers that specify the levels of red,
green, and blue, respectively. The RGB values can be given either as decimal numbers between 0 and 255 or as
percentages. Hexadecimal numbers must be preceded with pound signs (#), as in #43AF00. FONT PROPERTIES
Font Families
The font-family property is used to specify a list of font names. The browser uses the first font in the list
that it supports. For example, the property:
font-family: Arial, Helvetica, Futura tells the browser to use Arial if it supports that font. If not, it will use
Helvetica if it supports it. If the browser supports neither Arial nor Helvetica, it will use Futura if it can. If the
browser does not support any of the specified fonts, it will use an alternative of its choosing. If a font name has
more than one word, the whole name should be delimited by single quotes, as in the following example:
UNIT 2 CASCADING STYLE SHEETS (CSS)
font-family: ‘Times New Roman’ Font
Sizes
The font-size property does what its name implies. For example, the following property specification sets
the font size for text to 10 points: font-size: 10pt
Many relative font-size values are defined, including xx-small, x-small, small, medium, large, x-
large, and xx-large. In addition, smaller or larger can be specified. Furthermore, the value can be a
percentage relative to the current font size. Font Variants
The default value of the font-variant property is normal, which specifies the usual character font. This
property can be set to small-caps to specify small capital characters. These characters are all uppercase, but
the letters that are normally uppercase are somewhat larger than those that are normally lowercase.
Font Styles
The font-style property is most commonly used to specify italic, as in font-style: italic
Font Weights
The font-weight property is used to specify the degree of boldness, as in font-weight: bold Besides bold,
the values normal, bolder, and lighter can be specified. Specific numbers also can be given in multiples of
100 from 100 to 900, where 400 is the same as normal and 700 is the same as bold. Font Shorthands:
If more than one font property must be specified, the values can be stated in a list as the value of the font property.
The order in which the property values are given in a font value list is important. The order must be as follows: The
font names must be last, the font size must be second to last, and the font style, font variant, and font weight, when
they are included, can be in any order but must precede the font size and font names. font: bold 14pt ‘Times New
Roman’
<html>
<head>
<title>Font Properties</title>
<style type = "text/css">
p.one { font-family: 'lucida calligraphy'; font-weight: bold; font-size:75pt; color: purple; }
h1.two { font-family: 'cambria'; color: violet; font-style: italics; } p.three { font: small-
caps italic bold 50pt 'times new roman' } </style>
</head>
<body>
<p class = "one">Paragraph used to test style sheet</p>
<h1 class = "two">This is heading 1</h1>
<p class = "three">This is paragraph</p>
</body>
</html>

From the desk of Roopa R, S.G.T College, Bellary. 7


UNIT 2 CASCADING STYLE SHEETS (CSS) Web Designing BCA I Sem NEP

Text Decoration
The text-decoration property is used to specify some special features of text. The available values are line-
through, overline, underline, and none, which is the default.
<html>
<head>
<title>Text Decoration</title>
<style type = "text/css"> h1.one {text-
decoration: line-through;} h1.two
{text-decoration: overline;} h1.three
{text-decoration: underline;}
</style>
</head>
<body>
<h1 class = "one">This is heading 1</h1>
<p>[This is line-through]</p><br/>
<h1 class = "two">This is heading 1 with overline </h1>
<p>[This is overline]</p><br/>
<h1 class = "three">This is heading 1 with underline</h1>
<p>[This is underline]</p><br/>

</body> </html>

LIST PROPERTIES

From the desk of Roopa R, S.G.T College, Bellary. 10


UNIT 2 CASCADING STYLE SHEETS (CSS) Web Designing BCA I Sem NEP

Two presentation details of lists can be specified in XHTML documents: the shape of the bullets that precede the items
in an unordered list and the sequencing values that precede the items in an ordered list. The list-style- type
property is used to specify both of these. The list-style-type property of an unordered list can be set to disc,
circle, square, or none.
<html>
<head>
<title>CSS Bullets</title>
<style type = "text/css"> li.one
{list-style-type:disc}
li.two{list-style-type:square}
li.three{list-style-type:circle}
</style>
</head>
<body>
<h3>South Indian Kings</h3>
<ul>
<li class = "one"> Option 1</li>
<li class = "two"> Option 2</li>
<li class = "three"> Option 3</li>
</ul>

</body>
</html>

Bullets in unordered lists are not limited to discs, squares, and circles. Any image can be used in a list item bullet.
Such a bullet is specified with the list-style-image property, whose value is specified with the url form.
<html>
<head>
<title>CSS Bullets-Image</title>
<style type = "text/css"> li.image {list-style-image:
url(bullet.png); font-size:25pt;}
</style>
</head>
<body>
<h1>South Indian Kings</h1>
<ul>

From the desk of Roopa R, S.G.T College, Bellary. 11


UNIT 2 CASCADING STYLE SHEETS (CSS) Web Designing BCA I Sem NEP

<li class = "image"> Data one</li>


<li class = "image"> Data two</li>
<li class = "image"> Data three</li>
</ul>
</body>
</html>

The following example illustrates the use of different sequence value types in nested lists: <html>
<head>
<title> CSS nested lists </title>
<style type = "text/css"> ol {list-
style-type:upper-roman;} ol ol
{list-style-type:upper-alpha;} ol
ol ol {list-style-type:decimal;}
</style>
</head>
<body>
<ol>
<li> Information Science </li>
<ol>
<li>OOMD</li>
<li>Java & J2ee</li>
<ol>
<li>classes and methods</li>
<li>exceptions</li>
<li>applets</li>
<li>servelets</li>
</ol>
<li>Computer Networks</li>
<ol>
<li>Part 1</li>

From the desk of Roopa R, S.G.T College, Bellary. 12


UNIT 2 CASCADING STYLE SHEETS (CSS) Web Designing BCA I Sem NEP

<li>Part 2</li>
</ol>
<li>DBMS</li>
<li>Operations Research</li>
</ol>
<li> Computer Science</li>
<ol>
<li>Compiler Design</li>
<li>FLAT</li>
<ol>
<li>NFA</li>
<li>DFA</li>
<li>CFG</li>
</ol>
<li>Computer Graphics</li>
<li>Artificial Intelligence</li>
</ol>
</ol>

</html>
COLOR
Color Groups
Three levels of collections of colours might be used by an XHTML document. The smallest useful set of colours
includes only those that have standard names and are guaranteed to be correctly displayable by all browsers on
all color monitors. This collection of 17 colours is called the named colours.

From the desk of Roopa R, S.G.T College, Bellary. 13


UNIT 2 CASCADING STYLE SHEETS (CSS) Web Designing BCA I Sem NEP

Larger set of colors, called the Web palette, consists of 216 colors. The colors of the Web palette can be viewed at
http://www.web-source.net/216_color_chart.htm
Color Properties
The color property is used to specify the foreground color of XHTML elements. <html>
<head>
<title>Colours</title> <style
type = "text/css">
p.one {color: pink; }
p.two {color: # 9900FF;}
p.three {background-color:#99FF00;}
</style>
</head>
<body>
<p class = "one">This is paragraph 1</p>
<p class = "two">This is paragraph 2</p>
<p class = "three">This is paragraph 3</p>
</body>
</html>

ALIGNMENT OF TEXT
▪ The text-indent property can be used to indent the first line of a paragraph. This property takes
either a length or a percentage value. The text-align property, for which the possible keyword values are left,
center, right, and justify, is used to arrange text horizontally.
▪ The float property is used to specify that text should flow around some element, often an image or a
table. The possible values for float are left, right, and none, which is the default. <html>
<head>
<title>Text Alignment</title>
<style type = "text/css">
h1.one {text-align: center}
p.two {text-indent: 0.5in; text-align: justify;} img{float:center}
</style>
</head>
<body>

From the desk of Roopa R, S.G.T College, Bellary. 14


UNIT 2 CASCADING STYLE SHEETS (CSS) Web Designing BCA I Sem NEP

<h1 class = "one">History about


Computers</h1> <p> <img src = "computer.png"
alt="error"/> </p> <p class = "two">
The first computers were used primarily for numerical calculations. However, as any information can be
numerically encoded, people soon realized that computers are capable of general-purpose information processing.
Their capacity to handle large amounts of data has extended the range and accuracy of weather forecasting. Their
speed has allowed them to make decisions about routing telephone connections through a network and to control
mechanical systems such as automobiles, nuclear reactors, and robotic surgical tools. They are also cheap enough
to be embedded in everyday appliances and to make clothes dryers and rice cookers “smart.” Computers have
allowed us to pose and answer questions that could not be pursued before. These questions might be about DNA
sequences in genes, patterns of activity in a consumer market, or all the uses of a word in texts that have been
stored in a database. Increasingly, computers can also learn and adapt as they operate. </p>
</body>
</html>

THE BOX MODEL


• On a given web page or a document, all the elements can have borders.
• The borders have various styles, color and width.
• The amount of space between the content of the element and its border is known as padding.
• The space between border and adjacent element is known as margin.
Borders:
Border-style
It can be dotted, dashed, double
Border-top-style, Border-bottom-style, Border-left-style,Border-right-style

Border-width
It can be thin, medium, thick or any length value
Border-top-width, Border-bottom-width, Border-left-width, Border-right-width

Border-color
Border-top-color, Border-bottom-color, Border-left-color, Border-right-color

From the desk of Roopa R, S.G.T College, Bellary. 15


UNIT 2 CASCADING STYLE SHEETS (CSS) Web Designing BCA I Sem NEP

<html>
<head>
<title> Table with border effects </title>
<style type = "text/css"> table { border-width:thick; border-top-color:red; border-left-color:orange;
border-bottom-color:violet; border-right-color:green; border-top-style:dashed;border-bottom-
style:double; border-right-style:dotted; } </style>
</head>
<body>
<table border = "border">
<caption>TULIPS</caption>
<tr>
<td> Tulips flower</td>
<td> <img src = "tulips.jpg" height=200 width=200 alt = "cant display"/></td>
</tr>
</table>
</body>
</html>

Margins and Padding: The margin properties are named margin, which applies to all four sides of an element:
margin-left, margin-right, margin-top, and margin-bottom. The padding properties are named

From the desk of Roopa R, S.G.T College, Bellary. 16


UNIT 2 CASCADING STYLE SHEETS (CSS) Web Designing BCA I Sem NEP

padding, which applies to all four sides: padding-left, padding-right, padding-top, and padding-
bottom.
<html>
<head>
<title> Margins and Padding </title>
<style type = "text/css">
p.one { margin:0.1in; padding:0.5in; background-color:#FF33FF; border-style:dotted; }
p.two { margin:0.5in; padding:0.1in; background-color:#00FF33; border-style:dashed; }
p.three {margin:0.3in; background-color:#FFFF00; }
p.four { padding:0.3in; background-color:#FF9900; }
</style>
</head>
<body>
<p class = "one"> This line is used for testing styles for indentation <br/> [margin=0.1in, padding=0.5in]
</p>
<p class = "two"> This line is used to check styles for margins and padding<br/> [margin=0.5in, padding=0.1in]
</p>
<p class = "three"> This line of text has no padding and no border<br/> [margin=0.3in, no padding, no border]
</p>
<p class = "four"> In this line we have padding but no marging and no border <br/> [no margin, padding=0.3in, no
border]
</p>
</body>
</html>

BACKGROUND IMAGES
The background-image property is used to place an image in the background of an element. <html>
<head>
<title>Background Image</title>

From the desk of Roopa R, S.G.T College, Bellary. 17


UNIT 2 CASCADING STYLE SHEETS (CSS) Web Designing BCA I Sem NEP

<style type = "text/css">


body {background-image:url(computer.jpg); background-repeat:repeat-x} p
{text-align: justify; color:white;font-size:25pt;}
</style>
</head>
<body>
<p> The first computers were used primarily for numerical calculations. However, as any information can be
numerically encoded, people soon realized that computers are capable of general-purpose information processing.
Their capacity to handle large amounts of data has extended the range and accuracy of weather forecasting. Their
speed has allowed them to make decisions about routing telephone connections through a network and to control
mechanical systems such as automobiles, nuclear reactors, and robotic surgical tools. They are also cheap enough
to be embedded in everyday appliances and to make clothes dryers and rice cookers “smart.” Computers have
allowed us to pose and answer questions that could not be pursued before. These questions might be about DNA
sequences in genes, patterns of activity in a consumer market, or all the uses of a word in texts that have been
stored in a database. Increasingly, computers can also learn and adapt as they operate.
</p>
</body>
</html>
In the example, notice that the background image is replicated as necessary to fill the area of the element. This
replication is called tiling. Tiling can be controlled with the background-repeat property, which can take the
value repeat (the default), no-repeat, repeat-x, or repeat-y. The no-repeat value specifies that just
one copy of the image is to be displayed. The repeat-x value means that the image is to be repeated
horizontally; repeat-y means that the image is to be repeated vertically.
In addition, the position of a non-repeated background image can be specified with the background-position
property, which can take a large number of different values. The keyword values are top, center, bottom, left,
and right, all of which can be used in many different combinations.

THE <span> AND <div> TAGS


In many situations, we want to apply special font properties to less than a whole paragraph of text. The <span> tag
is designed for just this purpose.
<html>

From the desk of Roopa R, S.G.T College, Bellary. 18


UNIT 2 CASCADING STYLE SHEETS (CSS) Web Designing BCA I Sem NEP

<head>
<title>span</title>
<style type = "text/css">
.spanviolet {font-size:25pt;font-family:'lucida calligraphy';color:violet;}
</style>
</head>
<body>
<p>Computer is an <span class = "spanviolet">electronic device </span>, that takes input, processes and displays the
output
</p>
</body>
</html>

It is more convenient, however, to be able to apply a style to a section of a document rather than to each paragraph.
This can be done with the <div> tag. As with <span>, there is no implied layout for the content of the <div> tag,
so its primary use is to specify presentation details for a section or division of a document. <html>
<head>
<title>demonstrating div tag</title>
<style type = "text/css">
.one {font-size:20pt;font-family:'lucida calligraphy'; color:green;}
.two {font-size:25pt;font-family:'comic sans ms'; color:blue;}
</style>
</head>
<body>
<div class = "one">
<p>Paragragh 1 under division 1</p>
<p>Paragragh 2 under division 1</p>
<p>Paragragh 3 under division 1</p>
</div>
<div class = "two">
<p>Paragragh 1 under division 2</p>
<p>Paragragh 2 under division 2</p>
<p>Paragragh 3 under division 2</p>
</div>
</body>
</html>

From the desk of Roopa R, S.G.T College, Bellary. 19


UNIT 2 CASCADING STYLE SHEETS (CSS) Web Designing BCA I Sem NEP

CONFLICT RESOLUTION

➢ Sometimes on a web page, there can be two different values for the same property on the same element leading
to conflict. h3 {color: blue;} body h3 {color: red;}
➢ The browser has to resolve this conflict.
➢ There can be one or more type of conflict: i.e. when style sheets at 2 or more levels specify different value for
same property on some element.
➢ This conflict is resolved by providing priority to the different levels of style sheets.
➢ The inline level gets the highest priority over the document level.
The document level gets the higher priority over the external level
➢ But the browser must be able to resolve the conflict in the first example using same technique.
➢ There can be several different origins of the specification of property values.
➢ One of the value may come from a style sheet created by the author or it can be specified by the user using the
options provided by the browser.
➢ The property values with different origin have different precedence.
➢ The precedence can also be set for a property by marking it as important.
p.special {font-style: italic !important; font-size: 14}
➢ This means that font-style:italic is important [this is known as weight of specification] ➢ The process of conflict
resolution is a multi-stage sorting process.
➢ The first step is to gather information about levels of style sheet.

Next, all the origins and weights are sorted. The following rules are considered:
1. Important declarations with user origin
2. Important declarations with author origin
3. Normal declarations with author origin
4. Normal declarations with user origin
5. Any declarations with browser (or other user agent) origin

If there still conflicts, they are resolved by giving precedence to most recently seen specification.

From the desk of Roopa R, S.G.T College, Bellary. 20


UNIT 2 CASCADING STYLE SHEETS (CSS) Web Designing BCA I Sem NEP

From the desk of Roopa R, S.G.T College, Bellary. 21

You might also like