Dynamic Hyper Text Markup Language
Dynamic Hyper Text Markup Language
Dynamic HTML
DHTML has evolved to meet the increasing demand for eye
catching web sites.
CSS saves time - You can write CSS once and then reuse
the same sheet in multiple HTML pages. You can define a
style for each HTML element and apply it to as many web
pages as you want.
Pages load faster - If you are using CSS, you do not need
to write HTML tag attributes every time. Just write one
CSS rule of a tag and apply it to all the occurrences of that
tag. So, less code means faster download times.
Advantages of CSS(contd..)
A CSS comprises of style rules that are interpreted by the browser and then applied to
the corresponding elements in your document.
The Style assignment process is accomplished with the <STYLE>….</STYLE> tags.
Between the <STYLE>….</STYLE> tags, specific style attribute are listed.
The <STYLE>….</STYLE> tags are written within the <HEAD>…</HEAD>
TAGS.
A style rule is made of three parts:
Selector: A selector is an HTML tag at which a style will be applied. This could be
any tag like <h1> or <table> etc.
Property: A property is a type of attribute of HTML tag. Put simply, all the HTML
attributes are converted into CSS properties. They could be color, border, etc.
Value: Values are assigned to properties. For example, color property can have the
value either red or #F1F1F1 etc.
You can put CSS Style Rule Syntax as follows:
selector { property: value }
EXAMPLE
<STYLE Type = “text/css”>
Tag{attribute:value;attribute:value;}
</STYLE>
Ways to define selectors
You can define style rules based on the class attribute of the elements. All the elements
having that class will be formatted according to the defined rule.
.black {
color: #000000;
}
This rule renders the content in black for every element with class attribute set to black in
our document. You can make it a bit more particular. For example:
h1.black {
color: #000000;
}
This rule renders the content in black for only <h1> elements with class attribute set to black.
You can apply more than one class selectors to a given element. Consider the following
example:
<p class="center bold">
This para will be styled by the classes center and bold.
</p>
The ID Selectors
You can define style rules based on the id attribute of the elements. All the
elements having that id will be formatted according to the defined rule.
#black {
color: #000000;
}
This rule renders the content in black for every element with id attribute set
to black in our document. You can make it a bit more particular. For
example:
h1#black {
color: #000000;
}
This rule renders the content in black for only <h1> elements with id
attribute set to black.
.
The Child Selectors
You may need to define multiple style rules for a single element. You can
define these rules to combine multiple properties and corresponding
values into a single block as defined in the following example:
h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
Here all the property and value pairs are separated by a semicolon (;).
You can keep them in a single line or multiple lines. For better
readability, we keep them in separate lines.
Grouping Selectors
You can apply a style to many selectors if you like. Just separate the selectors with a comma, as given
in the following example:
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
This define style rule will be applicable to h1, h2 and h3 element as well. The order of the list is
irrelevant. All the elements in the selector will have the corresponding declarations applied to them.
You can combine the various class selectors together as shown below:
#content, #footer, #supplement {
position: absolute;
left: 510px;
width: 200px;
}
Inclusion
There are three ways to associate styles with your HTML document.
Embedded CSS -The <style> Element
You can put your CSS rules into an HTML document using the
<style> element. This tag is placed inside the <head>...</head>
tags. Rules defined using this syntax will be applied to all the
elements available in the document. Here is the generic syntax:
<head>
<style type="text/css“ >
Style Rules
............
</style>
</head>
Attributes of <style>
<head>
<style type="text/css" media="all">
h1{
color: #36C;
}
</style>
</head>
Inline CSS -ThestyleAttribute
href URL Specifies the style sheet file having Style rules.
This attribute is a required.
media Screen Specifies the device the document will be
tv displayed on. Default value is all. This is an
projection option
handheld
Print
all
Example
Consider a simple style sheet file with a name mystyle.css having the
following rules:
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
Now you can include this file mystyle.css in any HTML document as follows:
<head>
<link rel=“stylesheet” type="text/css" href="mystyle.css" media="all" />
</head>
CSS Rules Overriding
Many times, you may need to put additional comments in your style sheet blocks.
So, it is very easy to comment any part in the style sheet. You can simply put your
comments inside /*.....this is a comment in style sheet.....*/.
You can use /* ....*/ to comment multi-line blocks in similar way you do in C and C+
+ programming languages.
Example
/* This is an external style sheet file */
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
/* end of style rules. */
MEASUREMENT UNITS
Example:
<p style="background-color:yellow;">
This text has a yellow background color.
</p>
Set the Background Image
<table style="background-
image:url(/images/pattern1.gif);">
<tr><td>
This table has background image set.
</td></tr>
</table>
Repeat the Background Image
The following example demonstrates how to repeat the background image if an image is small.
You can use no-repeat value for the background-repeat property if you don't want to repeat an image. In this case, the image will display only
once.
By default, the background-repeat property will have a repeat value.
<table style="background-image:url(/images/pattern1.gif);
background-repeat: repeat;">
<tr><td>
This table has background image which repeats multiple times.
</td></tr>
</table>
The following example which demonstrates how to repeat the background image vertically.
<table style="background-image:url(/images/pattern1.gif);
background-repeat: repeat-y;">
<tr><td>
This table has background image set which will repeat vertically.
</td></tr>
</table>
The following example demonstrates how to repeat the background image horizontally.
<table style="background-image:url(/images/pattern1.gif);
background-repeat: repeat-x;">
<tr><td>
This table has background image set which will repeat horizontally.
</td></tr>
</table>
Set the Background Image Position
The following example demonstrates how to set the background image position 100 pixels away
from the left side.
<table style="background-image:url(/images/pattern1.gif);
background-position:100px;">
<tr><td>
Background image positioned 100 pixels away from the left.
</td></tr>
</table>
The following example demonstrates how to set the background image position 100 pixels away
from the left side and 200 pixels down from the top.
<table style="background-image:url(/images/pattern1.gif); background-position:100px 200px;">
<tr><td>
This table has background image positioned 100
pixels away from the left and 200 pixels from the top.
</td></tr>
</table
Fonts
<P>
The vision of this company is to provide any corporate client a
single entity which address all their Software Development,
Technical and User Documentation, Training and Manpower
Recruitment needs.
</BODY>
</HTML>
Set the Font Family
Usually, all these properties are kept in the header part of the HTML document.
Remember a:hover MUST come after a:link and a:visited in the CSS definition in order to
be effective. Also, a:active MUST come after a:hover in the CSS definition as follows:
<style type="text/css">
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>
TABLES
We have the following five CSS properties, which can be used to
control lists:
The list-style-type allows you to control the shape or
appearance of the marker.
The list-style-position specifies whether a long point
that wraps to a second line should align with the first
line or start underneath the start of the marker.
The list-style-image specifies an image for the marker
rather than a bullet point or number.
The list-style serves as shorthand for the preceding
properties.
The list-style-type Property
Value Description
disc A filled-in Circle
Circle An Empty Circle
square A Solid Square
values for an ordered list
Value Description Example
Decimal Number 1,2,3,4
Decimal-leading- 0 before the number 01,02,03
Zero
Lower-alpha Lowercase alphanumeric a,b,c,d
characters
Upper-alpha Uppercase alphanumeric A,B,C,D
characters
Lower-Roman Lowercase Roman Numerals i,ii,iii,iv
Upper-Roman Uppercase Roman Numerals I,II,III,IV
Lower-greek The marker is lower greek Alpha,beta,gamma
The list-style-position Property
The list-style-image allows you to specify an image so that you can use your
own bullet style. The syntax is similar to the background-image property with
the letters url starting the value of the property followed by the URL in
brackets. If it does not find the given image then default bullets are used.
Here is an example:
<ul>
<li style="list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol>
<li style="list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
PADDINGS
The padding property allows you to specify how much space should
appear between the content of an element and its border:
The value of this attribute should be either a length, a percentage, or
the word inherit. If the value is inherit, it will have the same padding
as its parent element. If a percentage is used, the percentage is of the
containing box.
The padding-bottom specifies the bottom padding of an
element.
The padding-top specifies the top padding of an element.
The padding-left specifies the left padding of an element.
The padding-right specifies the right padding of an element.
The padding serves as shorthand for the preceding
properties.
CURSORS
Value Description
auto Shape of the cursor depends on the context area it is over. For example,
an ‘I’ over text, a ‘hand’ over a link, and so on.
crosshair A crosshair or plus sign.
default An arrow.
pointer A pointing hand (in IE 4 this value is hand).
move The ‘I’ bar.
e-resize The cursor indicates that an edge of a box is to be moved right (east).
<p>Move the mouse over the words to see the cursor change:</p>
<div style="cursor:auto">Auto</div>
<div style="cursor:crosshair">Crosshair</div>
<div style="cursor:default">Default</div>
<div style="cursor:pointer">Pointer</div>
<div style="cursor:move">Move</div>
<div style="cursor:e-resize">e-resize</div>
<div style="cursor:ne-resize">ne-resize</div>
<div style="cursor:nw-resize">nw-resize</div>
<div style="cursor:n-resize">n-resize</div>
<div style="cursor:se-resize">se-resize</div>
<div style="cursor:sw-resize">sw-resize</div>
<div style="cursor:s-resize">s-resize</div>
<div style="cursor:w-resize">w-resize</div>
<div style="cursor:text">text</div>
<div style="cursor:wait">wait</div>
<div style="cursor:help">help</div>
POSITIONING
CSS helps you to position your HTML element. You can put any HTML element at whatever location you like.
You can specify whether you want the element positioned relative to its natural position in the page or
absolute based on its parent element.
Relative Positioning
Relative positioning changes the position of the HTML element relative to where it normally appears. So
"left:20" adds 20 pixels to the element's LEFT position.
You can use two values top and left along with the position property to move an HTML element anywhere in
an HTML document.
Move Left - Use a negative value for left.
Move Right - Use a positive value for left.
Move Up - Use a negative value for top.
Move Down - Use a positive value for top.
NOTE: You can use the bottom or right values as well in the same way as top and left.
Here is an example:
<div style="position:relative;left:80px;top:2px; background-color:yellow;">
This div has relative positioning.
</div>
Absolute Positioning
NOTE: You can use bottom or right values as well in the same way as top
and left.
Here is an example:
<div style="position:absolute;left:80px;top:20px;
background-color:yellow;">
This div has absolute positioning.
</div>
Layers
<div style="background-color:red;
width:300px;
height:100px;
position:relative;
top:10px;
left:80px;
z-index:2">
</div>
<div style="background-color:yellow;
width:300px;
height:100px;
position:relative;
top:-60px;
left:35px;
z-index:1;">
</div>
Using the <SPAN>…</SPAN> Tag
SPAN is an HTML element that play a prominent role in
style sheets.