CS428 Web Engineering
Lecture 10
Images, Tables, Forms, Border-Radius
(CSS – V)
1
CSS Images
• CSS play a good role to control image
display, you can set following image
properties:
 The border property is used to set the border
of an image.
 The height property is used to set the height of
an image.
 The width property is used to set the width of
an image.
 The opacity property is used to set the opacity
of an image.
border
• <img style=“border: 4pt dashed red;”
src=“images/css.gif” />
• Output:
• Possible values:
can have a value in length or in %, pt, px
3
height
• <img style=“border: 1pt solid red;
height: 200px;”
src=“images/css.gif” />
• Output:
• Possible values:
%, pt, px
4
width
• <img style=“border: 1pt solid red;
width: 200px;”
src=“images/css.gif” />
• Output:
• Possible values:
%, pt, px
5
opacity
• The opacity property is used to create
transparency of an element or an image.
• The opacity value is a floating point number
from 0.0 to 1.0.
• A lower value makes element more
transparent.
• The opacity value of 0 defines the element as
fully transparent.
Example
• <style>
img {
opacity: 0.4;
}
</style>
<img src=“flower.jpg” alt=“” title=“” />
• Regular Image:
• The same image with transparency:
8
Rounded Corners: border-radius
• The border radius property lets you create rounded
corners.
• <style>
#box1 {
border: 2px solid red;
width: 150px;
height: 70px;
border-radius: 25px;
}
</style>
<div id=“box1”>HTML5 & CSS3</div>
10
border-top-left-radius
• <style>
#box1 {
border: 2px solid red;
width: 150px;
height: 70px;
border-top-left-radius: 5px;
}
</style>
<div id=“box1”>HTML5 & CSS3</div>
• Output:
• Possible values:
number in pixels
11
border-top-right-radius
• <style>
#box1 {
border: 2px solid red;
width: 150px;
height: 70px;
border-top-right-radius: 10px;
}
</style>
<div id=“box1”>HTML5 & CSS3</div>
• Output:
• Possible values:
number in pixels
12
border-bottom-right-radius
• <style>
#box1 {
border: 2px solid red;
width: 150px;
height: 70px;
border-bottom-right-radius: 15px;
}
</style>
<div id=“box1”>HTML5 & CSS3</div>
• Output:
• Possible values:
number in pixels
13
border-bottom-left-radius
• <style>
#box1 {
border: 2px solid red;
width: 150px;
height: 70px;
border-bottom-left-radius: 40px;
}
</style>
<div id=“box1”>HTML5 & CSS3</div>
• Output:
• Possible values:
number in pixels
14
Forms: input[type=control]
• You can also change the form appearance.
• Input[type=control] is used to change the
default form appearance.
15
input[type=submit]
• <style>
input[type=submit] {
color: #FF00CC;
background-color: blue;
border-radius: 10px;
font-weight: bold;
}
</style>
• Output:
16
CSS Tables
• You can set following table properties:
 The border property is used to set the border
of a table.
 The border-collapse property sets whether the
table borders are collapsed into a single border
or separated.
 The width property is used to set the width of a
table.
 The height property is used to set the height of
a table.
– The text-align property is set the horizontal
alignment.
– The vertical-align property is set the vertical
alignment.
– The padding property is used to control the
border and contents in a table.
– The color property is set the text color.
– The background-color property is set the
background color of a table.
18
border
• <style>
table, th, td {
border: 1px solid black;
}
</style>
• <table >
<tr>
<th>Comany</th><th>Country</th>
</tr>
<tr>
<td>The Big Cheeze</td> <td>USA</td>
</tr>
<tr>
<td>Island Trading</td> <td>UK</td>
</tr>
</table>
19
border-collapse property
• The border-collapse property sets whether
the table borders are collapsed into a
single border or separated:
• Possible values: collapse, separate
20
border-collapse
•
•
<style>
table {
border-collapse: collapse; }
table, th, td {
border: 1px solid black; }
</style>
<table >
<tr>
<th>Comany</th><th>Country</th>
</tr>
<tr>
<td>The Big Cheeze</td><td>USA</td>
</tr>
<tr>
<td>Island Trading</td><td>UK</td>
</tr>
</table>
21
width & height property
• <style>
table {
width: 50%;
}
th {
height: 50px;
}
</style>
22
text-align
• <style>
table {
width: 50%;
}
td {
text-align: right;
}
</style>
vertical-align
• <style>
table {
width: 50%;
}
td {
height: 50px;
vertical-align: middle;
}
</style>
padding
• <style>
table {
width: 50%;
}
th {
height: 50px;
padding: 15px;
}
</style>
color
• <style>
table {
width: 50%;
}
th {
height: 50px;
background-color: green;
color: white;
}
</style>
caption-side
• <style>
table {
caption-side: bottom;
}
th {
height: 50px;
background-color: green;
color: white;
}
</style>
• Possible values: left, right, top and bottom