Scribd
Upload
84 views

HTML and Css

The document provides an overview of HTML including: 1. Tim Berners-Lee developed HTML as a markup language for creating web pages that can be viewed in browsers. HTML tags specify formatting and are delimited by angle brackets. 2. Common HTML tags are described including headings, paragraphs, lists, tables, and font formatting. Tags can be singleton like <hr> or paired like <p>. 3. Examples are given of using different HTML tags to demonstrate their functionality including headings, paragraphs, lists, tables, and other text formatting tags.

Uploaded by

SNEHITH INJAM
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
84 views

HTML and Css

The document provides an overview of HTML including: 1. Tim Berners-Lee developed HTML as a markup language for creating web pages that can be viewed in browsers. HTML tags specify formatting and are delimited by angle brackets. 2. Common HTML tags are described including headings, paragraphs, lists, tables, and font formatting. Tags can be singleton like <hr> or paired like <p>. 3. Examples are given of using different HTML tags to demonstrate their functionality including headings, paragraphs, lists, tables, and other text formatting tags.

Uploaded by

SNEHITH INJAM
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 19

UNIT – 1

Introduction

1. Tim Berners-Lee developed html. HTML stands for Hypertext Markup Language basis
for creating a web page. The html programs output can be seen after using browser.
2. It is object-based language, not an object oriented language (like java), neither a
procedural language (like c, FORTRAN e.t.c).
3. Html pages can be developed to be simple text or to be complex multimedia program
containing sound, moving images and java applets.
4. Html is considered to be the global publishing format for Internet. It is not a
programming language.
5. HTML standards are created by a group of interested organizations called W3C (World
Wide Web consortium).
6. In HTML use tags specifies formatting. A tag is a format name surrounded by angle
brackets. End tags that switch a format off also contain a forward slash.
7. Html documents are saved with dot htm or html extension.
8. Html documents will run on any browser.

Points to be remembered for HTML tags


1. Angled brackets delimit tags.
2. They are not case sensitive i.e., <head>, <HEAD> and <Head> is equivalent.
3. If browsers not understand a tag it will usually ignore it.
4. Some characters have to be replaced in the text by escape sequences.
5. The browser ignores white spaces, tabs and new lines.
6. Tags contain attributes. The head tag is used for control information by the browser
and the body tag contains the actual user information that is to be displayed on the screen.

HTML Common Tags


Tags are of two types
1. Singleton tags (don’t require ending tag. e.g. <HR>).
2. Paired tags (which require ending tag. e.g. <Html>).

