Scribd
Upload
3 views79 pages

Htmldca

The document provides an overview of HTML elements and their usage, including phrase elements, paragraph tags, comments, heading tags, and various attributes for styling text and backgrounds. It explains how to create lists, tables, and other structural components, along with examples of each. Additionally, it covers attributes for customizing the appearance of text and links within HTML documents.

Uploaded by

ang.jeevan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
3 views79 pages

Htmldca

The document provides an overview of HTML elements and their usage, including phrase elements, paragraph tags, comments, heading tags, and various attributes for styling text and backgrounds. It explains how to create lists, tables, and other structural components, along with examples of each. Additionally, it covers attributes for customizing the appearance of text and links within HTML documents.

Uploaded by

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

The Phrase

Elements:
The first set of elements to look at the HTML
phrase elements, which are used to add
structural information to text fragments, rather
than entire lines or paragraph.
Elements Description
<b> and </b> // Bold the text
<i> and </i> // Italic the text
<u> and </u> // Underline the
text
<center> and </center> // Center the
text
<strike> and </strike> //
Strike through
<sub> and </sub> //subscript
<sup> and </sup> //Superscript
example
<html>
<head><title>Phrase element</title>
</head>
<body>
<center>this is center text</center><br>
<b>this is bold text</b><br>
<u>this is underline text</u><br>
<i>this is italic text </i><br>
</body>
</html>
<P> Paragraph Tag
 <p> tag is the paragraph tag and marks the beginning
of a new paragraph. The End tag of <p> is </p>. It is
optional and can be used to mark the end of the
paragraph.

 Attributes are extra information that is used with a tag


to modify the function tag. The attribute used to change
the alignment is ALIGN.

 <p align =”left”> // will align the following paragraph to


the left.
 <p align =”right”> // will align the following paragraph
to the right.
 <p align =”center”> // will align the following paragraph to
the center.
 <p align =”justify”> // will align the following paragraph to
the justify.
COMMENTS
 HTML pages can sometimes become
very cryptic and difficult to read. To
avoid this, comments can be added to
the page.

 Comment can be given by enclosing


them with in <! - - and - - >
 Example: <!- - This is the first web page-
->
Example:
<html>
<head><title>paragraph example</title>
<body>
<!– this is example for comment and paragraph
<p align=“left” > Most tags come in pair. The first tag, called the Start
Tag, indicate the beginning of an effect. The second tag called as the
End Tag, indicated the end of that effect. The End tags are usually the
same as the Start Tags except that they have a “/” in front of the
keyword. </p>
<p align =“center” >Most tags come in pair. The first tag, called the
Start Tag, indicate the beginning of an effect. The second tag called as
the End Tag, indicated the end of that effect. The End tags are usually
the same as the Start Tags except that they have a “/” in front of the
keyword. </p>
<p align =“right”> Most tags come in pair. The first tag, called the Start
Tag, indicate the beginning of an effect. The second tag called as the
End Tag, indicated the end of that effect. The End tags are usually the
same as the Start Tags except that they have a “/” in front of the
keyword. </p>
<p align=“justify”> Most tags come in pair. The first tag, called the Start
Tag, indicate the beginning of an effect. The second tag called as the
End Tag, indicated the end of that effect. The End tags are usually the
same as the Start Tags except that they have a “/” in front of the
keyword. </p>
</body>
</html>
HEADING TAGS
 Big and Bold heading help to make HTML
document attractive. HTML allows you to use six
level of heading. Each level has it own predefined
font size.

 The first level is indicated by the <h1> and


</h1> tags. <h2> and </h2> indicates the
second level and so on till <h6> and </h6>.

 <h1>heading 1</h1>
 <h2>heading 2</h2>
 <h3>heading 3</h3>
 <h4>heading 4</h4>
 <h5>heading 5</h5>
 <h6>heading 6</h6>
example
<html>
<head>
<title>sit</title>
</head>
<body>
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
</body>
</html>
Horizontal Rule Tag
 The Horizontal Rule tag or the, <hr> tag
is used to draw a horizontal line. It does
no have an End tag.
 The <hr> tag automatically introduces a
line break. In that we can specify the
thickness of the line.
 The size attribute allows you to define the
thickness of the line to be drawn.
 The NOSHADE attribute displays the line
in dark gray.
example
<html>
<head>
<title>hr</title>
</head>
<body>
<hr size = “1”>
<hr size = “3”>
<hr size = “10”>
<hr size = “10” noshade>
<hr size=“20” >
<hr size=“20” noshade>
</body>
</html>
BODY
 The BODY tag specifies the main content of a
