UNIT 2:

Style Sheets & Client - Side

Programming:

Chapter 5: Style Sheets

Chapter 6: Client-Side Programming
Chapter 7: Cookies
 Style Sheets

Chapter 5: Style Sheets

5.1 Introduction to the Style Sheets

“STYLE SHEET IS A COLLECTION OF FORMATTING STYLES, WHICH CAN
BE APPLIED TO A WEB PAGE.”
5.1.1 Benefits of the Style Sheets

Separation of style and content has many benefits:

5.1.1.1 Speed. Users experience of a site utilizing style sheets will

generally be quicker than sites that don’t use the technology.
‘Overall’ as the first page will probably load more slowly –
because the style sheet AND the content will need to be
transferred. Subsequent pages will load faster because no style
information will need to be downloaded – the CSS file will
already be in the browser's cache.

5.1.1.2 Maintainability. Holding all the presentation styles in one file

significantly reduces maintenance time, and reduces
opportunity for human errors by reducing the maintenance
tasks.

5.1.1.3 Accessibility. Sites that use CSS with either XHTML or HTML
are easier to draw so that they appear extremely similar in
different browsers

5.1.1.4 Customization. If a page's layout information is all stored

externally, a user can decide to disable the layout information
entirely, leaving the site's bare content still in a readable form.
Site authors may also offer multiple stylesheets, which can be
used to completely change the appearance of the site without
altering any of its content.

5.1.1.5 Consistency. Because the semantic file contains only the

meanings an author intends to convey, the styling of the
various elements of the document's content is very consistent.
For example, headings, emphasized text, lists and
mathematical expressions all receive consistently applied style
properties from the external stylesheet. Authors need not
concern themselves with the style properties at the time of
composition. These presentational details can be deferred until
the moment of presentation.

5.1.1.6 Portability. The suspension of presentational details until the

time of presentation means that a document can be easily re-
 Style Sheets
purposed for an entirely different presentation medium with
merely the application of a new stylesheet already prepared for
the new medium and consistent with elemental or structural
vocabulary of the semantic document.

5.1.2 Disadvantages of the Style Sheets

Currently specifications (for example, XHTML, XSL, CSS) and software tools
implementing these specification are only reaching the early stages of
maturity. So there are some practical issues facing authors who seek to
embrace this method of separating content and style.

5.1.2.1 Lack of semantic vocabulary. HTML offers a rich, but

limited vocabulary of semantic elements (for example
paragraph, quote, emphasis). The migration of HTML to the
extensible XHTML may eventually speed the proliferation
of richer semantic vocabularies to apply generalized styles
to.

5.1.2.2 Complex Layouts. One of the practical problems is the lack of

proper support for style languages in major browsers. Typical
web page layouts call for some tabular presentation of the
major parts of the page such as menu navigation columns and
header bars, navigation tabs, and so on. However, deficient
support for CSS and XSL in major browsers forces authors to
code these tables within their content rather than applying a
tabular style to the content from the accompanying stylesheet.

5.1.2.3 Narrow Adoption without the Parsing & Generation

Tools. While the style specifications are quite mature and still
maturing, the software tools have been slow to adapt. Most of
the major web development tools still embrace a mixed
presentation-content model. So authors and designers looking
for GUI based tools for their work find it difficult to follow the
semantic web method. In addition to GUI tools, shared
repositories for generalized stylesheets would probably aid
adoption of these methods.

The style sheet consists of the following components:

5.1.3 Style Rule

“A STYLE RULE IS A SET OF HTML TAGS SPECIFYING THE FORMATTING

ELEMENTS.”
 Style Sheets

Style rules can be applied to selected contents of a web page.

A style rule can basically be split into two parts:

(a) Selector: A selector is a string that identifies what elements

the corresponding rule applies to and is the first part of the
rule.

(b) Declaration: This part of the rule is enclosed within curly

brackets. A declaration has two sections separated by a
colon. The section before the colon tells the property, and
the section after the colon is the value of that property.

The syntax of a style rule is as follows:

Selector (property : value)

Where,

Selector = Any HTML tag

Property = Attribute like font color, font size, etc.

Value = Setting for the attribute

e.g. H1 { color : blue }

H1 is the selector, color : blue is the declaration color is the property and blue
is the value.

There are four ways of incorporating style sheets in HTML document, which
are:

 Including style information within HTML

 Style Sheets
 Embedding a style sheet

 Linking to an external style sheet

 Importing a style sheet

5.1.4 Including Style Information Inline – Inline Styles

Incline style declaration is the most basic style rule, which can be applied to
individual elements in the web page, Inline styles are implemented by using
style attributes with the HTML tags.

The syntax is :

<HTML TAG STYLE = “PROPERTY : VALUE”>