1. Body Tag
1. It contain some attributes such as bgcolor, background etc.
2. To change the color of links or of the page background hexadecimal values are placed
in the <body> tag.
3. Background attribute will take the path of the image, which you can place as the
background image in the browser.
4. The vlink attribute sets the color of links visited recently, alink the color of a currently
active link. The six figure hexadecimal values must be enclosed in double quotes and
preceded by a hash (#).

<Body bgcolor=”#F2F3F4” background= “c:\image1.gif” text=”yellow”


Link= “#nnnnnn” vlink= “#nnnnnn” alink= “#nnnnnn”>
2. Paragraph Tag
1. To declare a text as a paragraph in an html document we use paragraph tag.
2. Each paragraph is aligned to the left, right or center of the page by using an attribute
called as align.
<P align=”left” | “right” | “center”>Text paragraph</P>
3. Heading Tag
Html is having 6 levels of headings. The largest heading tag is <h1>. The different
levels of heading tag besides <h1>, <h2>, <h3>, <h4>, <h5> and <h6>.
<H1 align=”left” | “right” | “center”> Header Tag </H1>

4. Hr Tag
It places a horizontal line across the system to break the page and contains attribute
width, which draws the horizontal line with the screen size of the browser. This tag does
not require an end tag.
<Hr width=”50%” Align=”left” size=”5” NOSHADE>.

5. Base font Tag


It specify format for the basic text but not the headings.
<Base font size=”10”>

6. Font Tag
It sets font size, color and relative values for a particular text.
<Font size=”10” color=”#f1f2f3” face=”face name”>

7. Bold Tag
It is used for implement bold effect on the text.
<B>text displayed in bold </b>

8. Italic Tag
It implements italic effects on the text.
<I> text displayed in italic</I>
9. Strong Tag
This tag is used to always emphasize the text.
<Strong>emphasize text</strong>

10. Tt Tag
It is used to give typewriting effect on the text.
<Tt> typewriting effect on the text </tt>

11. Sub and sup Tag


These tags are used for subscript and superscript effects on the text.
<Sub>. ………</sub>
<Sup>………..</sup>
Example
CO2 <B>CO<sub>2</sub></B>
A2+b2 <B>a<sup>2</sup>+b<sup>2</sup></B>
12. Break Tag
It is used to the break the line and start from the next line.
<Br>

13. &Amp &lt &gt &nbsp &quot


a. &Amp means it writes “&” at output, &lt writes less than symbol, &gt write greater
than symbol in the output, &nbsp means it gives a space.
b. Html control sequences are displayed using these character escape sequences.

Example < can be represented as &lt.

14. Anchor Tag


It is used to link two Html pages. Href is an attribute that is used for giving the path of
the file, which you want to Link using anchor tag.

<A href=”file path” Name=”text displayed as link” target=”window”> Anchor Tag</a>

15. Underline Tag


It is used to underline a text.
<U>Underline Tag</U>
16. Strike or Del Tag
It is used to strike a text.
<Del>Strike Tag</del>
<S>Strike Tag</s>
17. Pre Tag
It is used to print the text.
<Pre>Pre Tag</Pre>
18. Samp Tag
It is used to write code sample text.
<Samp>code sample text</Samp>

19. Address Tag


It’s like address model (looks like italics).
<Address>address tag</Address>

20. Var Tag


It is used for small fonts, fixed width.
<Var>Var Tag</var>

21. Em Tag
It is used for Emphasis (new standard for italics).
<EM>Text</EM>

22. Marquee Tag


It is used to scroll the text from left to right, right to left and top to button and bottom to
top. <Marquee direction="left |right |up |down" >Text</marquee>
1. Write a sample program that uses all HTML common tags.

<Html>
<Head><title>Tags demonstration</title></head>
<Body bgcolor="blue" text="yellow">
<H6 align="center"> Header1</h1>
<H5 align="center"> Header2</h2>
<Hr size=5 width=60% align="center">
<Base font size=4>
Base font
<P> paragraph</p>
<B>bold tag</b><br>
<I>Italic Tag</I><br>
<Tt>Typing text effect</tt><br>
<Strong> strong</strong><br>
&Quot quote &quot<br>
Subscript <B>CO<sub>2</sub></B>&nbsp&nbsp
superscript<B>a<sup>2</sup>+b<sup>2</sup></B><br>
Ampersand &AMP<br>
Less than &LT<br>
Greater than &gt<br>
<U>Underline Tag</U><br>
<S>Strike Tag</s><br>
<Del>Strike Tag</del>
<Pre>Pre Tag</Pre>
<Samp>code sample text</samp><br>
<Var>Small fonts, fixed width</var><br>
<Address>address tag</Address>
<Em>Emphasis (for italics)</Em><br>
<A href=”c:\”> Anchor Tag</A>
</body>
</html>

Lists
It is a collection of items. Lists are of five types. They were
a. Ordered lists. b. Unordered lists.
c. Definition lists. d. Directory lists.
e. Nested list.

Ordered lists
1. In this list of items have an order that is signified by numbers.
2. Ordered lists are also called as numbered lists.
3. Ordered lists starts with <OL> tag which followed by<LI>tag and ends with </OL>.
4. Different Ordered lists types like numeral lists, alphabetic list e.t.c can be specified
with TYPE attribute.
Syntax
<OL Type=1 or I or a or A or i Start=value>
<Li>Item Name1
-----------
<Li>Item Name n
</OL>

Example
<Html>
<Head><Title>ordered lists</title></head>
<Body>
Numbered lists Output
<OL TYPE=1 START=4>
<Li>Item 1
<Li>Item 2
</OL>

Alphabetic list
<OL TYPE=a START=2>
<Li>Item 1
<Li>Item 2
</OL>

Roman numeral list


<OL TYPE=I START=2>
<Li>Item 1
<Li>Item 2
<Li value=5>Item 3
<Li>Item n
</OL>
</body>
</html>

Unordered lists
1. It is used to present a list of items, which are typically separated by white space and or
marked by bullets.
2. Unordered lists are also called as unnumbered lists.
3. Unordered lists starts with <UL> tag which followed by<LI>tag and ends with </UL>.

Syntax
<UL Type=Square or disk or circle>
<Li>Item Name1
<Li>Item Name2
-----------
<Li>Item Name n
</UL>
Example
<Html> Output
<Head><Title>Unordered lists</title></head>
<Body>
Unordered list
<Ul TYPE=circle>
<Li>Item 1
<Li TYPE=square>Item 2
<Li>Item 3
<Li TYPE=disk>Item n
</Ul>
</body>
</html>

Definition List
1. Definition list tag<DL> numbers or bullet is not used in front of the list item. Instead
it uses definition for the items. <DD>, <DT> are sub tags of <DL>.
2. Definition term tag <DT> is used for marking the items whose definition is provided
in the next data definition.
3. Definition description tags <DD>, definition of the terms are enclosed within these
tags. The definition may include any text or block.

Example
<Html>
<Head><Title>Definition lists</title></head>
<Body>
<Dl>
<DT> Web Technologies</DT>
<Dd> This subject is related to the technologies used in web applications</dd>
</dl>
</body>
</html>

Output
Web Technologies
This subject is related to the technologies used in web applications

Directory Lists
1. It is used to present a list of items containing up to 20 characters each.
2. It start with <DL> followed by <LI> tag ends with </DL>.
3. It may be arranged in columns, typically 24 characters wide.
4. Instead <DIR> we use <UL> because it is a deprecated tag and is not preferable to use.

Example Output
<Html>
<Head><Title>Directory lists</title></head>
<Body>Directory lists
<DIR>
<Li>Item 1
<Li>Item 2
</DIR>
</body>
</html>

Nested Lists
List with in another list is called as nested list.

Tables
1. A large data stored in a table can be easily referred because it provides an organized
and systematic display of data.
2. Spanning of cells is possible that is you can merge some sequence of rows or columns
with the help of ROWSPAN or COLSPAN attributes respectively.

Table Tags Purpose


<Table> Indicates start of table
<Thead> Starts the header part of table and it should followed by <TH>
<TH> Used to give the table heading
<TBODY> Starts the main area of table, says actual data is started.
<TR> Indicates starting of a table row
<TD> Actual data for a cell, for each cell we should give <TD>
<TFOOT> Used to define foot information of the table.
<CAPTION> To insert caption in to table, inserts caption data directly above the
table caption text is used to help text-based browsers interpret the table
data.

<Table align=”center” | “left” | “right” border=”n” width=”n%” cellpadding=”n”


cellspacing=”n” border="4" bgcolor="green" bordercolor="white" >
----------------------Table Code----------------
</table>

1. Write a program to use all tags related to table.

<HTML>
<HEAD><TITLE>Table</TITLE><HEAD>
<BODY>
<table align="center" border="4" bgcolor="green"
bordercolor="white" >
<Caption>Student details</caption>
<THEAD>
<TR>
<Th>Name</Th>
<Th>Class</Th>
<Th>Branch</Th>
<Th>Roll no</Th>
</TR>
</thead>
<TR>
<td>a</td>
<td>1</td>
<td>cse</td>
<td>1</td>
</TR>
<TR>
<td>b</td>
<td>1</td>
<td>cse</td>
<td>2</td>
</TR>
<Tfoot>Table Foot</tfoot>
</Table>
</BODY>
</HTML>

2. Write a program for demonstration of ROWSPAN and COLSPAN.

<HTML>
<HEAD><TITLE>Table</TITLE><HEAD>
<BODY>
<table align="center" cellpadding="5" cellspacing="4" border="4" bgcolor="green"
bordercolor="white" >
<THEAD>
<TR>
<Th rowspan=2>Features</Th>
<Th colspan="2">Companies</Th>
</TR>
<TR>
<Th>Compaq</Th>
<Th>laser</Th>
</TR>
</thead>
<TR><td>price</td> <td>1</td> <td>2</td>
</TR>
</Table>
</BODY>
</HTML>
FORMS
1. Html provides several user interface elements to accept data from user using Form.
I.e. Forms are the best way of adding interactivity of element in a web page. They are
Usually used to let the user to send information back to the server but can also be used to
Simplify navigation on complex web sites.

2. Html form is used to create user interface screens. Action and method are the two
attributes of form.

3. Multiple forms can be used in a single HTML document.

<form name=”form name” action=”URL” method = “post /get”>Form code</form>

4. Attributes of form
a. Name b. Action c. Method.

NAME
Any name can be given to form.

ACTION
It indicates path to the script.
I.e. when user submits the form where it should go is given in action attribute.

METHOD
1. It specifies how the data entered in the form is sent to the destination, which may be
the web server.
2. There are two methods of sending of information.
a. Post.
b. Get.

POST METHOD
1. It sends the information along with the body of the html page.
2. Data is not visible while sending.
3. Provides security.
4. Can send any number of characters can be send.
5. Special characters are also possible to send.

GET METHOD
1. It sends the data along with web page address that is appended to the URL.
2. Data is visible in site address.
3. No security, because password also sent like this.
4. Only limited number of characters.
5. Special characters are not possible to send, only for standard characters.

1. Write an html program, which uses form to add two numbers.


<Html>
<Head><title>my computer</title></head>
<script language="javascript">
function add ()
{
var a,b,sum;
a=parseInt(document.f1.n1.value);
b=parseInt(document.f1.n2.value);
sum=a+b;
document.f1.n3.value=sum;
}
</script>

<body bgcolor="blue" text="yellow">


<form Name="f1">
Enter first integer <br><input name="n1" type="text"><br>
Enter second integer<br><input name="n2" type="text"><br>
Sum of two numbers <br><input name="n3" type="text"></br></br>
<input type="button" value=" add " ONCLICK="add()">
<input name="n4" type="reset" value="reset" ></br>
</form>
</body>
</html>

2. Write an html program which uses form attributes action and method to open
local drive c and add html page

<Html>
<Head><title>form get and post methods</title></head>
<body bgcolor="blue" text="yellow">
<form Name="f1" method="get" action="C:\">
<input type="submit" value=" Get method open Cdrive " >
<input name="n1" type="reset" value="reset" ></br>
</form>

<form Name="f2" method="post" action="D:\">


<input type="submit" value=" post method open Ddrive " >
</form>

<form Name="f3" method="post" action="add.html">


<input type="submit" value="post method open add html page " >
</form>
</body>
</html>
Note
1. <Input TYPE=”CHECKBOX | FILE | HIDDEN | IMAGE | PASSWORD |
RADIO | RESET | SELECT-MULTIPLE | SELECT-ONE | SUBMIT | TEXT |
TEXTAREA” name=”string” value=”string” size=”n”>

2. The attribute type is used to implement text, password, checkbox, and radio and submit
button e.t.c.

Tags used inside the form tag


CHECKBOX
Used for simple Boolean attributes or for attributes that can take multiple values at the
same time. It is represented by a number of check box fields, each of which has the same
name. Each selected check box generates a separate name/value pair in the submitted
data, even if this results in duplicate names. The default value for check boxes is on.

FILE
A file upload element.

HIDDEN
No field is presented to the user, but the content of the field is sent with the submitted
form. This value can be used to transmit state information about client/server interaction.

IMAGE
An image field which you can click, causing the form to be immediately submitted. The
coordinates of the selected point are measured in pixel units from the upper-left corner of
the image, and are returned (along with the other contents of the form) in two name/value
pairs. The x-coordinate is submitted under the name of the field with .x appended, and the
y-coordinate is submitted under the name of the field with .y appended. Any
VALUE=attribute is ignored. The image itself is specified by the SRC= attribute, exactly
as for the Image element.

PASSWORD
The same as the TEXT attribute, except that text is not displayed as the user enters it.

RADIO
Used for attributes that accept a single value from a set of alternatives. Each radio-button
field in the group should be given the same name. Only the selected radio button in the
group generates a name/value pair in the submitted data. Radio buttons require an explicit
Value attribute.

RESET
It is a button that when pressed resets the form's fields to their specified initial values.
The label to be displayed on the button may be specified just as for the SUBMIT button.

SELECT-MULTIPLE
Specifies a multiple select list box.
SELECT-ONE
Specifies a single-select list box.

SUBMIT
It is a button, when it is pressed the form data is send to the corresponding sever of that
form.

TEXT
Used for a single-line text-entry field. Important Attributes of text are SIZE= and
MAXLENGTH=.

TEXTAREA
It is used to write the text. Used
for multiple-line text-entry fields. Use in conjunction with the
size and maxlength attributes.

<textarea name=”string” rows=”n” cols=”n”>…….</textarea>


This creates a free format of plain text into which the user can enter anything they like.
The area will be sized at rows by cols but supports automatic scrolling.

LIST
It is used to have a list of item from which a user can choose. The name of the particular
select tag and the name of the chosen option are returned.

<Select name=”string”>…</select>
<Option value=”string” selected>…</option>

The select statement will have several options from which the user can choose. The
values will be displayed as the user moves through the list and the chosen one returned to
the server.

Frames
1. Normally only one HTML page can be displayed in the web browser at a time but
using the concept of frames more than one HTML page can be displayed on the browser
at a time.
2. Window is logically called as frame in HTML.
3. Collection of frame into a set is called as frameset, which provides facility to display
more than one page at a time on the browser.
I.e. frameset is collection of frames.
4. Web page that contains frame elements is called framed page.
5. Framed page begins with <FRAMESET> tag and ends with </ FRAMESET>.
6. Each individual frame is identified through <FRAME> tag.
7. Each HTML document is called a frame, and each frame is independent of the others.

FRAMESET Tag
It defines how to divide the window into frames each frameset defines a set of rows or
columns. The values of the rows/columns indicate the amount of screen area each
row/column will occupy.
<Frameset cols=” %, %” | rows=” %, %”> code</frameset>
<Frame name=”name” src=”filename” scrolling =” yes or no” frameborder =”0 or 1”>

ROWS ATTRIBUTE
It takes as its value a comma separated list of values. These values can be absolute pixel
values, percentage values between 1 and 100, or relative scaling values. The number of
rows is implicit in the number of elements in the list.

Example
1. For 3 rows, the first and the last being smaller than the center row:
<FRAMESET ROWS="20%, 60%, 20%">
2. For 3 rows, the first and the last being fixed height, with the remaining space assigned
to the middle row: <FRAMESET ROWS="100, *, 100">

COLS ATTRIBUTE
It takes as its value a comma separated list of values that is of the exact same syntax as
the list described above for the ROWS attribute.

BORDER ATTRIBUTE
It accepts a pixel value, which determines the thickness of any borders used within the
frame set.

FRAME Tag
This tag defines a single frame in a frameset. It has 6 possible attributes.

SRC ATTRIBUTE
It takes as its value the URL of the document to be displayed in this particular frame.
Frames without SRC attributes are displayed, as a blank space the size the frame would
have been.

NAME ATTRIBUTE
It is used to assign a name to a frame so it can be targeted by links in other documents
(These are usually from other frames in the same document.) The NAME attribute is
optional; by default all windows are unnamed.

Names must begin with an alphanumeric character. However, several reserved names
have been defined, which start with an underscore. These is currently:
_Blank always load this link into a new, unnamed window.
_Self always load this link over your self.
_Parent always load this link over your parent. (Becomes self if you have no parent).
_Top always load this link at the top level. (Becomes self if you are at the top).

MARGINWIDTH ATTRIBUTE
It is used when the document author wants some control of the margins for this frame. If
specified, the value for MARGINWIDTH is in pixels. Margins can not be less than one-
so that frame objects will not touch frame edges-and can not be specified so that there is
no space for the document contents. The MARGINWIDTH attribute is optional; by
default, all frames default to letting the browser decide on an appropriate margin width.

MARGINHEIGHT ATTRIBUTE
It is just like MARGINWIDTH above, except it controls the upper and lower margins
instead of the left and right margins.

SCROLLING ATTRIBUTE
It is used to describe if the frame should have a scrollbar or not. Yes results in scrollbars
always being visible on that frame. No results in scrollbars never being visible. Auto
instructs the browser to decide whether scrollbars are needed, and place them where
necessary. The SCROLLING attribute is optional; the default value is auto.

NORESIZE ATTRIBUTE
It has no value. It is a flag that indicates that the frame is not resizable by the user. Users
typically resize frames by dragging a frame edge to a new position. Note that if any frame
adjacent to an edge is not resizable, that entire edge will be restricted from moving. This
will affect the resizability of other frames. The NORESIZE attribute is optional; by
default all frames are resizable.

Disadvantages of Frames
1. The web developer must keep track of more HTML documents
2. It is difficult to print the entire page

1. Write a program to divide a web page into two equal half’s and divide the second half
into two equal half using frames.

Open.html frame1.html
<Html> <font size="5">
<frameset rows="50%,50%"> <center>Frame1<center>
<frame src="frame1.html" noresize="noresize">
<frameset cols="50%,50%">
<frame src="fc1.html">
<frame src="fc2.html">
</frameset>
</frameset>
</html>

fc1.html fc2.html
<font size="5"> <font size="5">
<Center>Frame column1<center> <center>Frame column2<center>
Output

Cascading Style sheets


1. It is used to change the style of the web page or pages or web element.
Example: Changing the font color in a web page using style tag or style element.
2. It is used in HTML to format the web page content.
3. It allows us to separate content from presentation that simplifies maintaining web page.
4. CSS uses style tag or style element to change the style of the web page or pages or web
element.
5. A style is a set of formatting instructions that can be applied to a piece of text.
The mechanisms by which we can apply styles to our HTML documents are
a. Style can be defined within the basic HTML tag.
b. Style can be defined in the <head> tag
c. Styles can be defined in external files called style sheets, which can then be used in any
document by including the style sheet via a URL.

6. A style has two parts


a. Selector. b. Set of declarations.

Selector
It is used to create a link between the rule and the HTML tag. The declaration has two
parts: a property and a value. Declarations must be separated using colons and terminated
using semicolons. Selector {property: value; property: value.}

Properties and values in styles Backgrounds and Colors


Fonts: Color: value
Font-family: <family name. Background-color: value
Font-style: normal | italic | oblique Background-image: URL
Font-weight: normal | bold | bolder | lighter
Font-size: small | medium | large | smaller | larger
Text
Text-decoration: none | underline | over line
Text-transformation: none | uppercase | lowercase
Text-align: left | right | center | justify
Text-indentation: length | percentage

7. Types of Style Sheets


There are several ways to define style sheets within a document. They were
a. Internal style sheets.
b. External style sheets.

Internal style sheets


They are of two types. They were using
1. Embedded — the style is defined within the <style> tags for the HTML document.
I.e. using Style tag.
2. Inline — the style is defined for a specific HTML element.
I.e. using Style element.

External style sheets


It is created with dot HTML or with dot CSS file Extension.

Embedded Style Sheet


A style sheet that is created with the HTML <style></style> tags right in the current
document is called an embedded style sheet. Te style is defined in an external file.

The <style> Tag


The <style></style> tags were introduced into HTML to allow the style sheets to be
inserted right into an HTML document. They are used to create a set of rules to define the
style of an HTML element(s). The <style></style> tags are placed between the
<head></head> tags in the document, as shown here:

<html><title>CSS Example</title>
<head>
<Style type="style sheet language">
h1 { color: blue ; }
</style>
</head>

Type Attribute
Style sheet language can be used specified to the browser that More than one language
is used by the style tag using type attribute of the HTML <style> tag.

Format <Style type="style sheet language">

Example specifies that the type is text/css; that is, text and cascading style sheet.
<Style type="text/css">
The Inline Type and the <style> Attribute
Inline style sheets are also embedded within an HTML document, but are assigned as an
attribute of the <style> tag in the body of the document and are useful for overriding an
already existing style for a particular element in a linked style sheet. On the negative side,
they have to be redefined for any element that requires that style, element by element. For
example, if the h1 element has been defined to be blue and you want to temporarily
change it to red, you can define the style as an attribute of the style tag for that element:

<H1 style= "color: red; "> this is red text</ H1>

The External Type with a Link


External style steets are used to the style of more than one page; in fact, you can use the
same style for hundreds, thousands, or millions of pages. External style sheets are stored
in an external file, not the current HTML file and has extension as .css or .html or .htm
extension. To link the external file to the existing HTML file, a link is created as

<Link rel=’style sheet” href="style_file.css" type="text/css">

Creating a Style Class


Rather than globally defining a style for an element, you can customize the style by
defining a class. The class style can be applied to individual tags when needed. The class
name, called the class selector, is preceded by a period and followed by the declaration
enclosed in curly braces.

FORMAT Classname {property: value; property: value;}


Example header { font-family: verdana, helvetica ; }

A class can be used on any of the HTML elements in the body of the document as long as
that element understands the style you have applied to it. To apply the class, you use the
class attribute. The class attribute is assigned the name of the class; for example, for the
<p> tag, you would stipulate <p class=name> where name is the name of the class.

Positioning Elements and Layers


CSS has the ability to position objects on a page, to size them, and to make them either
visible or invisible. This feature makes to move objects to different sections of a page,
move text and images, and create animation, tool tips, scrolling text, and more. Normally
when you place tags in an HTML document, the flow is from top to bottom. Now, with
style sheets, you can set the position of an element, even layering one on top of the other.

Property Means
Bottom, right The placement of the bottom, right edges of an element
Position How to position the element on the page
Top, left The placement of the top, left edges of an element
Width, height The size in width and height of an element's content.
Visibility Whether an element can be seen
Z-index The third dimension in a stack of objects
Absolute Positioning
It places an element in a specific location on the page and can be used to achieve full
animation; for instance, moving an image across a page. It is used to specify the absolute
coordinates (x, y) of the element in terms of the browser window itself. The top and left
properties are used to determine the coordinates. If not specified, the browser will assume
the top left corner of the browser window, where x is 0 and y is 0. The top left corner of
the window is position 0,0 and the bottom right corner depends on the resolution of the
screen. If the screen resolution is set to 800 pixels in width and 600 pixels in height, the
bottom right corner is positioned at coordinates 800, 600.

1. Write a program for display 3 layers using CSS.

<html> OUTPUT: -
<head> <title>layers</title></head>
<style type="text/css">

#first{
background-color: red;border-style: solid; font-weight:bold;top: 20;
position: absolute; left: 20; height: 100; width: 100;
}
#second{
background-color: blue; border-style: solid; font-weight:bold;
top: 30 ; position: absolute; left: 60; height: 100; width: 100;
}
#third{
background-color: orange;border-style: solid;font-weight:bold;
top: 40 ; position: absolute; left: 100;height: 100; width: 100;
}
</style>
<body>
<p id="first"> First position </p>
<p id="second">Second position </p>
<p id="third"> Third position </p>
</body>
</html>