document. You should put all content that is to
appear in the web page between the <BODY> and
</BODY> tags.

 <BODY
BACKGROUND="bgURL"
BGCOLOR="color"
TEXT="color"
LINK="color"
ALINK="color"
VLINK="color"
ONLOAD="loadJScode"
ONUNLOAD="unloadJScode"
ONBLUR="blurJScode"
ONFOCUS="focusJScode"
CLASS="styleClass" >
...
</BODY>
ADDING COLOR TO THE HTML PAGE
 The actual text of the page is enclosed within this tag. By
using attributes with the <body> tag, it is possible to
change the background color, add a background picture,
specify text color, and specify the color of links.
 BGCOLOR Attributes:
 This attribute is used with the <body> tag to specify
the background color for the page. HTML allows you to
specify color in two ways.
 For example:
<body bgcolor=”red”>
OR
<body bgcolor=”ff0000”>
 Six-digit hexadecimal numbers represent the red, blue and
green components used to form the color.

For example, the RGB value for white is FFFFFF, red is
FF0000, yellow is FFFF00 andRed blue green
so on
BACKGROUND="bgURL"

 It specifies an image to display in


the background of the document.
 for example,
 <body background="image1.gif" >
TEXT Attributes

 This attribute used to specify


the color in which the text is to be
displayed.
 For example:
 <body bgcolor= ”red” text=
”white”>
 It will display white text on a red
background.
LINK Attributes
 HTML pages can contain links to
other pages. With the LINK
attributes you can specify the color
to be used for these links. Both IE
and Netscape use blue color as
default. For our choice we change
the color as,
 For example:
 <body link = “green”>
VLINK Attributes
 This attributes is similar to the LINK
attributes except that it changes the
color of the link that have been
preciously visited by the viewer. By
default, both IE and Netscape use
purple color for this purpose.
 . For example: <body vlink= “red”>.
ALINK Attributes
 When the mouse is clicked on the
link, it is called as an Active link. By
default, both IE and Netscape
display active links in red.
 . For example: <body alink =”
blue”>.
Example
 <html>
 <head<title>body
example</title></head>
 <body background=“img.jpg”
TEXT="black" LINK="blue"
alink=“green” vlink=“red” >
 <a href=“test.html”>click here</a>
 </body>
 </html>
<FONT> TAG
 Using <font> tag we can specify the font,
size and color in which the text should be
displayed. Using the attributes FACE,
SIZE and COLOR we can do this. The font
tag have an End tag </font>.
 Syntax:

<FONT
COLOR="color"
FACE="fontlist"
POINT-SIZE="pointSize"
SIZE="number"
WEIGHT="boldness"
>
...
</FONT>
COLOR Attributes
 This attributes allows you to specify
the color in which the text should be
displayed. Color names or their
corresponding RGB codes can be
used.
 For example: <font color = “red”>
red </font>
SIZE Attributes
 HTML allows you to display text in
seven different font sizes. The
smallest is size 1 and the largest size
7.
 For example:
 <font size= “2” > html </font>
FACE Attributes
 This attributes is used to specify the font
to be used to display text. Most browser
supports almost all the commonly used
fonts. If you use a font that is not
support by a browser, then the text will
be displayed in the default font.
 . For example:
 <font face = “Arial” > SIT Computer
Center</font>
EXAMPLE
 <html>
 <head><title>font
example</title></head>
 <body>
 <font face=“times new roman” size=7
color=“red”>sit welcomes you</font>
 </body>
 </html>
MARQUEES TAG
 By using this tag you can scrolling the
text across the screen just like the
advertisement or flash news on
Television. To use this tag, enclose the
text with in the <marquee> and
</marquee> tags.
 Note: The Marquees tag work only on
Internet Explorer.
 For example:
 <marquee> sample text </marquee>
BLINK TAG
 By using this tag you can blink the
text on the screen. To use this tag,
enclose the text with in the <blink>
and </blink> tag.
 Note: The Blink tag work only on
Netscape Navigator.
 Example:
 <blink>blinking text</blink>
directory list
 The DIR tag is intended to display a list
of short items such as in a directory
listing.
 To mark the individual items within the
list, use the LI tag.
 A single list item can contain additional
paragraphs, marked with the P tag.
 Syntax
 <DIR>
....
</DIR>
Example

