Scribd
Upload
49 views

Procedure

The document describes how to use CSS to style web pages in several ways: 1) Apply different fonts and styles by defining selectors and properties in a <style> section. 2) Set a background image for the page by specifying the image path in the <body> tag's background attribute. 3) Control image repetition with the background-repeat property. 4) Use z-index and positioning to control layering and placement of text boxes and other elements. 5) Customize the mouse cursor using the cursor property.

Uploaded by

Ram Kiran
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
49 views

Procedure

The document describes how to use CSS to style web pages in several ways: 1) Apply different fonts and styles by defining selectors and properties in a <style> section. 2) Set a background image for the page by specifying the image path in the <body> tag's background attribute. 3) Control image repetition with the background-repeat property. 4) Use z-index and positioning to control layering and placement of text boxes and other elements. 5) Customize the mouse cursor using the cursor property.

Uploaded by

Ram Kiran
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

To design a web page using css (cascading style sheets) which includes the following: Use different font,

styles: In the style definition you define how each selector should work (color, font etc.,) Procedure: < Css1.html > <html> <head> </head> <style> .myid{ color:red; font-family:"monotype corsiva"; } </style> <body> <form> <p class="myid">login:<input type="text" maxlength="32" size="16"> <p class="myid">password:<input type="password" maxlength="10" size="16"> <br> <input type="submit" value="login"> <input type="reset" value="cancel"> </form> </body> </html> Set the background image for the page. Procedure: < Css2.html > <html> <head> <title>sample</title> </head> <style> .myid{ color:red; font-family:"monotype corsiva"; } .link{ cursor:value; For latest technology news visit us at http://www.devilsduke.com

} </style> <body background="C:\Documents and Settings\chaitu\Desktop\22.gif"> <form> <p class="myid">login:<input type="text" maxlength="32" size="16"> <p class="myid">password:<input type="password" maxlength="10" size="16"> <br> <input type="submit" value="login"> <input type="reset" value="cancel"> </form> </body> </html> Output: For latest technology news visit us at http://www.devilsduke.com

Control the repitition of the image with the background- repeat property Procedure: < Css3.html > <html> <head> <title>sample</title> </head> <style> .myid{ color:red; font-family:"monotype corsiva"; } .link{ cursor:value; } </style> <body background="C:\Documents and Settings\chaitu\Desktop\Glass_Apple.gif"> <form> <p class="myid">login:<input type="text" maxlength="32" size="16"> <p class="myid">password:<input type="password" maxlength="10" size="16"> <br> <input type="submit" value="login"> <input type="reset" value="cancel"> </form> </body> </html> For latest technology news visit us at http://www.devilsduke.com

Output: For latest technology news visit us at http://www.devilsduke.com

Working with layers: Procedure: < css4.html > <html> <head> <title> Layers </title> </head> <body> <h1> Layering Text </h1> <div style="z-index: 2; left:50px; top:250px; position: absolute; color:black; text:white"> <p> This is the higher layer </p> </div> <div style="z-index: 1; left:100px; top:225px; position: absolute; font-size=46pt; color:magneta; background-color: green; border: thin groove"> <p> Some more text </p> </div> </div> <div style="z-index: 4; left:10px; top:30px; width:150px position: absolute; backgroundcolor: yellow; color: black; font-size: 18pt;"> <p> Some text placed in a box that doesn't go to right across the scren </p> </div> </div> <div style="position: absolute; top:300px; left:500px; width:25 background-color: #aeae00; color:blue; font-size: 16pt; font-stype:italic; z-index: 2"> <p> And in the bottom right corner... </p> </div> <hr> </body> </html> For latest technology news visit us at http://www.devilsduke.com

Output: For latest technology news visit us at http://www.devilsduke.com

Add a customised cursor Procedure: < css5.html > <html> <head> <title>sample</title> </head> <style> .myid{ color:red; font-family:"monotype corsiva"; } .link{ cursor:crosshair; } </style> <body> <form> <p class="myid">login:<input type="text" maxlength="32" size="16"> <p class="myid">password:<input type="password" maxlength="10" size="16"> <br> <input type="submit" value="login"> <input type="reset" value="cancel"> </form> <a href="style.html" class="link">click here</a> </body> </html> Output:

You might also like