The <div> Tag


It serves as a container where you can put other elements, give them color, borders,
margins, etc. It is also used for absolute positioning of a block of text that separates itself
from other content in the document. It allows you to create a paragraph style independent
of the <p> tag. Within the block, the <span> tags can be used to introduce other styles.

<div> <p>This is a paragraph.</p> </div>

Relative Positioning
It places the element in a position relative to the element where it is defined in the
document. In the following example the. ParaStyle class is positioned relative to where it
should be placed within its container, a div block.
The z-index and Three Dimensions
The last type of position sets the precedence of a stack of overlapping elements. The
absolute position properties include three coordinates: x, y, and z, where x is the left side
of an object, y is the right side, and z is the value of the stacking position. If you have
three containers layered on top of each other, the z position of the bottom layer is 0; the
next layer, 1; and the top layer in the stack is layer 2. JavaScript will allow us to move
these objects around, rearranging the stacking order dynamically, by manipulating the z-
position.

1. Write a program for demonstrating CSS internal style sheets and external style sheets.
Open.html
<Html>
<Head>
<Title>Style sheets</title>
<Link rel="stylesheet" type="text/css" href="csslink.html">
</head>
<style type="text/css">
Body {background-image: url("a.JPG")}
Body {background-color: blue}
</style>
<Body >
<a href="C:\" class="xlink" >cross link</a><br>
<a href="" class="hlink">help hair</a>
<p>HTML</p>
</body>
</html>

csslink.html or we can save it with dot CSS extension.


<Style type="text/css">
.xlink {cursor: crosshair}
.hlink {cursor: help}
a: link{color: green}
a: active{color: maroon}
a: hover{color: blue}
P {font-family: arial; font-size: 40pt; color: blue}
</style>

You might also like