You are on page 1of 9

DHTML Stylesheet History As early as 1993, people have been interested in adding more layout control to HTML.

Because of their theoretical benefits, style sheets have been the favorite solution of the standard bodies. However it wasn’t until 1995 when bert bos of the W3C wrote chapter to work on the introduction of a style sheet standard for the web. Style sheet Basics What does a style sheet do?Here is an example.consider the following: Here is a simple text To write this short sentence in HTML, you have to use many commands, such as CENTER, FONT COLOR, FONT SIZE etc. Suppose you need to write this sentence 10 times, won’t it be easier to specify what you want only one time and simply write one command instead of six. This is possible with style sheets A style sheet is definition of how content should be rendered on the page. The purpose of a style sheet is to create a presentation for a particular element or set of elements. Binding an element to a style sheet specification is very simple. It consists of an element followed by its associated style information within curly braces Element {style specification} Suppose that you want to bind a style to the <h1> element so that a 12-point courier font with bold style is always used. The following rule would result in the desired display: <style type=”text/css”> h1 { font- size:12pt; font-style:bold; font-family:courier } </style> Embedding and importing style sheets <html> <head> <title>Document-wide style sheets</title> <style type=”text/css”> body{background:white; margin-left:1in; margin-right:1.5in } h1 { font-size:24pt; font-family:san-serif; color:red; }

css for CSS style sheet. margin-right:50px } A:link { color:blue. By this method.css file. Create a style sheet document(Notepad) Body { font:10pt. font-family:arial black. fcolor:black. text-indent:0. font-size:12pt.The common extensions indicating that it is a style sheet file is . text-decoration:none } .5in. color:black } p {text-indent:0. color:black.</p> </body> </html> Linking to a style sheet (cascading style sheet) An external style sheet is simply a plain text file containing the style specifications for HTML tags or classes.p{ text-align:center.The following steps explain you on creating a . font-family: sans-serif. font-family: sans-serif.. color:black } h2 {font :16pt. } </style> </head> <body> <p>content affected by style sheet….5in margin-left:50px. we can use one style sheet for multiple pages. background:white } h1 {font :24pt. font-family:serif.

Remember:the extension has to be . text-decoration:none } A:active: { color:red. font-family:serif.all you have to do is paste <link rel=”stylesheet” href=”style. <html> <head> <style type=”text/css”> Body { font:10pt.It involves the use of<STYLE> element found within the <STYLE> the<HEAD> element of an HTML document.including hiding rules from older browsers is shown below.html Now to use this style sheet.5in . color:black } p {text-indent:0.Document-wide style is a very easy way to began using style sheets. text-decoration:none } Save it as style.A:visisted { color:blue. fcolor:black. Embedding and importing style sheets The second way to include an external style sheet is to embed it.When you embed a style. font-family: sans-serif.Enclose the style rules within the<STYLE> and </STYLE> tag pair and place these within the head section of HTML document.css nad NOT .css. background:white } h1 {font :24pt.When the browser is started it will start looking for a CSS and will go this URL. color:black } h2 {font :16pt.htm or .A complete example of a document-wide style sheet. font-family: sans-serif.you write rules directly within the HTML document.css” type=”text/css”> is the HEAD part of your document.

color:green”>CSS1 Test</h1> Using CLASS <html> <head> <style type=”text/css”> .This is how it works. The simplest way to add style information.Consider an example. <h1 style=”font-size:48pt.important { Background-color: yellow } </style> </head> <Body> <h1 class=”important”>this is the first paragraph</h1> <h1 class=”important”>example</h1> <p>this is second paragraph</p> <p class=”important”>this is the third paragraph</p> </body> </html> Using ID <html> <head> <style type=”text/css”> # important { Background-color: yellow } </style> </head> <Body> . but not necessarily the best.font-family:arial.green. is to add style rules to particular HTML element element.margin-left:50px.arial font.Let’s say you want to set one particular<h1> tag to render 48-point. margin-right:50px } </style> </head> <body> <p>Content affected by style sheet</p> </body> </html> Using Inline style sheet Other than using style sheet for the whole document.than you need to apply that style to <H1> elements or to a class of them(discussed later) by applying a document-wide style. it is possible to add style information right down to single element.

no-repeat 11) Background-attachment:fixed/scroll 12) Background-position:center top 13) Cursor:crosshair/default/pointer/move/e-resize/n-resize 14) Padding:5px 15) Border:2px double/solid/dotted black 16) Height 17) Width 18) Margin-top: 19) Margin-right 20) Margin-bottom 21) Margin-left 22) Border-top-width:5px 23) Border-right-width:5px 24) Border-bottom-width:5px. italic etc.with respect to the baseline.none. 25) Border-left-width:5px 26) Border-top-color:green Text Properties: 1) Letter-spacing-denotes the space between letters.centimeters(cm). .<p>this is the first paragraph</p> <p id=”important”>example</p> <p>this is the third paragraph</p> </body> </html> Other Style sheet properties Font Properties 1) Font-family-denotes font 2) Font-size-denotes the size of the text 3) Font-style-denotes the style of the text for example normal. 4) Font-weight-denotes the weight or darkness of the font.points(pt) etc can be used 2) Word-spacing-denotes the space between words.text-top. bold. 3) Vertical align-denotes the vertical positioning of the text and images.millimeter(mm).sub.Mesurements can be used similar to letter spacing.top. This value ranges from 100 to 900 increments of 100 5) Font-variant:small-caps/normal 6) Font-stretch:normal/wider/narrower/ultra-condensed/extra-condensed/expanded 7) Color:red 8) Background-color:green 9) Background-image:url(“abc.The possible values include baseline.super.the default value A variety of measurements like inches(in).middle paercentage values etc.repeat-y.gif”) 10) Background-repeat:repeat-x.

