Scribd
Upload
50 views

XHTML PPT PPSX

This document discusses the basic structure and elements of an XHTML document. It covers: 1) The required XML declaration and DOCTYPE elements that must begin any XHTML document. It also describes the <html>, <head>, <title>, and <body> tags that provide the overall structure. 2) Text formatting elements like <p> for paragraphs, <br> for line breaks, and <pre> for preserving whitespace. It also covers the six levels of heading tags <h1>-<h6>. 3) Other common elements like <blockquote>, <em>, <strong>, images, links, lists, and meta data for describing documents.

Uploaded by

Veena Gadad
Copyright
© © All Rights Reserved
Available Formats
Download as PPSX, PDF, TXT or read online on Scribd
50 views

XHTML PPT PPSX

This document discusses the basic structure and elements of an XHTML document. It covers: 1) The required XML declaration and DOCTYPE elements that must begin any XHTML document. It also describes the <html>, <head>, <title>, and <body> tags that provide the overall structure. 2) Text formatting elements like <p> for paragraphs, <br> for line breaks, and <pre> for preserving whitespace. It also covers the six levels of heading tags <h1>-<h6>. 3) Other common elements like <blockquote>, <em>, <strong>, images, links, lists, and meta data for describing documents.

Uploaded by

Veena Gadad
Copyright
© © All Rights Reserved
Available Formats
Download as PPSX, PDF, TXT or read online on Scribd
You are on page 1/ 115

XHTMLand css

Standard XHTML document structure.


Every XHTML document must begin with and
xml declaration element that simply identifies the
document as being one based on XML.
This element includes an attribute that specifies
the version number which is still 1.0. The xml
declaration usually includes a second attribute,
encoding which specifies the encoding used for the
document.
This declaration must begin in the first character
position of document file.
<?xml version = "1.0" encoding = "utf-8" ?>

Immediately following the xml declaration is


document type declaration that defines document
type definition(DTD) using DOCTYPE command.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd">

An XHTML document must include four tags


<html> ,<head>,<title> and <body>. The <html> tag
identifies the root element of the document.
The html element includes an attribute, xmlns, that
specifies the XHTML namespace.
<html xmlns = http://www.w3.org/1999/xhtml" >

An XHTML document consists of two parts


named the head and body.
The <head> element contains the head part of
the document, which provides information
about the document.
The body of a document provides
the content of the document.
The content of the title element is
displayed by the browser at the top
of its display window.

Basic Text Markup


Formatting text: describing layout
and some presentation details.
Paragraphs:
Text is normally organized into
paragraphs in the body of a
document. XHTML standard does not
allow text to be placed directly in a
document body.
Textual paragraphs appear as the
content of a paragraph element
specified with the tag <p>,

In displaying the content of a


paragraph, the browser puts as many
words that will fit on the lines in
browser window, the browser
supplies a line break at the end of
each line.
The line breaks embedded in text are
ignores by the browser.
If the content of a paragraph tag is
displayed other than the beginning of
the line, the browser breaks the
current line and inserts a blank line.

Line Breaks
Sometimes text requires a line break
without the preceding blank line. This
is done by break tag.
The break tag differs syntactically
from paragraph tag in that it can
have no content and therefore no
closing tag.
The break tag is specified as<br />.
The slash indicates that it is both
opening and closing tag. The space
before the slash represents the
absent content.

Preserving white space


Sometimes it is desirable to
preserve the white space in text i.e.,
to prevent the browser from
eliminating multiple spaces and
ignoring embedded line breaks. This
can be specified with pre tag.
Headings
Text is often separated into sections
in documents by beginning each
section with a heading.

In XHTML there are six levels of headings,


specified by the tags
<h1>,<h2>,<h3>,<h4>,<h5> and <h6>.
<h1> specifies the highest level heading.
On many browsers <h1>,<h2> and <h3> use
font sizes that are larger than that of default
size of text.
<h4 > uses default size and <h5> <h6> use
smaller sizes.
The heading tags always break the current line,
so their content always appears on a new line.
Browsers usually insert some vertical space
before and after all headings.

Block quotations
Sometimes we want a block of text
to be set off from normal flow of text
in a document. In most of cases such
a block is a long quotation.
The <blockquote> tag is designed
for this situation.
Browse designers determine how the
content of tag can be made to look
different from surrounding text.

Font styles and sizes


Content based style tags: indicates particular
kind of text that appears in their content.
Three of commonly used content based tags
are: emphasis tag, strong tag and code tag.
The emphasis tag <em> specifies that its
textual content is textual content is special
and should be displayed in some way that is
distinctive.
The <strong >tag sets content in bold
The <code > tag is used when we want to
specify a monospace font, usually for
program code.

