XHTML and CSS - Width & Height
Width & Height
In this tutorial we'll be covering CSS width and height, first we need some code to explain this better, all I've done is added a paragraph, made the text white and the background red.
<html> <head> <title> This is the title. </title> <style type="text/css"> p { background-color: red; color: white; } </style> </head> <body> <p>This is a paragraph.</p> </body> </html>
When you view this in your browser you'll see that by default our browser sets the height of the element equal to the height of the text and the width equal to the width of the page. On order to change this you can set the width and the height so let's change the width first, you change this using the width property, you can set this to a number of pixels or to a percentage, I'll be setting that to 300 pixels here.
<html> <head> <title> This is the title. </title> <style type="text/css"> p { background-color: red; color: white; width: 300px; } </style> </head> <body> <p>This is a paragraph.</p> </body> </html>
Now when you view this in your browser you'll see that the paragraph stays at 300 pixels no matter how big or small the page is. Next we'll change the height, you probably wont use this anywhere near as much as width, but there will probably be a time when you need it, you do this by using the height property and setting it to pixels or a percentage, just like the width and we'll set that to 50 pixels.
<html> <head> <title> This is the title. </title> <style type="text/css"> p { background-color: red; color: white; width: 300px; height: 50px; } </style> </head> <body> <p>This is a paragraph.</p> </body> </html>

Page generated in 0.0047 seconds.