Another positioning type is relative.lowercase etc. z-index:1 } blockquote { .line-through. Height:200px. Bottom:20px } Overflow property Pre {overflow:visible/hidden/scroll/auto. Width:200px } Visibility Property H1{visibility:visible/hidden/collapse(only for table) Layering a webpage Z-index property <html> <head> <style> p {background-color:blue.text-align:center 5) Text-indent:denotes margins this property sets the indentation for text in first line of a block level element.this allows you offset elements based on the browser borders. top:40px. width:300px. Left:20px.which is similar to absolute.which is the current method that HTML uses.justify etc.4) Text-align-specifies the alignment of the text.The standard values for this property include blink. Right:20px.The first is static.the possible values are center.underline etc Absolute versus relative positioning There are four different position types.The possible values are capitalize.The final type is fixed.The next type is absolute.this lets you offset elements based on the above element. height:260px. left:40px. position:absolute. 7) Text-decorate-denotes the text’s decoration. Top:20px.except the element doesn’t move when the page is scrolled H1 {position:absolute.ex:text-indent:2.uppercase.5em 6) Text-transform:denotes the transformation of the text.overline.

width:300px. left:80px. top:80px.The element is represented as an object.a nd its various HTML attributes become properties that can be manipulated by scripting. height:200px. position:absolute. <html> <head> <script language=”javascript”> function a1() { alert(p.background-color:yellow.innertext) p. z-index:2 } </style> </head> <body> <blockquote><font size=7>Do you ant to play hide and seek</font></blockquote> <p><font size=7>count to ten</font></p> </body> </html> Object referencing The simplest way to reference an element is by its ID attribute.The basic form of a filter rule is shown below: Filtername Description Alpha sets a uniform transparency level Blur Creates the impression of moving at high speed Chroma Makes a specific color transparent DropShadow Creates a solid shadow of the object FlipH Creates horizontal mirror image FlipV Creates vertical mirror image Glow Add radiance around the outside edges of the object Grayscale Drops color information from the image Invert Reverses the hue.saturation and brightness values .innertext=”thanks for coming” } </script> </head> <body onload=”a1()”> <p id=”p”>welcome to our web page</p> </body> </html> Filters Microsoft has added a variety of multimedia filters and transitions that can be accessed via a style sheet.

filter:fliph() } .freq=4.width:400.strength=10) } </style> </head> <body> <div class=”blur”>This is a blur filter</div> <div class=”dropshadow”>This is dropshadow</div> <div class=”fliph”>This is the flip horizontal filter</div> <div class=”flipv”>This is the flip vertical filter</div> <div class=”glow”>This is a glow filter</div> <div class=”shadow”>This is a shadow filter</div> <div class=”wave”>This is a wave filter</div> </body></html> .offx=2.width:400.phase=50.positive=1) } .width:400.width:400.width:400.dropshadow { height:10.shadow { height:10.blur{ height:10.width:400.fliph { height:10.glow{ height:10.direction=90.flipv { height:10.strength=4) } .offy=2.filter:blur(add=1.filter:wave(add=1.filter:shadow(color:blue) } .filter:flipv() } .wave { height:10.width:400.strength=10) } .lightstrength=50.Light Projects a light source onto an object Mask Creates a transparent mask from an object Shadow Creates an offset solid Wave Creates a sine wave distortion along the x-alix Xray: Shows just the edges of the object Example: <html> <head> <style text=”text/css”> .filter:glow(color=red.filter:dropshadow(color=green.