XHTML tags are categorized as being


either block or inline.
The content of inline tag appears on the
current line. So an inline tag does not
implicitly include a line break.
One exception is break tag which is an
inline tag but its purpose is to insert a line
break in the content.
A block tag breaks the current line so that
its content appears on a new line.
The heading and block quote tags are
block tags, whereas<em> and <strong>
are inline tags.

In XHTML block tags cannot appear in the


content of inline tags. Therefore a block tag
can never be nested directly in an inline
tag.
Character Entities
XHTML provides a collection of special
characters that are sometimes needed in a
document but cannot be typed as
themselves.
For example: <, >, & , characters that do
not appear on keyboards, such as
representation for degrees in reference
to temperature.

Character

Entity

Meaning

&

&amp;

Ampersand

<

&lt;

Is less than

>

&gt;

Is greater than

&quote;

Double quote

&apos;

Single quote

&frac14;

One quarter

&frac12;

One half

&frac34

Three quarters

&deg;

Degree

{space}

&nbsp;

Nonbreaking space

Horizontal Rules
The parts of document can be
separated from each other by
placing horizontal lines between
them.
Such lines are called horizontal rules
and the block tag creates them is
<hr />. The <hr /> tag causes a line
break and places a line across the
screen.
The browser chooses the thickness,
length and horizontal placement of
the line.

The meta element


This is used to provide additional information
about the document. The meta tag has no
content, all of the information provided is
specified with attributes.
Two attributes that are used to pprovide
information are name and content.
The user makes up a name as the value of the
name attribute and specifies information
through content attribute.
One commonly chosen name is keywords; the
value of the content attribute associated with
keywords are those which author of a document
believes characterizes his or her document.

An example is
<meta name=keywords content=binary
trees, linked lists, stacks />
Web search engines use the information
provided with meta element to categorize
web documents
Images
The inclusion of images can dramatically
enhance its appearance of web document.
The image is stored in a file, which is
specified by XHTML request, inserted into
display of the document by the browser.

Image Formats
Graphic Interchange Format(GIF)- 8 bit color
representation for a pixel
Joint photographic Experts Group(JPEG)- 24 bit
representation for a pixel.
Portable Network Graphics(PNG)
The <img / > tag
This is an inline tag, specifies an image that is
to appear in a document. It includes two
attributes: src and alt.
src : specifies the file containing the image
alt: specifies text to be displayed when it is
not possible to display the image.

Hyper Text links


A hypertext link (link) in XHTML
document acts as a pointer to some
resource.
That resource can be an XHTML
document anywhere on the web or it
may just be another place in the
document currently being displayed.
It could also be a specific place in some
other document.
A link that point to different document
specifies the address of that document

The address could be filename, a


directory path and a file name or
complete URL.
Links are specified in an attribute of
an anchor tag(<a>), which is an
inline tag.
The anchor tag that specifies a link is
called source of that link. The
document whose address is specified
in a link is called the target of that
link.
One attribute that anchor tag make
use of is href(hypertext reference) .

The content of the anchor tag


becomes clickable link that the user
sees.
Links are usually implicitly rendered
in different color than the
surrounding text, sometimes they
are underlined also.
If the target is a different document,
that document is located and
displayed , replacing the currently
displayed document.
If the target is in the current
document, the document is scrolled

Links can include images in their


content in which case the browser
displays the image with the image
with the link.
Targets within the documents
If the target of a link is not at
beginning of a document, it must be
somewhere within the document, in
which case there must be some
means of specifying it.
The target element can include an id
attribute which can then be used to
identify it in an href attribute.

