Scribd
Upload
17 views

CSS 3

Uploaded by

vikasballa229306
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views

CSS 3

Uploaded by

vikasballa229306
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

1.

Use of CSS in tables:


<html>

<head>

<title>css table</title>

</head>

<style>

table, th, td {

border: 1px solid black;

padding: 15px;

table {

width: 100%;

th {

height: 70px;

background-color: #4CAF50;

color: white;

td {

text-align: center;

</style>

<body>

<table>
<tr>

<th>name</th>

<th>roll number</th>

</tr>

<tr>

<td>ram</td>

<td>1234567</td>

</tr>

</table>

</body>

</html>

2. Use of CSS for CSS box


<html>
<head>
<title>div tag</title>
</head>
<style>
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
<body>
<div>
paragraph
</div>
</body>
</html>
3. Use of <span> tag
<html>
<head>
<title>div tag</title>
</head>
<body>
<p>My mother has <span style="color:blue">
blue</span> eyes.</p>
</body>
</html>

4. Use of display:
<html>
<head>
<title>display inline tag</title>
</head>
<style>
li {
display: inline;
}
</style>
<body>
<ol>
<li>mango</li>
<li>orange</li>
</body>
</html>

5. Use of display none


<html>
<head>
<title>display tag</title>
</head>
<style>
h1.hidden {
display: none;
}
</style>
<body>
<h1 class = "hidden">fruits name</h1>
<ol>
<li>mango</li>
<li>orange</li>
</ol>
</body>
</html>

6. Use of css in div tag to give static position:


<html>

<head1>

<title>position </title>
</head>
<style>
div.static {
position: static;
border: 3px solid #73AD21;
}
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
</style>
<body>
<div class = "static">
ram is a boy
</div>
<div class = "relative">
ram is a boy
</div>
</div>
<div class = "absolute">
ram is a boy
</div>
</body>
</html>

You might also like