Previous | Home | Next |
Let here we see the styling with help of examples. styling of web page can be done in various ways we are here discuss few types of styling
Background Styling
<html> <head> <style type="text/css"> h1 { background-color: silver; } p { background-color:lightblue; } div { background-color: pink; } </style> </head> <body> <h1>This is background of html file</h1> <div> This is a text inside a div element. <p>This is paragraph of html has it's own background color.</p> We are still in the div element. </div> </body> </html>
Text Styling
Text coloring ,text alignment ,and text decoration, font style.
<html> <head> <title> this is text styling</title> <style type="text/css"> body { background color: light blue; } h1 { color: green; font-size:30pt;font-weight: times roman; text-align: center; } p { color: red; font-size:20;font-weight: times roman ;font-decoration: none; text-align: center; } </style> </head> <body> <h1> This is stylig of text in html </h1> <p> this para tells us about the styling of the text of html document</p> </body> </html>
Font Styling
Font styling consists font size, font color, font style, font family
<html> <head> <title> font styling</title> <style type ="text/css"> h1 { font- family:" times new roman", times ,serif; } h2 { font-family: Aerial; } p.font{font-size:20px; font-style: italic;} p.fontstyle{font-size:20px; font-style:bold;} </style> </head<> <body> <h1>This is font styling</h1> <h2>this is another heading</h2> <p class="font" > this is the paragraph which shows the font styling of the text</p> <p class="font style" > this is another paragraph shows the font styling of the text</p> </body> </html>
Link Styling
link is used to link web pages. while styling link provide style to the links colors etc.
<html> <head> <title> This is link in css</title> <style type="text/css" a: link {color: greens;} /* unvisited link */ a: visited {color: pink;} /* visited link */ a: hover {color: light green;} /* mouse over link */ a: active {color: red ;} /* selected link */ </style> </head> <body> <p><b><a href="www.r4r.co.in" target="_blank" >This is a link</a></b></p> <p><b>Note:</b> a: hover MUST come after a: link and a: visited in the CSS definition in order to be effective.</p> <p><b>Note:</b> a: active MUST come after a: hover in the CSS definition in order to be effective.</p> </body> </html>
Table Styling
Table styling is the way to style the table using table borders .by increasing or decreasing the width of table. following are the border styling of table.
None:it defines border of table none means no border is present there.
Solid: it makes the border of the table in solid format.
Dotted: is used to make the border of table dotted.
Dashed: makes the border of the table dashed.
Double: shows the border of the table in double format
Inset: shows the border of table in 3D inset format.
Outset: shows the border of the the table in 3D outset format.
ridged: shows the table in 3D ridged form ,it depends on the color.
Inset: shows the border of table in 3D inset format.
Outset: shows the border of the the table in 3D outset format.
ridged: shows the table in 3D ridged form ,it depends on the color.
<head> <title> border style</title> <style type="text/css"> p.none { border-style: none;} p.solid{border-style:solid;} p.dashed{border-style:dashed;} p.inset{border-style:inset;} p.outset{border-style:outset;} p.ridge{borde-style:ridged;} </style> </head> <body> <p class="none">table style is none</p> <p class="solid"> table style is solid</p> <p class="dashed"> table style is dashed</p> <p class="inset"> table style is inset </p> <p class="outset">table style is outset</p> <p class="ridge"> table style is ridge</p> </body> </html>
Example which shows the table styling
<html> <head> <style type="text/css"> #Employee { font-family:"times roman", Arial, Helvetica, sans-serif; width:100%; border-collapse:collapse; } #Employee td, #Employee th { font-size:1em; border:2px solid purple; padding:3px 7px 2px 7px; } #Employee th { font-size:1.1em; text-align:left; padding-top :5px; padding-bottom:4px; background-color:#A7C942; color:#ffffff; } #Employee tr.alt td { color:#0000F0; background-color:#EAF2D3; } </style> </head> <body> <table id="employee"> <tr> <th>First Name</th> <th>Last Name</th> <th> Employee ID</th> <th>Salary</th> </tr> <tr> <td>Maria</td> <td>John</td> <td>10253</td> <td>10000</td> </tr> <tr> <td>Shweta</td> <td>Sharma</td> <td>10254</td> <td>12000</td> </tr> </body> </html>
Previous | Home | Next |