<html><body>
<P>The directory structure is:</P>
<DIR>
<LI>composer
<DIR>
<LI>editing.htm
<LI>publishing.htm
</DIR>
<LI>navigator
<DIR>
<LI>userguide.htm
<LI>javascript.htm
</DIR>
<DIR>
</body></html>
ordered list
 The OL tag displays an ordered, or numbered,
list. The default numbering style is determined
by the browser, but you can use the tag's
 TYPE attributes to change the numbering
sequence and numbering style.
 Use the LI tag to designate the individual list
items.
 Syntax

<OL
START="value"
TYPE="A"|"a"|"I"|"i"|"1"
>
...
</OL>
 START="value"
indicates the starting number for the list. The
number must be a positive integer.
TYPE
 defines the type of numbering sequence used for

each list item. The value can be one of the


following:
A specifies a sequence of uppercase letters
a specifies a sequence of lowercase letters
I specifies a sequence of uppercase Roman
numerals
i specifies a sequence of lowercase Roman numeral
1 specifies a sequence of numbers.
Example

<html>
<body>
<P>The following steps outline how to create
HTML files:</P>
<OL START="3" TYPE="I">
<LI> Use a text editor or Netscape Composer to
create your HTML file.
<LI> Put the HTML files on a web server.
<LI> Test the files by viewing them in a web
browser.
</OL>
</body>
</html>
unordered list
 The UL tag displays a bulleted list. You can use the
tag's TYPE attribute to change the bullet style.
Use the LI tag to designate the individual list items
in the list.
 Syntax
<UL TYPE="CIRCLE"|"DISC"|"SQUARE“>
 TYPE
defines the type of bullet used for each list item.
The value can be one of the following:

CIRCLE specifies a hollow bullet.