e.g.

<P STYLE = { COLOR : OLIVE }>

Example: The style rule is applied to H1 tag by specifying it in the STYLE

attribute.

<HTML>

<BODY>

<H1 STYLE = “Color : limegreen”> This is a style applied to an H1 element

</H1>

<H1> This is the default display of an H1 element </H1>

</BODY>

</HTML>
 Style Sheets
The color property sets the color of the first H1 element to limegreen color and
the second one remains the default since no style attribute is applied.

5.1.5 Embedding Style Sheet

More than one style rule can be grouped by using <STYLE>……….</STYLE>

tag pair unlike of applying it individually in inline style. Each of these tags when
used in the BODY of the HTML code will apply the style rules.

The syntax is:

<HTML>

<HEAD>

<STYLE>

Style Rules

</STYLE>

</HEAD>

</HTML>

<BODY>

…………

…………

…………

</BODY>

</HTML>

Example,

<HTML>
 Style Sheets
<HEAD>

<STYLE>

H1 { font – family : Arial }

H1 { Color : limegreen }

</STYLE>

</HEAD>

<BODY>

<H1> This is the H1 element </H1>

<H2> This is the H2 element </H2>

………

</BODY>

</HTML>

5.1.6 Grouping Style Rules

Same style properties can be applied to more than one elements in a

document by grouping the style rules as shown below:

<HTML>

<HEAD>

<STYLE>

H1, H2 { Color : red ; font-family : Arial }

</STYLE>

</HEAD>
 Style Sheets
<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 as displayed in the

browser </H3>

</BODY>

</HTML>

5.1.7 Selectors

The selectors in the style rule basically are categorized into:

5.1.7.1 Simple Selectors

These are the easiest to use. A SIMPLE SELECTOR DESCRIBES AN

ELEMENT IRRESPECTIVE OF ITS POSITION IN THE DOCUMENT
STRUCTURE. The H1 heading identifier is a typical example of simple
selector.

H1 { Color : blue }

Simple selectors can be further classified into:

(a) HTML Selector

These selector use the names of HTML elements without brackets.

So the HTML <P> tag becomes P.

Example: In this example, while defining the style, the P element

does not have brackets.
 Style Sheets
<HTML>

<HEAD>

<STYLE>

P { font – style : italic ; font – weight : bold ; color : limegreen ;

font – size : 12 pt ; line – height : 16 pt }

</STYLE>

</HEAD>

<BODY>

<P> these selectors use the names of HTML elements. The only
difference is that the brackets are removed. </P>

</BODY></HTML>

(b) Class Selector

The class selector gives authors the ability to apply styles to

specific parts of a document and do not necessarily to the whole
document

The syntax is:

<STYLE>

Class selector

. Class Name Class selector { Property : Value }

</STYLE>

<BODY>

<P Class = “Class Name”>

Class attribute

</BODY>

Class name can be any valid string of characters.

 Style Sheets

The class selector is preceded with a dot (.) called the flag
character

Class selector can be applied to any of the HTML elements by

using the class attribute.

Example:

<HTML>

<HEAD>

<STYLE>

. note { color : blue }

. syntax { color : red }

P. syntax { color : red }

P { font – size : large }

</STYLE>

</HEAD>

<BODY>

<P CLASS = “syntax”> The class selector is preceded with a dot

(.) called the flag character, followed by the ‘Class name’.

<P CLASS = “note”> It is better to choose class name according

to their purpose rather than a name that describes their color or
style.

<H1 CLASS = “note”> The class attribute is used even to the

heading tag.

</H1>

</BODY>

</HTML>
 Style Sheets
(c) ID Selector

Like class selection, ID selector is also used to apply style to the

