Simple Dhtml & CSS

by Prof.Chiramel Baby B.Tech

Code for the above heading

<h2  style="color=red;background-color:yellow;
font-size:24pt;border:10pt green ridge;
text-align:center;padding:20"> Simple Dhtml& CSS
<br><p style="font-size:12pt;text-align:left;">
by Prof.Chiramel Baby B.Tech</p></h2>

What is Dhtml

Syntax of dhtml attributes

• Attribute words are separated by hyphen eg. text-align
• Value is assigned to attribute using colon
  eg. text-align:center;font-size:12pt;
• each attribute:value pair is terminated by semicolon

Common attributes and their values

border-style:

solid, double, groove, ridge,inset,outset

border-color:

color code or name eg. red,yellow,#ff0000,#ffff00

border-width:

thin, medium,thick, or length (length is explained below)

border-top-width:

thin, medium,thick, or length

border-bottom-width:

thin, medium,thick, or length

border-left-width:

thin, medium,thick, or length

border-right-width:

thin, medium,thick, or length

border-top:

specifies width,color and style

border-bottom:

specifies width,color and style

border-left:

specifies width,color and style

border-right:

specifies width,color and style

border:

sets all the properties

color:

set the element's text-color, A color name or code

background-color:

sets backgrond color of the element, color name or code

background-image:

sets the background image, a url or none

background-repeat:

how the background image has to repeat. repeat-y, repeat-x, repeat(both), no-repeat

font-family:

A comma delimited sequence of font names( serif, sanserif, cursive

font-style:

Normal, italic, or oblique

font-weight:

normal, bold, bolder,lighter, or numeric values 100,200,300 ....900

font-size:

A term that denotes, absolute size(xx-small, x-small, small, medium, large, x-large, zz-large), relate size(larger, smaller), a number( of pixcels), percentage (of the parent element size), no of points

list-style-type:

disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-aplpha, none

margin-top:

percent, length or auto

margin-bottom:

percent, length or auto

margin-left:

percent, length or auto

margin-right:

percent, length or auto

margin:

percent, length or auto

text-decoration:

add decoration to an element's text, none, underline, overline, line-through, blink

vertical-align:

determeines an elements vertical position. baseline, sub, super, top, text-top, middle, bottom, text-bottom, also percentsge of the elements's height.

text-transform:

Applies a trasformation to the text. captitalize, uppercase, lowercase, none

text-align:

Aligns text with in a element. left, right, center, justify

text-indent:

indents the first line or text. a percentage of elements width or a length

position:

absolute(to the window), relative(to the location of the element on the page), static (no positioning, conventional html position)

left, top, width, height :

absolute length, percentage, auto

clip:

bounding box (give the four numbers of a box), auto

overflow:

scroll, visible, hidden, auto (specifies how pars of the html element outside the visible area defined by the bounding box are displayed.

z-index:

stacking order, auto(higher value is in front) visibility: visible , hidden, auto by default numbers are pixels.

padding:

length or auto

padding-left:

length or auto

padding-right:

length or auto

padding-bottom:

length or auto

padding-top:

length or auto

The length attribute can be

CSS

example code:

<STYLE Type = "text/css">
 H1 
 {
 font-family:arial, helvetica; 
 font-size:26pt; 
 background-color:#00ffff;
 padding-left:150;
 }
.myclass 
{
background-image:url(images/backg1.jpg);
background-repeat:no-repeat;
color:#23238e; 
}
#myid  
{
font-style:italic; 
font-weight:bold;
}
</STYLE>


* The styles can be given inside the style tag as shown above. 
* The style tag is given in head portion of the html document.
* Styles can be given for existing tags, in the above example for the h1 tag.

example code:

Myheading

* style can be given as a id or class , in our example the syntax used for myclass and myid

example code:

Myheading

Myheading

Myheading

Myheading

CSS file

Article written by

Prof.Chiramel Baby B.Tech(I.I.T)