DISC specifies a solid round bullet (Netscape


Navigator's default).

SQUARE specifies a square bullet.


Example

<html>
<body>
<P>Netscape Composer offers the following
benefits</P>
<UL TYPE=“SQUARE”>
<li>Edit web pages directly in Navigator
<li>Easy options for setting background and
link colors
<li>As easy to use as any text editor
<li> No need to learn HTML
</UL>
</body>
</html>
Nested list
 Example:
<html>
<body>
<dl>
<ol>
<li> <dt>html
<dd>this is the hyper text markup
language
</ol>
</dl>
</body>
</html>
TABLE
 The TABLE tag defines a table.

 Inside the TABLE tag, use the TR tag to define rows in the
table, use the TH tag to define row or column headings,
and use the TD tag to define table cells.

 Syntax
<TABLE
ALIGN="LEFT|RIGHT"
BGCOLOR="color"
BORDER="value"
CELLPADDING="value"
CELLSPACING="value"
HEIGHT="height"
WIDTH="width"
COLS="numOfCols"
HSPACE="horizMargin"
VSPACE="vertMargin"
>
...
</TABLE>
ALIGN
specifies the horizontal placement of the
table.
 LEFT aligns the table on the left (the
default). The content following the table
flows to the right of the table.
 RIGHT aligns the table on the right. The
content following the table flows to the
left of the table.
 CENTER aligns the table in the center.
Content does not flow on either side.
BGCOLOR="color"
 sets the color of the background for the
table. This color can be overridden by a
BGCOLOR tag in the TH, TR, or TD tags.
BORDER="value"
 indicates the thickness, in pixels, of the
border to draw around the table. Give the
value as an integer. A value of 0 means
the table has no border.
CELLPADDING="value"
 determines the amount of space, in pixels,
between the border of a cell and the
contents of the cell. The default is 1.
CELLSPACING="value"
 determines the amount of space, in pixels,
between individual cells in a table. The
default is 2.
WIDTH="width"
 defines the width of the table. The
default is the optimal width determined
by the contents of each cell. The width
value can be a number of pixels, given as
an integer, or a percentage of the width
of the page or parent element, given as
an integer followed by the percent sign.
HEIGHT="height"
 specifies the height of the table. The
default is the optimal height determined
by the contents of each cell. The height
value can be a number of pixels, given as
an integer, or a percentage of the height
of the page or parent element, given as
an integer followed by the percent sign.
CAPTION
 The CAPTION tag defines a caption for a
table. Place the CAPTION tag within the
TABLE tag but not inside the TD or the TR
tags, which indicate table cells and table
rows respectively. This tag used within
TABLE tag.
 Syntax

<CAPTION
ALIGN="BOTTOM"|"TOP">...</CAPTION>
ALIGN
specifies the placement of the caption within a
table.

 BOTTOM places the caption at the bottom of


the table.
 TOP places the caption at the top of the
TR
 (table row)
 The TR tag specifies a table row. Use the TR tag inside a TABLE tag.
The TR tag can contain TH tags, which indicate table headings, and
TD tags, which indicate table cells.
 Syntax

<TR
ALIGN="CENTER|LEFT|RIGHT"
VALIGN="BASELINE|BOTTOM|MIDDLE|TOP"
BGCOLOR="color"
>
...
</TR>
ALIGN
specifies the horizontal placement of the table:
 CENTER centers the table .
 LEFT aligns the table to the left (the default).
 RIGHT aligns the table to the right.
VALIGN
specifies the vertical placement of the content in the cell:
 BASELINE aligns the content with the cell's baseline.
 BOTTOM aligns the content with the cell's bottom.
 MIDDLE centers the content within the cell (the default).
 TOP aligns the content with the cell's top.
BGCOLOR="color"
 sets the default color of the background of the table row
TD
(table data)
 The TD tag specifies text in a cell in a table.
Use the TD tag inside a TR tag inside a
TABLE tag.
 You can set the background color of a cell by
specifying its BGCOLOR attribute.
 To specify the distance between cells, set
the CELLSPACING attribute in the TABLE
tag. To specify the distance between the
borders of each cell and its contents, set the
CELLPADDING attribute in the TABLE tag.
 If a cell is empty, that is, the <TD> tag is
immediately followed by the </TD> tag, the
space occupied by the cell in the table is
completely empty.
 Syntax
 <TD
ALIGN="CENTER|LEFT|RIGHT"
VALIGN="BASELINE|BOTTOM|MIDDLE|
TOP"
BGCOLOR="color"
COLSPAN="value"
ROWSPAN="value"
HEIGHT="pixelHeight"
WIDTH="pixelWidth"
NOWRAP="value"
>
...
</TD>
TH
(table heading)
 The TH tag specifies a table cell whose contents
are usually displayed in a bolder font than those
of regular table cells. The intent of the TH tag is
that you use it for column or row headings.
 Syntax

<TH
ALIGN="CENTER|LEFT|RIGHT"
VALIGN="BASELINE|BOTTOM|MIDDLE|TOP"
BGCOLOR="color"
COLSPAN="value"
ROWSPAN="value"
HEIGHT="pixelHeight"
WIDTH="pixelWidth"
NOWRAP
>
...
</TH>
Example:
<html>
<head>
<title>SIT Table</title>
</head>
<body>
<table border="1" cellpadding="2" width="50%"
cellspacing="2">
<tr>
<th width="50%">Name</th>
<th width="50%">State</th>
</tr>
<tr>
<td width="50%">sit</td>
<td width="50%">tn</td>
</tr>
<tr>
<td width="50%">iit</td>
<td width="50%">chennai</td>
</tr>
</table>
</body>
<html>
<head> <title>SIT Table</title> </head>
<body>
<TABLE ALIGN="center" bgcolor="#FFFF00"
BORDER="4" CELLPADDING="2" CELLSPACING="2"
HEIGHT="10%" WIDTH="342">
<tr>
<th width="162" >Name</th>
<th width="190" colspan="3" >State</th>
</tr>
<tr>
<td width="15" >sit</td>
<td width="57" >tn</td>
<td width="55">india</td>
<td width="57">620010</td>
</tr>
<tr>
<td width="162">iit</td>
<td width="57">chennai</td>

</tr>
</table>
</body>
</html>
Forms
 The FORM tag creates an HTML form. The form can
contain interface elements such as text fields,
buttons, checkboxes, radio buttons, and selection
lists that let users enter text and make choices.
 With the form tag you can add to your web pages a
guestbook, order forms, surveys, get feedback or
whatever.
 Syntax
<FORM
ACTION="serverURL"
ENCTYPE="encodingType"
METHOD="GET"|"POST"
NAME="formName"
ONRESET="JScode"
ONSUBMIT="JScode"
TARGET="windowName"
>
...
</FORM>
 The ACTION attribute is required if any action is
to occur when the user presses a "Submit" button
in the form.
 METHOD
specifies how information is sent to program
invoked by submitting the form.
 GET (the default) appends the input information to the URL
 POST sends the input information in a data body that are available .
 NAME="formName"
specifies the name of the form. The name is
not displayed on the form.
 ONRESET="JScode"
specifies JavaScript code that executes
when a user resets the form by using a RESET
button.
 ONSUBMIT="JScode"
specifies JavaScript code that executes
when a user submits the form by clicking a
"Submit" button.
 TARGET="windowName"
specifies the window that displays the data
The simple Controls:
 Buttons
 Text Boxes
 Password Control
 Check Boxes
 Radio Buttons
 TEXT AREA
 Menu Controls
Buttons
 A button apears in the form. You must specify JavaScript
code as the value of the ONCLICK attribute to determine
what happens when the user clicks the button.
 Syntax
<INPUT TYPE="BUTTON"
NAME="buttonName"
VALUE="buttonText"
ONCLICK="JScode"
>
 TYPE = SUBMIT - submit of course, sends the
data...
 TYPE=RESET -clears the form.

 NAME="buttonName"
specifies the name of the button. The name does not
appear in the form.
 VALUE="buttonText"
specifies the text to be displayed in the button.
 ONCLICK="JScode"
specifies JavaScript code to execute when a user
Text Boxes
 A text element is a single line text input field in
which the user can enter text.
Syntax
 <INPUT TYPE="TEXT"
MAXLENGTH="maxChars"
NAME="name"
SIZE="lengthChars"
VALUE="text"
>
 MAXLENGTH="maxChars"
 specifies the maximum number of characters a
text box can accept.
 NAME="name"

specifies the name of the input element. This


value is used as the name portion of the
name/value pair for this element that is sent to
the invoked CGI program when the form is
submitted. The name is not displayed on the
form.
 SIZE="lengthChars"
 specifies the length of the input
field, in characters.
 VALUE="text"
 specifies the initial value of the text
element.
 For Example:
 <INPUT TYPE="text"
NAME="ADDRESS" SIZE=30
MAXLENGTH=10>
Password Control
Very similar to the TYPE=TEXT is the
TYPE=PASSWORD. It is exactly the same,
except it displays *** instead of the actual
input. The browser, will send you the input,
it just won't display it.
 For Example:

<form>
Enter the Password<input type="password"
name="userpass" value size="15">
</form>
Check Boxes
 These boxes are used to enable or
disable as option. In HTML,  this
boxes can be created by using:
 <FORM> <INPUT
TYPE="checkbox" NAME="Ed”
VALUE="YES">Ed Holleran
</FORM>
Radio Buttons
  These are used to allow the user to choose one of
the options displayed. To create radio buttons, the
attribute TYPE is given the value RADIO.
 The VALUE attribute is used to specify the value
to be stored in the variable of an option is selected.
 CHECKED indicates that the radio button is
selected. .
 For Example:

<form>
<input type="radio" value="V1" name="R1">Radio
Button
</form>
TEXT AREA
 These controls are used when the
input from the user may extend to
several lines. In this case, instead of
the <input> tag, <textarea> and
</textarea> tags are used.
 For Example:
 <textarea rows="4" name="S1"
cols="20"></textarea>
Menu Controls
 Menu controls are like the drop-down lists used
in window dialog boxes. Such menu controls can
be created using the <select> and the
</select> tags. The <option> tag is used to
specify the different option in the list. By using
<select> tag with the size attribute.
 For Example:

<select size="1" name="D1">


<option> @yahoo.com
<option> @123india.com
<option> @netaddres.com
</select>
<html>
<head>
<title>Forms</title>
</head>
<body bgcolor="#EEEEEE">
<h1>Forms</h1>
<form method="POST" action="fr1.htm">
Text Box<input type="text" name="T1" size="20"> Drop Down List
Menu
<select size="1" name="D1">
<option> @yahoo.com
<option> @123india.com
<option> @netaddres.com
</select>
<p>
<textarea rows="4" name="S1" cols="20"></textarea> Scrolling Text
Box
</p>
<p><input type="checkbox" name="C1" value="ON">Check Box</p>
<p><input type="radio" value="V1" name="R1">Radio Button</p>
<p><input type="submit" value="Submit" name="B3"><input
type="reset" value="Reset" name="B2">
Buttons</p>
<p>Password Control Box---&gt; Enter the Password <input
type="password" value size="15">
</p>
</form>
</body>
Frames and Framesets
 A frame is region of a window that
acts as a window itself. The main
window can contain multiple frames,
so that different regions of the
window display different contents. A
frame set is a set of frames.
 FRAME
 FRAMESET
 NOFRAMES
FRAME
 The FRAMESET tag contains a set of FRAME
tags, which each define a frame in the main
window.
 Each frame has a distinct URL that
determines the content displayed by the
frame.
 Syntax
 <FRAME
BORDERCOLOR="color"
FRAMEBORDER="YES"|"NO"
MARGINHEIGHT="marginHeight"
MARGINWIDTH="marginWidth"
NAME="frameName"
SCROLLING="YES"|"NO"|"AUTO"
SRC="URL"
>
FRAMESET
 The FRAMESET tag defines a set of
frames that appear in a web browser
window. The FRAMESET tag contains one
or more FRAME tags that each describe a
frame.
 Syntax
 <FRAMESET
COLS="columnWidthList"
ROWS="rowHeightList"
BORDERCOLOR="color"
FRAMEBORDER="YES"|"NO"
>
...
</FRAMESET>
NOFRAMES
The <NOFRAMES>
…</NOFRAMES> tag is used to
specify alternate text for browsers
that do not support frames. To make
your HTML page more interesting
you can create a link between
frames.
 Syntax

<NOFRAMES>...</NOFRAMES>
 For example:
Frame HTML:
<html>
<head>
<title>SIT-Frames</title>
</head>
<frameset rows="64,*">
<frame name="banner" scrolling="no" noresize
target="contents" src="h1.htm">
<frameset cols="150,*">
<frame name="contents" target="main" src="h2.htm">
<frame name="main" src="home.htm">
</frameset>
<noframes>
<body>
<p>This page uses frames, but your browser doesn't
support them.</p>
</body>
</noframes>
</frameset>
</html>
Banner Window HTML:
<html>
<head>
<title>SIT COMPUTER
CENTER</title>
<base target="contents">
</head>
<body>
<h1 align="center">SIT
COMPUTER CENTER</h1>
</body>
</html>
Content Window HTML:
<html>
<head>
<title>home</title>
<base target="main">
</head>
<body>
<p><a href="home.htm">home</a></p>
<p><a href="fr1.htm">frame page
1</a></p>
<p><a href="fr2.htm">frame page
2</a></p>
</body>
</html>
 Main Window HTML: (HOME PAGE)
<html>
<head>
<title>SIT HOME</title>
</head>
<body>
<h1 align="center"><font size="6"
face="Staccato222 BT"><u>Welcome To SIT
Computer Center</u></font></h1>
<p align="center"><span style="background-color:
#C0C0C0"><font face="Footlight MT Light"
size="6" color="#000080">Internet And JAVA
Programming</font></span></p>
<p align="right"><b><font face="Margaret"
size="5">-SITCC Team
Members</font></b></p>
</body>
</html>
STYLE
 The STYLE tag specifies a style sheet.
 There are two types of style sheets:

JavaScript style sheets and Cascading Style


Sheets (CSS).
 To specify that the style sheet is JavaScript,

the value of the TYPE attribute is


"text/javascript".
 The default value of TYPE is CSS. “text/css”

Syntax
 <STYLE

TYPE="stylesheetType">
...
</STYLE>
Elements of Styles
 Font name
 Font Size
 Text Indent
 Margin (left & right)
 Background color
 Text color
 Text alignment
The style is Used Within
<HEAD> and </HEAD>.

example
<HTML>
<HEAD>
<TITLE>Introduction to Style Sheets</TITLE>
<STYLE TYPE="text/css" >
BODY { color : white}
P { color : blue;
font-size : 12pt;
font-family : Arial}
H1 { color : red;
font-size : 18pt}
</STYLE>
</HEAD>
Cascading Style Sheet
 Type of CSS
1. Inline Style
2. External Style
3. Internal Style
Inline Style
 The in line style type is defined within the
body of the HTML itself.
 Example:

<html>
<head><title>In line Style</title></head>
<body> <h1 style=font-size:24pt >
<h1> this in line style</h1>
</body>
</html>
External Style
 The external style sheet it is stored in a
separate file.
 This style sheet linked by HTML through LINK
Tag.
 Syntax:

<LINK REL="stylesheet" TYPE="text/css"


HREF=“style1.css” SRC="styles/index.htm">
Example:
 Consider the any style sheet “style1.css”

P {font-size:18pt; margin-left:20pt;}
H1 {color : blue;}
Internal Style
<HTML>
<HEAD>
<TITLE>Introduction to Style Sheets</TITLE>
<STYLE TYPE="text/css" >
BODY { color : white}
P{ color : blue;
font-size : 12pt;
font-family : Arial}
H1 { color : red;
font-size : 18pt}
</STYLE>
</HEAD>
<body>
This is internal style sheet
</body>
</html>

You might also like