For example:
<h2 id=avionics> Avionics </h2>
The value of a id attribute must be
unique within the document.
To specify the link within same
document href attribute value is
specified by preceding id value with
pound sign (#).
<a href=#avionics> About Avionics
</a>
When we click About Avionics the
browser moves the display to that

When the target is a part or fragment


of another document, the name of
the part is specified at end of URL,
separated by a pound sign
<a href=Airplane.html# cost>
Avionics</a>
One common use of links to parts of
the same document is to provide a
table of contents in which each entry
has a link. This technique provides a
convenient way for the user to get to
various parts of the document

Lists
We frequently make and use lists in
daily life- to-do list and grocery lists.
Likewise even a printed document
can be littered with lists.
XHTML provides a simple and
effective ways to specify lists in
documents.
Unordered lists
The <ul> tag, which is a block tag
creates an unordered list. Each item
in a list is specified with an <li>

Any tag can appear in list item,


including nested lists.
When displayed each item is
implicitly preceded by a bullet.
Ordered Lists
Ordered lists are lists in which the
order of items is important.
This orderedness of a list is shown in
display of the list by implicit
attachment of sequential value to
beginning of each item.

The default sequential values are Arabic


numerals beginning with 1.
An ordered list is created within the block
tag <ol> .The items are specified using
<li> tag and each item in the display is
preceded by sequential values.
Lists can be nested, but they cannot be
nested directly, that is, an <ol> tag cannot
immediately follow an <ol> tag. The
nested list must be content of an <li>
element.
One problem with nested list is that all
three levels use the same sequence values.

Definition Lists
These are used to specify lists of terms and
their definitions, as in glossaries.
A definition list is given as the content of a
<dl> tag, which is a block tag. Each item to
be defined in definition list is given as the
content of <dt> tag. The definition
themselves are specified as contents
of<dd> tags.
The defined terms of a definition list are
usually displayed in left margin, the
definitions are usually shown indented on
the line or lines following the term.

Tables
Tables are common fixtures in printed
documents,books and web documents.
These provide a highly effective way of
presenting many kinds of information.
A table is a matrix of cells. The cells in a top
row contains column labels, those in the
leftmost column contain row labels and rest
of the cells contain the data of the table.
The content of a cell can be almost any
document element, including text, heading
horizontal rule, image and nested table.

Basic Table Tags


A specified as content of the block tag
<table>. There are two kinds of lines
in tables: the line around the outside
of whole table called the border.
The lines that separate the cells from
each other are called rules.
The browser has default widths for
table borders and rules, which are
used if the border attribute is assigned
the value border.

We can even specify borders value, which


specifies the border width in pixels.
A border value of 0 specifies no border and no
rules. The rules are set at 1 pixel when any non
zero border value is specified.
In most cases a displayed table is preceded by a
title, given as content of a <caption> tag, which
can immediately follow the opening <table>
tag.
The cells of a table are specified one row at a
time. Each row of a table is specified with row
tag ,<tr>.
Within each row, the row label is specified by
table heading tag, <th>.

Each data cell of a row is specified with a


table data tag,<td>.
The first row of a table usually has tables
column labels. For example if a table has
three data columns and their column
labels are, apple, orange and banana, the
first row can be specified by the following:
<tr>
<th> Apple</th>
<th> Orange</th>
<th> Banana</th>
</tr>

Each row of a table is specified with a


heading tag and one data tag for
each data column.
For example, the first data row can
be specified as:
<tr>
<th>Breakfast</th>
<td>0</td>
<td>1</td>
<td>0</td>
</tr>

In tables that have both row and


column labels, the upper left corner
cell is often empty.
This empty cell is specified with a
table header tag that includes no
content(either <th></th> or just <th
/>)
Row span and col span attributes.
The colspan attribute specification in
table header or table data tag tells
the browser to make the cell as wide
as the specified number of rows
below it in the table.

<tr>
<th colspan=3> Healthy Diet </th>
<tr>
<tr>
<th> Apple</th>
<th>Orange</th>
<th>Banana</th>
</tr>
The rowspan attribute of table heading and table data
tags does for rows what colspan does for columns.
A table that has two levels of column labels and has
row labels must have an empty upper left corner cell
that spans both multiple rows of column labels and
multiple column.

Such a cell is specified by including both


rowspan and colspan atttributes.
The align and valign attributes
The placement of the content within a table cell
can be specified with align and valign attributes
in the <tr>, <th> and <td> tags.
The align attribute has the possible values
left,right and centre with the meaning for
horizontal placement of the content within a cell.
The default placement for th cells is centre; for
td cells it is left.
If align is specified in <tr> tag, it applies to all of
the cells in the row. If it is included in <th> or
<td> tag, it applies to only that cell.

Create an XHTML document to


describe a table with following
contents: The columns of the table
must have headings Pine,Maple,Oak
and Fir. The rows must have labels
Average height, Average Width,
typical lifespan and Leaf type.
Modify the above XHTML document
to add a second level column label
Tree and a second level row label
Characteristics.

The valign attribute of the <th> and <td> tags


has possible values top and bottom. The
default vertical alignment for both headings
and data is centre.
The cell padding and cell spacing attributes.
The table tag had two attributes that can be
used to specify the spacing between the
content of table cell and cells edge and
the spacing between adjacent cells.
The cellpadding attribute is used to specify
the spacing between content of cell and inner
walls of cell.
The cellspacing attribute is used to specify
the distance between cells in a table.

Forms
The most common way for a user to
communicate information from web browser
to server is through a forms.
XHTML provides tags to generate the
commonly used objects on a form. These
are called controls or widgets.
All control tags are inline tags. Most controls
are used to gather information from the
user in form of text or button selection.
The values of all the controls in a form are
called the form data.

Every form requires a submit button, when the


user clicks submit button the form data is
encoded and sent to web server for processing.
The <form> tag.
All of the components of a form appear in
content of a <form> tag.
It is a block tag, it can have several attributes
one of which, action.
The action attribute specifies the URL of the
application on the web server that is to be
called when the user clicks submit button.
(action= is specified since there is no
corresponding application program)

The method attribute of <form>


specifies one of two values: get or
post, used to pass form data to the
server.
get is default, if no method attribute
is given in the <form> tag, get will
be used. The alternative is post, in
both techniques the form data is
coded into a text string when the
user clicks submit button.
The <input> tag
Most of the commonly used controls
are specified with the inline

The ta
g is used for text, passwords, checkboxes, radio
buttons and action buttons(Reset, Submit and
Plain)
The type attribute of input tag is used to
differentiate between various controls. The name
attribute stores the value of control within form.
The value attribute initializes the value of control.
Text control
It is usually referred as text box, creates a
horizontal text box, into which user can type a line
of text.
Text boxes are often used to gather information
from the user such as user name or address.

The default size of text box is 20 characters, which


varies with browsers.
We can specify the size of the text box using size
attribute, within <input> tag.
<form action=>
<p>
<input type=text name=Name size=25/>
</p>
</form>
If the user types:
Alfred Paul Von Frinkenburger
The text box would collect whole string, but the string
would be scrolled to right, leaving the following in text
box
ed Paul Von Frinkenburger

If we do not want this to happen, we can specify


maximum number of characters using maxlength
attribute that the browser should accept in text
box.
<form action=>
<p>
<input type=text name=Name size=25
maxlength= 25/>
</p>
</form>
If the user types:
Alfred Paul Von Frinkenburger
The value stored will be
Alfred Paul Von Frinkenbu

Password control
If the contents of a text box should not be
displayed when it is entered by the user
password can be used as type.
Only bullets or asterisks are displayed by the
browser.
<input type=password name=mypassword
size=25 maxlength= 25/>
Labels
Text boxes and most other controls must be
labeled. It can be done by inserting text into
appropriate places in the form.
NAME<input type=text name=Name
size=25/>

Other way of specifying the label is specifying the


control and its label as content of label element.
<label> NAME:<input type=text name=Name
size=25/> </label>
Checkboxes and Radiobuttons
These are used to collect multiple choice input
from the user.
A checkbox button requires a name attribute and a
value attribute in its <input> tag.
For form processing on the server, the name
identifies the button and value is its value.
The attribute checked, which is assigned the value
checked, specifies that the checkbox button is
initially on.

Radio buttons
The radio buttons are closely related to
check box buttons, the difference is that only
one radio button can be on at any time.
Everytime a radio button is pressed, the
button in the group that was on is turned off.
The type value is radio, all radio buttons
must have name attribute set in <input>
tag, and all buttons must have same name.
Any one of the button may be checked by
including checked attribute and setting its
value to checked.

The select tag


Checkboxes and radio buttons are effective
methods for collecting multiple choice data
from a user.
If the number of possible choices is large
the display form becomes too long to
display. In these cases menu could be used.
This menu is specified with a <select>
tag(rather than <input> tag).
There are two types of menus: those in
which only one menu item can be selected,
other is specified by adding size attribute.

By default one item is displayed in the


menu with a downward scroll.
Each item in the menu is specified with an
<option> tag, nested in select element.
The content of option tag is the value of
menu item.
The <option> tag can include selected
attribute which when assigned to
selected means the item is pre selected.
<select name=groceries>
<option> milk </option>
<option> bread</option>
<option>eggs </option>
<option> cheese </option>

The <textarea> tag


This tag is used to create a multiline text
area. The text typed into the area is not
limited in length, and there is implicit
scrolling when needed, both vertically and
horizontally.
The default size of the visible part of the
text in a text area is often small, so rows
and column attribute should be included to
set reasonable size.
If some default text is to be included in text
area it can be included as the content of
the text area element.

The Action buttons


The reset button clears all of the
controls in the form to their initial
states.
The submit button has actions:
The form data is encoded and sent to
server.
The server is requested to execute a
server resident program, specified in
action attribute of <form> tag.

Every form requires a submit button.


The submit and reset buttons are
created with <input> tag.

<form action= >


<p>
<input type=submit
value=Submit form>
<input type=reset value=Reset
Form>
</p>
</form>

Frames
The browser display window can be
used to display more than one
document at a time. The window can
be divided into rectangular areas
each of which is called frames.
Each frame is capable of displaying
its own document. Frames can be
used for number of display
situations.
Among these is having a table of
contents displayed in one frame and
parts of main document displayed in

There are some problems with frames which


led W3C to begin discourage their use as
early 1999, they are entirely left out in
XHTML 1.1.
Work is now in progress at W3C to develop a
new form of frames, called Xframes.
Framesets
The number of frames and their layout in a
browser window are specified with
<frameset> tag.
A frameset element takes the place of the
body element in a document. Hence a
document has either body or frameset.

The <frameset> tag must have either a rows or a


cols attribute and often have both.
The rows attribute specifies the number of rows of
frames that will occupy the window. There are
three kinds of values for rows: numbers,
percentages and asterisks.
Normally two or more values, separated by
commas are given in quoted string.
When a number is used as a value it specifies the
height of one row in pixels. When a percentage is
specified it indicates the percentage of total
browser window height that row should occupy.
When an asterisk is used as the value of rows, it
means the remainder of the window s height.

For example
<frameset rows=200,300,400>
This frameset will have three rows of
frames, since no cols attribute is specified.
Usually browsers have different
capabilities it is more practical to specify
rows with percentages
<frameset rows=22% , 33% , 45%>
<frameset rows=22% , 33% , *>
If two asterisks are given in rows attribute
value, they each get half of what remains
of the height of the window.

The cols attribute is very much like rows


attribute, except that it specifies the number
of columns of frames.
For example, the following tag specifies that
window is to have six frames in three equal
height rows and two columns.
<frameset rows=33%, 33%, 33% cols=25%,
*>
The content of a frame is specified with
<frame> tag, which can appear only in the
content of a frameset element.
Each frame defined in a frameset has
associated <frame> tag that gives the
filename of a document that supplies its
content.

The sequence of <frame> tags in frameset


is important because the order dictates
which frame gets which content.
The frames in a frameset appear by rows.
The content of a frame is specified as the
value of src attribute in a <frame> tag.
For example:
<frame src=apples.html>
If a <frame> tag has no src attribute, the
browser displays an empty frame. If the
frameset specifies more frames than
<frame> tags, the unspecifies frames are
displayed as empty frames.

If the content of a frame does not fit


into the given frame, scroll bars are
implicitly included.
Nested frames
The frames ca be nested, the
outermost frameset can define some
number of columns.
Each of these columns can be
divided with a nested frameset into
whatever collection of frames is
useful.

Syntactic differences between HTML and XHTML


Case sensitivity: in HTML tag and attribute
names are case insensitive. In XHTML tag and
attribute names should be in lowercase.
Closing tag: In HTML closing tag may be
omitted. In XHTML all elements must have
closing tag.
Quoted attribute values: In HTML attribute
values must be quoted only if there are
embedded special characters or whitespaces,
numeric values are rarely quoted. In XHTML all
attribute values must be quoted.

Explicit attribute values: In HTML some


attribute values are implicit, i.e., they
need not be specified explicitly. For
example, if border attribute appears in
<table> tag without a value, it specifies
a default width border on the table.
<table border>
this is illegal in XHTML in which such an
attribute is assigned a string of the
name attribute
<table border=border>

id and name attribute: HTML often used


name attribute for elements. This attribute
was deprecated for some elements in HTML
4.0. The id attribute is added to all elements
of this version of HTML. In XHTML the use of
id is encouraged and use of name is
discouraged.
Element nesting: Although HTML has rules
against improper nesting of elements, they
are not enforced. Examples of nesting rules
are:
An anchor element cannot contain another
anchor element, a form element cannot contain
another form element.

If an element appears inside another


element, the closing tag of the inner
element must appear before the closing
tag of outer element.
Block tags cannot be nested in inline
tags.
Text cannot be directly nested in body or
form elements.
List elements cannot be nested in list
elements.
These rules are strictly enforced in
XHTML.

Create, test, and validate an XHTML document that


has a form with the following controls:
a. A text box to collect the users name
b. Four checkboxes, one each for the following
items:
i. Four 100-watt light bulbs for $2.39
ii. Eight 100-watt light bulbs for $4.29
iii. Four 100-watt, long-life light bulbs for $3.95
iv. Eight 100-watt, long-life light bulbs for $7.49
c. A collection of three radio buttons that are labeled
as follows:
i. Visa
ii. Master Card
iii. Discover

Cascading Style Sheets.


XHTML is primarily concerned with content
rather than the details of how that content is
presented by the browsers.
The presentation specification can be more
precisely and more consistently described by
style sheets.
Most XHTML tags have associated properties
which store presentation information for the
browsers.
Browsers use default values for these for these
properties, for example the <h2> tag has font
size property , for which a browser could have
a default value of 18 points.

A style sheet could specify that fontsize property for <h2> be set to 20
points, which overrides the default
value.
The new value could apply to one
occurrence of an <h2> or all such
occurrences in the document
depending on how the property value
is set.
The idea of style sheets is not new
word processors and desktop
publishing systems used style sheets
to impose particular style on the

The first style sheet specification for use in


XHTML document dubbed Cascading Style
Sheets(CSS1) was developed in 1996. In
1998 CSS2 was released. CSS3 is under
development since 1990.
This chapter is restricted to a subset of CSS1
property values along with a few from CSS2.
The most important benefit of style sheets is
their capability of imposing consistency on
the style of web documents. For example
they allow the author to specify that all
occurrences of a particular tag use the same
presentation style.

XHTML style sheets are called cascading


style sheets because they can be defined
at three different levels to specify the style
of the document.
Lower level style sheets can override
higher level style sheets, so style of the
content of a tag is determined in effect
through a cascade of style sheet
application.
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 content of a single


element, document level style sheets apply
to the whole body of the document and
external style sheets can apply to bodies of
any number of documents.
Inline style sheets have precedence over
document style sheets, which have
precedence over external style sheets.
For example if an external style sheet
specifies a value for a particular property of a
particular tag, that value is used until a
different value is specified in either a
document style sheet or an inline style sheet.

Likewise document style sheet property values


can be overwritten by different property values
in an inline style sheet property.
If no style sheet information is specified, the
browser default property values are used.
As in case with tags and tag attributes, a
particular browser may not be capable of using
the property values specified in style sheet.
For example if the value of font size property of
a paragraph is set to 18 points, but the browser
can display the font upto 16 points, the
browser either substitutes an alternative value
or simply ignore the given font size.

Inline style specifications appear within an


opening tag and apply only to the content of
that tag. This fine-grain application of style
defeats one of the advantages of style sheetsthat imposing a uniform style on the tags of at
least one whole document.
Another disadvantage of inline style sheets is
that they result in style information which is
expressed in a language distinct from XHTML
markup, being embedded in various places of
the document.
It is much better to keep style specifications
separate from XHTML, for these reasons W3C
deprecated inline style sheets in XHML 1.1.

Document level style specification appear


in the document head section and apply to
entire body of the document. This is
oblivious way to impose a uniform style on
the presentation of all the content of a
document.
In many cases it is desirable to have a style
sheet apply to more than one document.
This is purpose of external style sheets.
External style sheets are not part of any
documents to which they apply. They are
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 ay computer on the web.
The browser fetches external style sheets
just as it fetches the documents. The <link>
tag is used to specify external style sheets.
Within <link>, the rel attribute is used to
specify the relationship of the linkeddocument to the document in which link
appears.
The href attribute of the <link> is used to
specify the URL of the style sheet document.

<link rel=stylesheet type=text/css


href=http://www.cs.usc.edu/styles/wbook.cs
s>

The link to the external style sheet


must appear in head of the
document. If the external style sheet
resides on web server computer only
its path address must be given as the
value of href.
@import directive is an alternative
way to use style specification from
other files. The form is following:
@import url(filename);

The file name is not quoted. The two


differences between link and @import are:
@import can appear only at beginning of the
content of the style element
The imported file can contain markup as well
as style rules. Sometimes the imported file
contains other @import directives along with
some style rules.

Style specification format


The format of style specification depends
on the level of style sheet. Inline style
specifications appear as values of the
style attribute of a tag, the general form is

style=
property_1:value_1;property_2:value2;
.; property_n:value_n;
Document style specifications appear as
the contents of a style element within
the header of the document, although
the format of the specification is
different from inline style sheets. The
general form is:
<style type=text/css>
Rule_list
</style>

The type attribute of <style> tags


tells the browser the type of style
specifications, which is always
text/css.
Each style rule in a rule list has 2
parts: a selector, which indicates the
tag or tags affected by the rule, and
list of property/value pairs.
The list has same form as the quoted
list for inline style sheets, except the
list is delimited by braces rather than
double quotes.

The form of style rule is as follows:


Selector { property_1:value_1;
property_2:value_2;.; property_n:value_n}
If a property is given more than one value,
those values usually are separated by
spaces.
CSS rule lists should be documented with
comments. XHTML comments cannot be
used here because CSS in not XHTML.
Therefore a different form of comment is
needed.
CSS comments are introduced with /* and
terminated with */

Selector Forms
The selector can have a variety of forms
Simple selector forms:
The simplest selector form is a single
element name , such as h1. In this case
the property values in a rule apply to all
occurrences of the named element.
The selector could be list of element
names, separated by commas, in which
case the property values apply to all
elements of the named elements.

Consider the following example in


which the property is font_size and
the property value is number of
points:
h1{font_size:24pt;}
h2, h3{font_size:20pt;}
The first of these specifies that the
text content of all h1 elements must
be set in 24-point font size. The
second specifies that the text
content of all h2 and h3 elements
must be set in 20 point font size.

Selectors can also specify that the style should


only apply to elements in certain positions in
the document.
This is done by listing the element hierarchy in
the selector, with only whitespace separating
the element names. For example:
body b em{font_size:14pt;}
Only applies its style to the content of
emphasis elements that are descendant of bold
elements in the body of the document.
This is a contextual selector(decendant
selector). It would not apply to the content of
an emphasis element that did not have
boldface element as ancestor.

Class Selector
Class selectors are used to allow different
occurrences of the same tag to use different
style specifications.
A style class is defined in a style element by
giving it a name, which is attached to the
tags name with a period.
For example: if we want two paragraph
styles in a document- normal and warningwe define these two classes in the content
of a <style> tag as follows:
p.normal {property-value list}
p.warning {property-value list}

Within the document body, the particular style


class is specified with the class attribute of the
affected tag- in the preceding example the
paragraph tag.
For example we may have the following:
<p class=normal>
A paragraph that we want to be presented in
normal presentation style
</p>
<p class=warning>
A paragraph of text that is warning to the
reader, which should be presented in an
especially noticeable presentation style
</p>

Generic Selectors
Sometimes it is convenient to have a
class of style presentations that
applies to the content of more than
one kind of tag.
This is done by using generic class,
which is defined without a tag name
in its name.
In place of the tag name we use the
generic class, which begin with a
period.
For example:

Now in the body of the document we can


have the following
<h3 class=sale> Weekend Sale</h3>
..
<p class=sale>

</p>
Id selectors
An id selector allows the application of a
style to one specific element. The general
form of an id selector is as follows:

#specific-id{property-value list}
The style specified in the id selector applies to
the element with the specific id. For example:
#section14 {font-size:20}
Specifies a font size of 20 to the element
<h2 id=section14> Department of
CSE</h2>
Universal selector
The universal selector, denoted by an
asterisk(*), applies its style to all elements in
the document. For example
*{color:red}

Makes all elements in the document red.


This class selector in rarely used.
Pseudo classes
These are styles that apply when
something happens rather than because
the target element simply exists. The two
pseudo classes are: hover and focus.
The names of pseudo classes begin with
colon(:)
The style of the hover pseudo class
applies when its associated element has
the mouse cursor over it.

The style of focus pseudo class


applies when its associated element
has focus- An element acquires focus
when the user places the mouse
cursor over it and click the left
mouse button.
In pseudo.html, the content of an
input element, a text box, is colored
red when the mouse cursor is placed
over its content.
This happens only when the text box
does not have focus. If no text has
been typed into text box the hover

When the text box acquires focus, the


text turns green and stays untill the left
mouse button is clicked outside the box.
The property value forms
CSS1 includes 60 different properties in
seven categories: font, lists, alignment of
text, margins, colors, backgrounds and
borders.
Property values can appear in a variety
of forms. Keyword property values are
used when there are only few possible
values and are predefined.

For example: large, medium and


small. These keywords are not case
sensitive.
Numeric values are used when no
meaningful units can be attached to
a numeric property value. A number
value either can be 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 immediately
followed by a two character

The possible unit names are px for


pixels,in for inches,cm for
centimeters, mm for millimeters, pt
for points(1/72 inch), pc for picas (12
points).
The display for in,cm mm, pt and pc
are approximate measures. Their
actual values depend on screen
resolution.
There are also two relative length
values: em, which is the value of
current font size in pixels and ex
which is the height of the letter x.

Percentage values are used to


provide a measure that is relative to
the previously used measure for a
property value. These values are
numbers followed by % sign.
For example: if the font size were set
to 75% it would make the new
current size for the font 75% of its
previous value.
Percentage values can be signed. If
preceded by a plus sign, the
percentage id added to the previous
value; if negative the percentage is

URL property values use a form that is slightly


different from the references to URLs in links.
The URL can be absolute or relative is placed in
parenthesis and preceded by url, such as,
url(tetons.jpg)
Color property values can be specified as color
names, as six-digit hexadecimal numbers or in
RGB form in just the word rgb followed by a
parenthesized list of three numbers that specify
the levels of red, green and blue.
The RGB values can be given as either decimal
numbers between 0 and 255 or as percentages.
Hexadecimal numbers must be preceded by #
symbol such as #43AF00.

For example powder blue can be specified as


powderblue
Or
rgb(176,224,230)
0r
#B0E0E6
CSS2 specifies that some property values are inherited by
elements nested in the elements for which values are
specified.
Using a style sheet to set a value for the <body> tag
would effectively sets it default property for whole
document.
For example: body {font-size:16pt}
Unless overridden by a style sheet that applies to paragraph
elements, every paragraph element in the body of this
document would inherit the font size of 16 points.

Font properties
The font properties are among the
most commonly used of the stylesheet properties.
Virtually all XHTML documents
include text, which is often used in a
variety of different situations. This
creates a need for text in different
fonts, font styles and sizes.
The font properties allow us to
specify these different forms.

Font Families
The font-family property is used to
specify a list of font names. The
browser will use first font in the list
that it supports.
For example:
font-family:Arial,Helvetica,Futura
The generic font can be specified as
a font- family value. The possible
generic fonts nad examples of each
are shown in table that follows.

Generic font families


Generic Name

Examples

Serif

Times New roman, Garamond

Sans-serif

MS Arial, Helvetica

Cursive

Caflisch Script, Zapf-Chancery

Fantasy

Critter, Cottonwood

monospace

Courier, Prestige

Each browser has font defined for each


of these generic names.
A good approach is to specify the generic
font as last in the value of font-family
font family:Arial,helvetica,sans-serif

If a font has more than one word the whole


name should be delimited by quotes
font-family: Times New Roman
Font Size
The font size property does what the name
implies. For example
font-size:10pt
This specification sets the font size for text
to 10 points.
Many relative font-size values are defined
namely, xx-small, x-small, small, medium,
large and xx-large.

The value can be a percentage, which would


be relative to the current font size.
The disadvantage of relative font sizes is the
lack of font size control. Different browsers
can use different values for them.
Using a specific font size has a risk that
some browsers may not support the
particular size, causing the document to
appear different on different browsers.
Font variants
The default value of font-variant property is
normal, which specifies the usual character
font.

This property can be set to small-caps


to specify small capital letters.
Font styles
This property is most commonly used
to specify italic as shown below:
font-style: italic
Font weights
The property is used to specify the
degree of boldness.
For example:
font-weight:bold

Besides bold, the values normal(default),bolder


and lighter can be specified.
The bolder and lighter values are taken as
relative to current level of boldness.
Font shorthands
If more than one font property must be
specified, the values can be stated in a list as
the value of font property.
Consider the following specification:
font: bold 14pt Times New Roman Palatino
This specifies that the font weight should be
bold, size should be 14 points and either times
new roman or Palatino font should be used.

The order in which the property values are given


in a font value list is important:
The font names must be last, the font size must
be second last and font style, font variant and
the font weight, when they are included can be
in any order but must precede the font size and
names.
Text decoration
This property is used to specify some special
features of text.
The available values are: line-through, overline,
underline and none(default)
Many browsers underline links. The none value
can be used to avoid this.

The letter spacing property controls the


amount of space between the characters in
text. The possible values of letter spacing
are any length property values, for
example 3px.
List Properties
Often two presentation details are specified
in XHTML documents: the shape of the
bullets that precede the items in unordered
lists and the sequencing values that
precede the items in ordered lists.
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. The default
property value for bullets id disc.
The following illustrates a document
style sheet to set the bullet type in
unordered list to square

We are not only limited to discs,


squares and circles for bullets in
unordered lists. Any image can be
used in the list item bullet.
Such a bullet is specified with liststyle-image property, whose value is
specified with url form.

When ordered lists are nested, it is best to use


different kinds of sequence values for different
levels of nesting.
The list-style-type property can be used to specify
the types of sequencing values.
The following table lists the different possibilities
defined by CSS1

Color
Color groups
Three levels of collections of colors might
be used by an XHTML document.
The smallest useful set of colors includes
only those that have standard names and
guarenteed to be correctly displayable by
all browsers on all color monitors.
This collection of sixteen colors is called
named colors.
The named colors and hexadecimal codes
for them is shown in table that follows:

Color Properties
The color property is used to specify
the foreground color of XHTML
elements.
Consider the following small table:

The background color property is


used to set the background color of
an element, where the element could
be whole body of the document.
Consider the following paragraph
element:

Alignment of text
The text-indent property can be used
to specify the indentation
<style type=text/css>
p.indent{text-indent:0.5in}
</style>
.
<p class=indent>
.
</p>

You might also like