CSS Introduction
CSS Structure
CSS Colors
CSS Background
CSS Width-Height
CSS Float
CSS Display
CSS Borders
CSS Fonts
CSS Text
CSS Align
CSS List
CSS Margin
CSS Padding
CSS Position
CSS Tables
CSS Images
CSS Link
CSS Icons
CSS MAX MIN WIDTH-HEIGHT
CSS Width and Height set a div, table, image, p, or heading and more that how many width and height. Width and Height are most important for a website.
By this tutorials you can learn
1) How to use CSS Width and Height?
2) Where to use CSS Width and Height?
1) Using by px that means Pixel - like: width: 300px;
2) Using by % that means Percent - like: width: 60%;
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Width and Height using by PX/Pixel</title>
<style type="text/css">
.div1
{
width: 300px;
height: 300px;
background: #ddd;
border:1px solid red;
}
</style>
</head>
<body>
<div class="div1">
Div using by widht and height px
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>CSS Width and Height using by % Percent</title>
<style type="text/css">
.div2
{
width: 70%;
height: 300px;
background: #ddd;
border:1px solid red;
}
</style>
</head>
<body>
<div class="div2">
Div using by widht and height px
</div>
</body>
</html>
Maximum HTML Tag support CSS Width and Height operation
like: 1) Div, 2) Table, 3) Audio Frame, 4) Video Frame, 5) p, 6) h1-h6 and others HTML Tag.
<!DOCTYPE html>
<html>
<head>
<title>CSS Width and Height with Table</title>
</head>
<body>
<table style="width: 70%;" border="1">
<tr bgcolor="#ddd" align="center">
<td>SL</td>
<td>Name</td>
<td>Roll</td>
<td>Mobile</td>
</tr>
<tr>
<td>1</td>
<td>John Jakob</td>
<td>Roll</td>
<td>+124586544</td>
</tr>
<tr>
<td>2</td>
<td>Adam Smith</td>
<td>362584</td>
<td>+123654852</td>
</tr>
<tr>
<td>3</td>
<td>Rebel</td>
<td>653256</td>
<td>+124586544</td>
</tr>
</table>
</body>
</html>
| SL | Name | Roll | Mobile |
| 1 | John Jakob | Roll | +124586544 |
| 2 | Adam Smith | 362584 | +123654852 |
| 3 | Rebel | 653256 | +124586544 |
<!DOCTYPE html> <html> <head> <title>CSS Width and Height with Image</title> </head> <body> <img src="../uploads/sample.png" style="width: 300px; height: 250px; border:1px solid red;"> </body> </html>
