<!DOCTYPE html> <html> <head> <title>Positioning</title> <style> #container { position :absolute; top :50px; left :0px; } #object1 { position :absolute; background:pink; width :100px; height :100px; top :0px; left :0px; } #object2 { position :relative; background:lightgreen; width :100px; height :100px; top :0px; left :110px; } #object3 { position :fixed; background:yellow; width :100px; height :100px; top :50px; left :220px; } </style> </head> <body> <br><br><br><br><br> <div id='container'> <div id='object1'>Absolute Positioning</div> <div id='object2'>Relative Positioning</div> <div id='object3'>Fixed Positioning</div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <title>Pseudo classes</title> <style> a:link { color:blue; } a:visited { color:gray; } a:hover { color:red; } a:active { color:purple; } *:focus { background:yellow; } </style> </head> <body> <a href='http://google.com'>Link to Google'</a><br> <a href='nowhere'>Link to nowhere'</a><br> <input type='text'> </body> </html>
<!DOCTYPE html> <html> <head> <title>Margins</title> <style> #object1 { background :lightgreen; border-style:solid; border-width:1px; font-family :"Courier New"; font-size :9px; width :100px; height :100px; padding :5px; margin :10px 20px 30px 40px; } table { padding :0; border :1px solid black; background :cyan; } </style> </head> <body> <table> <tr> <td> <div id='object1'>margin:<br>10px 20px 30px 40px;</div> </td> </tr> </table> </body> </html>
<!DOCTYPE html> <html> <head> <title>Padding</title> <style> #object1 { border-style:solid; border-width:1px; background :orange; color :darkred; font-family :Arial; font-size :12px; text-align :justify; display :table-cell; width :148px; padding :10px 20px 30px 40px; } </style> </head> <body> <div id='object1'>To be, or not to be that is the question: Whether 'tis Nobler in the mind to suffer The Slings and Arrows of outrageous Fortune, Or to take Arms against a Sea of troubles, And by opposing end them.</div> </body> </html>
<!DOCTYPE html> <html> <head> <title>Hello World</title> <style> h1 { color :red; font-size :3em; font-family:Arial; } </style> </head> <body> <h1>Hello there</h1> </body> </html>
<!DOCTYPE html> <html> <head> <title>Div and span example</title> <style> div, span { border :1px solid black; } div { background-color:yellow; } span { background-color:cyan; } </style> </head> <body> <div>This text is within a div tag</div> This isn't. <div>And this is again.</div><br> <span>This text is inside a span tag.</span> This isn't. <span>And this is again.</span><br><br> <div>This is a larger amount of text in a div that wraps around to the next line of the browser</div><br> <span>This is a larger amount of text in a span that wraps around to the next line of the browser</span> </body> </html>
<!DOCTYPE html> <html> <head> <title>Creating a linear gradient</title> <style> .orangegrad { background:orange; background:linear-gradient(top, #fb0, #f50); background:-moz-linear-gradient(top, #fb0, #f50); background:-webkit-linear-gradient(top, #fb0, #f50); background:-o-linear-gradient(top, #fb0, #f50); background:-ms-linear-gradient(top, #fb0, #f50); } </style> </head> <body> <div class='orangegrad'>Black text<br> on an orange<br>linear gradient</div> </body> </html>