1 CS428 Web Engineering Lecture 10 Images, Tables, Forms, Border-Radius (CSS – V)

1

CS428 Web EngineeringLecture 10

Images, Tables, Forms, Border-Radius(CSS – V)

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.

3

border• <img style=“border: 4pt dashed red;”

src=“images/css.gif” />

• Output:

• Possible values:

can have a value in length or in %, pt, px

4

height• <img style=“border: 1pt solid red;

height: 200px;”

src=“images/css.gif” />

• Output:

• Possible values:

%, pt, px

5

width• <img style=“border: 1pt solid red;

width: 200px;”

src=“images/css.gif” />

• Output:

• Possible values:

%, pt, px

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=“” />

8

• Regular Image:

• The same image with transparency:

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

11

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

12

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

13

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

14

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

15

Forms: input[type=control]

• You can also change the form appearance.

• Input[type=control] is used to change the default form appearance.

16

input[type=submit]• <style>

input[type=submit] {

color: #FF00CC;

background-color: blue;

border-radius: 10px;

font-weight: bold;

}

</style>

• Output:

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.

18

– 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.

19

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>

20

border-collapse property• The border-collapse property sets whether

the table borders are collapsed into a single border or separated:

• Possible values: collapse, separate

21

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>

22

width & height property

• <style>

table {

width: 50%;

}

th {

height: 50px;

}

</style>

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