selected parts of text. In this style, each ID selector has a unique
identifier. An ID selector is preceded by a hash (#) mark and to
apply ID selector the ID attribute of an HTML element is used.

The syntax is:

<STYLE>

ID Selector name

# IDSelectorName {Property : Value}

</STYLE>

<BODY>

<P ID = “IDSelectorName”>

ID Attribute

</BODY>

Example:

<HTML>

<HEAD>

<TITLE> ID SELECTOR </TITLE>

</HEAD>

<BODY>

<STYLE>

#Control { color : red }

</STYLE>
 Style Sheets
<H2 Id = “Control”> Fire is this color </H2>

<BR>

<H2> The browser controlled display of an H2 heading </H2>

<BR>

<P ID = “Control”> Applying an ID to a paragraph element. </P>

<BR>

<P> This is paragraph that has no style applied </P>

</BODY>

</HTML>

(d) Contextual Selectors

Consider a situation where, some tags are under H1 that are

italics. Now to change any of their color to red following code
could be used:

H1 { color : red }

I { color : red }

But in the above code, all type italicized tags turn to red. This is
because of the line 2 of the code.

To avoid such situation contextual selectors can be used.

Contextual selectors can be used to combine number of simple
selector separated by a space.

The above code now can be rewritten as:

 Style Sheets
H1 I { COLOR : RED }

The concept of contextual selectors support inheritance

Example:

<HTML>

<HEAD>

<TITLE> contextual selectors </TITLE>

<STYLE>

body {

Color : Magenta;

Background : white;

Font – family : Arial;

ul {

color : aqua

</STYLE>

</HEAD>

</HTML>

5.2 Cascading Style Sheets

 Style Sheets
The above methods of modifying styles of elements are within the same page.
To apply similar settings for all the pages in the website, all the style rules
should be put into a style sheet File and then imported or linked with the HTML
document. This method of linking or importing is called CASCADING STYLE
SHEETS (CSS).

5.2.1 Linking to an External Style Sheet

For constructing a CSS, first style rules must be written in a document and
saves in a separate file with extension of CSS. The syntax for linking to an
external style sheet is:

<HTML>

<HEAD>

<LINK REL = “STYLESHEET“ HREF = “Dictionary path where the style sheet is
saved”>

</HEAD>

<BODY>

………

………

</BODY>

</HTML>

Where REL = STYLESHEET – Relation to the external document in a style sheet.

For example, consider a style sheet definition which specifies two styles:

 a global style applies to all <H2> element (green, arial font family,
normal size)
 Style Sheets
 a generic style class named warning (red, bold, italic) which will apply to
any element which uses that class.

Style 1. CSS has the following code:

<STYLE>
H2 { COLOR : limegreen }

font – family : “Arial”;

font – size : normal

Warning { color : red;

font – weight : bold;

font –style : italic

</STYLE>

HTML file:

<HTML>

<HEAD>

<TITLE> Changing the rules </TITLE>

</HEAD>

<H2> Changing the rules is fun </H2>

<BR>

<P class = “warning”> Changing the rules may not be such fun

<H2> The H2 element again </H2>

 Style Sheets
</HTML>

TYPE = “text / css”

5.2.2 Importing a Style Sheet

Importing a style sheet, automatically pulls, the style rules into the document
for use. Once imported, changes made to the style sheet will not be reflected
in the web page into which it has been imported. This problem can be avoided
by linking the style sheet to the main document rather than importing it.

The syntax is:

<HTML>

<HEAD>

<STYLE TYPE = “TEXT / CSS”>

@ IMPORT URL (The Path) ;

</STYLE>

</HEAD>

<BODY>

………

………

</BODY></HTML>

5.2.3 Style Sheet Properties

 Style Sheets
5.2.3.1 Font Properties.

(a) font-family – Denotes font

(b) font-size – Denotes the size of the text.

(c) font-style – Denotes the style of the text for example normal,
bold, italic etc.

(d) font-weight – Denotes the weight or darkness of the font. This

value ranges from 100 to 900 increments of 100.

5.2.3.2 Text Properties.

(a) Letter-spacing – Denotes the space between letters (in

inches(in), centimeters (cm), millimeter (mm), or points (pt), etc.).

(b) Word-spacing – Denotes the space between words (in

inches(in), centimeters (cm), millimeter (mm), or points (pt), etc.).

(c) Vertical-Align – Denotes the vertical positioning of the text and

images, with respect to the baseline. The possible values include
baseline, sub, top, text-top middle percentage values, etc.

(d) Text-Align – Specifies the alignment of the text. Possible values:

center, justify, etc.

(e) Text-indent – Denotes margins. This property sets the

indentation for text in the first line of block level element.

(f) Text-decorate – Denotes the text’s decoration. The standard

values for this property include blink, line – through over line
underline etc.

5.2.3.3 Color and Background Properties.

(a) Color – Denotes the color property, used to set text color.
 Style Sheets
(b) Background-color – This property sets an element’s background
color.

(c) Background-image – Associates a background image with an

element.

(d) Background-position – Specifies how a background image is

positioned.

5.2.3.4 Box Properties.

Block style elements such as the <P> element can be considered as

rectangular boxes on the screen. These properties include:

(a) Margin Properties – The margin values should be in length like

15 pt. etc. The individual margins for a block element can be set
using margin-top, margin-rigid, margin-bottom, or margin-left.

(b) Border Properties:

 Border-style – Used to set the appearance of the

borders. The values can include solid, double, groove,
ridge, etc.

 Border-width – The width of the border is specified here.

The individual border width can be set using border-top-
width border-right-width, border-bottom-width, border-
left-width etc.

 Border-color – Border may be assigned a color.