FSD CSS Part 4

<!
DOCTYPE html>
<html lang="en">
<head>
Text Alignment
<title> CSS Table Text Alignment </title>
<meta charset="UTF-8">
<style>
table, td, th {
Horizontal Alignment
border: 1px solid black;
}
table {
border-collapse: collapse;
The text-align property is used
}
width: 100%; to set the horizontal alignment
th{
text-align: center;
of the content in <th> or <td>
}
</style>
tags. The possible values can be
</head>
<body>
- left, right, center.
<table>
<tr>
<th style="text-align: center;">Firstname</th>
<th style="text-align: center;">Lastname</th>
<th style="text-align: center;">Savings</th>
</tr>
<tr>
<td>Rohit</td>
<td>Bag</td>
<td>97%</td>
</tr>
</table>
</body>
</html>
This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
<!DOCTYPE html>
<html lang="en">
<head>
Vertical Alignment
<title> CSS Table Vertical Alignment </title>
<style>
table, td, th {
The vertical-align
}
border: 1px solid black; property is used to set
table {
the vertical alignment of
}
width: 100%; the content in <th> or
#tablec{
height: 50px;
<td> tags.
vertical-align: bottom;
}
</style>
</head>
The possible values can
<body>
<h3>The vertical-align Property</h3>
be - top, bottom, or
<p>This property sets the vertical alignment (like top, bottom, or middle) of the content in th or td.</p>
<table>
middle.
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr id="tablec">
<td>Rohit</td>
<td>Bag</td>
<td>97%</td>
</tr>
</table>
</body>
This </html>is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken
video against unauthorized piracy of this video
<!DOCTYPE html>
<html lang="en">
<head> Table Color
<title> CSS Table Color </title>
<style>
table { Table background-
width: 100%; color can be changed
}
th, td { by using usual CSS
text-align: left;
} properties like
#color {
background-color: seagreen; background-color
color: white;
} and can also change
</style>
</head> the text color by
<body>
<h2>Colored Table Header</h2> using color property.
<table>
<tr>
<th id="color">Firstname</th>
<th id="color">Lastname</th>
<th id="color">Savings</th>
</tr>
<tr>
<td>Rohit</td>
<td>Bag</td>
<td>97%</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
Hoverable Table
<title> CSS Table Hover </title>
<style>
table {
Hover can also be used in
width: 100%;
tables to highlight cells or
}
th, td {
rows on mouseover.
padding: 8px;
text-align: left;
border-bottom: 1px solid gray;
}
tr:hover{ background-color:seagreen }
</style>
</head>
<body>
<h2>Hoverable Table</h2>
<p>Move the mouse over the table rows to see the effect.</p>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Rohit</td>
<td>Bag</td>
<td>100</td>
</tr>
</table>
</body>
</html>
CSS Line Height
The CSS line-height property is used to specify the space between two lines. By default, it
is at 100%.
Values less than 100% will reduce the space between the lines and more than 100% will
increase it.
CSS line-height values

Value Description
normal It is the default value which specify normal line height.
Any number Given number would be multiplied with the current font
size to set the line height.
length Line height is set in px, pt, cm, etc.
% Line height is specified in percentage.
initial It sets the property to its default value.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Line Height </title>
<style>
.small {
line-height: 70%;
}
.big {
line-height: 150%;
}
</style>
</head>
<body>
<h4>
This is a heading with a standard line-height.<br>
</h4>
<h4 class="small">
This is a heading with a smaller line-height.<br>
</h4>
<h4 class="big">
This is a heading with a bigger line-height.<br>
</h4>
</body>
</html>
CSS Opacity
The CSS Opacity property is used to change the transparency of an element.
The CSS opacity's value lies between 0 to 1, like 0.2, 0.4. The lesser opacity value
displays the greater opacity.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Image Opacity </title>
<style>
img.trans {
opacity: 0.6;
filter: alpha(opacity=40);
}
</style>
</head>
<body>
<p>Normal Image</p>
<img src=“sampleimagefsd.jpg" alt="normal" style="width:50%;"> <br /><br />
<p>Transparent Image</p>
<img class="trans" src=“sampleimagefsd.jpg" alt="transparent" style="width:50%;">
</body>
</html>
<!DOCTYPE html> Transparent Hover
<html lang="en"> Effect
<head>
<title> CSS Image Transparent </title>
<meta charset="UTF-8"> CSS opacity property can
<style> be used together with
i:hover { the hover selector to
opacity: 0.5;
filter: alpha(opacity=40); change the transparency
} on mouse-over.
</style>
</head>
<body>
<i><img src=“sampleimagefsd.jpg" style="width:40%;"></i>
<i><img src=" sampleimagefsd.jpg " style="width:40%;"></i>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
Text in Transparent
<title> CSS Text Transparent </title>
Box
<style>
#div1 {
padding: 50px;
margin-right:400px;
color: #000000;
text-align:center;
background: seagreen;
}
#div2 {
padding: 50px;
margin-right:400px;
color: #000000;
text-align:center;
opacity: .5;
}
#div3 {
padding: 50px;
margin-right:400px;
text-align:center;
color: #000000;
opacity: .2;
}
</style>
</head>
<body>
<div id="div1"><b>Welcome to FSD</b></div><br />
<div id="div2"><b>Talent Battle</b></div><br />
<div id="div3"><b>Congratulations!!!</b></div><br />
This </body>
video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
</html>
CSS Height and Width
The height and width properties sets the height and width of an element.
By default the height and width has been set to auto.
But it can also be specified in length values, like px, em, etc., or in percentage (%).
CSS Dimension Properties
Property Description
height It sets the height of an element
width Sets the width of an element
max-height It sets the maximum height of an element
max-width It sets the maximum width of an element
min-height It sets the minimum width of an element
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Height and Width </title>
<style>
div {
height: 200px;
width: 350px;
background-color: #9396e6;
}
</style>
</head>
<body>
<h2>Set the height and width of an element</h2>
<p>This div element has a height of 200px and a width of 50%:</p>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Image Height and Width </title>
</head>
<body>
<img src=“sampleimagefsd.jpg" style="width:40%;"><br><br>
<img src="sampleimagefsd.jpg" style="width:50%;"><br> <br>
<img src="sampleimagefsd.jpg" width="300" height="150">
</body>
</html>
The max-height Property
The max-height property sets the maximum height.
It means that the height of the element can never exceed the max-height length. Even if
user defines the height more than the specified maximum height, the browser will only
display the maximum height.
For example, if the height is set to 100px and the max-height set to 50px, the actual
height of the element would be 50px.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Dimension max-height</title>
<style>
div {
height: 400px;
max-height: 100px;
background: #ac8def;
padding:10px;
}
p{
max-height: 100px;
background: #abf08c;
padding:10px;
}
</style>
</head>
<body>
<div>The maximum height of this div element is set to 100px, so it can't be taller than that.</div><br />
<p>In this example priority of max-height is more than height.</p>
</body>
The min-height Property
The min-height property sets the minimum height for the element which doesn't include
paddings, borders, or margins.
It ensures that an element has a minimum height even if it doesn't have any content.
An element will never be smaller than the minimum height specified.
For example, if the height is set to 100px, and the min-height is set to 200px, the actual
height of the element is 200px.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Dimension min-height </title>
<style>
div {
height: 100px;
min-height: 200px;
background: #abf08c;
padding: 10px;
text-align:center;
}
p{
min-height: 100px;
background: #ac8def;
padding: 10px;
text-align:center;
}
</style>
</head>
<body>
<div>The minimum height of this div element is set to 200px, so it can't be smaller than that.</div>
<p>Enter some more line of text to see how it works.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en"> The max-width
<head> Property
<title> CSS Dimension max-width </title>
<style> The max-width
div {
width: 400px; property sets the
max-width: 300px; maximum width for an
background: #c9c0ff;
padding:10px; element.
}
p{
float: left; It also doesn't include
max-width: 500px; any paddings, margins
background: #F0E68C;
padding:10px; or borders.
}
</style>
</head>
<body>
<div>The maximum width of this div element is set to 300px, so it can't be wider than that.</div><br />
<p>Enter some text to see how it max-width works.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
The min-width
<title> CSS Dimension min-width </title> Property
<style>
div { The min-width property
width: 300px;
min-width: 400px; sets the minimum
background: #FFC0CB;
padding: 10px;
width for an element.
text-align: center;
}
p{ It also doesn't include
float: left;
min-width: 400px;
any paddings, margins
background: #F0E68C; or borders.
padding: 10px;
text-align: center;
}
</style>
It ensures that an
</head> element has a minimum
<body>
<div>The minimum width of this div element is set to 400px, so it can't be narrower than that.</div> width even if it doesn't
<p>Enter some text to see how min-width it works.</p> have any content.
</body>
</html>

FSD CSS Part 4

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

FSD CSS Part 4

Uploaded by

Copyright:

Available Formats

<!

CSS line-height values

The CSS Opacity property is used to change the transparency of an element.

By default the height and width has been set to auto.

height It sets the height of an element

width Sets the width of an element

max-height It sets the maximum height of an element

max-width It sets the maximum width of an element

min-height It sets the minimum width of an element

The max-height property sets the maximum height.

An element will never be smaller than the minimum height specified.

You might also like