Scribd
Upload
11 views20 pages

CSS Image Insertion and Styling Guide

The document provides various examples of HTML and CSS usage, including image insertion, font styling, bi-directional text, block quotes, and tables. It also demonstrates the use of divs for layout, internal linking, text rotation, and text-shadow effects. Each section includes code snippets and explanations of the applied styles and HTML elements.

Uploaded by

kalpanajami2
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
11 views20 pages

CSS Image Insertion and Styling Guide

The document provides various examples of HTML and CSS usage, including image insertion, font styling, bi-directional text, block quotes, and tables. It also demonstrates the use of divs for layout, internal linking, text rotation, and text-shadow effects. Each section includes code snippets and explanations of the applied styles and HTML elements.

Uploaded by

kalpanajami2
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

HTML

Inserting a image with css:


<html>
<head>
<title>Image Insertion</title>
<style>
.abc{
width:400px;
height:300px;
border:20px double pink;
border-radius:20px;
display:block;
margin:0 auto;
}
</style>
</head>
<body>
<img src="/home/user/Desktop/HTML/images/[Link]" class="abc"
title="rgukt">
</body>
</html>

Explanation:
 Width and height for the image width and height.
 Border is for border of the image
 20px is the border size,
 double is the border style,
 pink is the color of the border.
 Border radius is 20px
 Display:block-This sets the image as a block-level element,which
allows us to apply margins.
 Margin:0 auto-
 0 margin for top and bottom.
 Auto margin for left and right.
 Title-is for displaying title when cursor move.
Output:

Font style by CSS:

.def{
color:aqua;
font-size:50px;
font-family:sans-serif;
font-weight:bold;
font-variant:small-caps;
text-decoration:overline underline;
text-decoration-style:double;
}

Output:
bdo:
Input:
<bdo dir="rtl">poornima</bdo>

Output:
aminroop

Explanation:
 Bi-Directional Override .
 It is used to override the default direction of the text in a document.
 Bdo element only affects the direction of text,not the layout or
aligmnet of element.

Block quote:

Input:
<blockquote>
For 60 years, WWF has worked to help people and nature thrive. As the
world's leading conservation organization, WWF works in nearly 100
countries.
</blockquote>
<p>
At every level, we collaborate with people around the world to develop and
deliver innovative solutions that protect communities, wildlife, and the
places in which they live.
</p>
Output:

Quotes:

Input:
<p>WWF's goal is to: <q>Build a future where people live in harmony with
nature.</q></p>

Output:
WWF's goal is to: “Build a future where people live in harmony with
nature.”

addr:
Input:
<p>The <abbr title="World Health Organization">WHO</abbr> was
founded in 1948.</p>

Ouput:

Address:
Input:
<address>
Written by John Doe.<br>
Visit us at:<br>
[Link]<br>
Box 564, Disneyland<br>
USA
</address>

Output:

Table:
Input:
<table border="1" style="border-collapse:collapse" cellspacing="30"
cellpadding="10">
<caption align="bottom">table</caption>
<tr>
<td colspan="3" align="center" width=70%>A</td><td colspan="2"
align="center">B</td>
</tr>
<tr>
<td rowspan="3" align="center" >C</td><td>D</td><td>E</td><td
rowspan="2" colspan="2" valign="top" align="center">F</td>
</tr>
<tr>
<td colspan="2" align="center">G</td>
</tr>
<tr>
<td>H</td><td colspan="3" align="center">I</td>
</tr>
<tr>
<td rowspan="2"align="center">J</td><td rowspan="2"
align="center">K</td><td rowspan="2" align="center"
valign="bottom">L</td><td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
</table>

Output:

Input:
<html>
<head>
<title>table</title>
</head>
<body>
<table border="1" style="border-collapse:collapse;" width="90%"
height="80%" align="center">
<tr>
<td style="background-color:blue">
<table border="1" style="border-collapse:collapse;" width="85%"
height="70%" align="center">
<tr>
<td style="background-color:white">
<table border="1" style="border-collapse:collapse;"
width="80%" height="60%" align="center">
<tr>
<td style="background-color:red">
<table border="1" style="border-collapse:collapse;"
width="75%" height="50%" align="center">
<tr>
<td style="background-color:yellow;">
<table border="1" style="border-collapse:collapse;"
width="70%" height="40%" align="center">
<tr>
<td style="background-color:green;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Output:

Input:
<html>
<head>
<style>*{background-color:aqua;}</style>
</head>
<body>
<table border=1 cellpadding=0 cellspacing=0 bordercolor=navy
bgcolor=bluegreen>
<tr>
<td colspan=2 rowspan=2 bgcolor=plum> </td> <td colspan=4
align=center>Rank</td> <td rowspan=2>Total</td>
</tr>
<tr>
<td>A</td> <td>B</td> <td>C</td> <td>others</td>
</tr>
<tr>
<td rowspan=2>type</td> <td>type1</td> <td>10</td> <td>21</td>
<td>6</td> <td>3</td> <td>40</td>
</tr>
<tr>
<td>type2</td> <td>8</td> <td>14</td> <td>5</td> <td>2</td>
<td>29</td>
</tr>
<tr>
<td colspan=2 align=center>Total</td> <td>18</td> <td>35</td>
<td>11</td> <td>5</td> <td>69</td>
</tr>
<caption align=bottom>Fig 1:Distribution of the types of ranks </caption>
</table>
</body>
</html>

Output:

Input:
<table border=1 cellpadding=5 bordercolor=purple bgcolor=yellow
align=center>
<tr align=center>
<td> </td> <td><font color="navy">P1</td> <td><font
color="navy">P2</td> <td><font color="navy">P3</td> <td><font
color="navy">P4</td> <td><font color="navy">P5</td> <td><font
color="navy">P6</td> <td><font color="navy">P7</td>
</tr>
<tr>
<td><font color="navy">Monday</td> <td><font color="black">Phy</td>
<td><font color="black">Math</td> <td><font color="black">Eng</td>
<td><font color="black">Chem</td> <td colspan=2 bgcolor=fuchsia
align=center>IT Lab</td> <td bgcolor=black> </td>
</tr>
<tr>
<td><font color="navy">Tuesday</td> <td><font color="black">Tel</td>
<td><font color="black">Chem</td> <td><font color="black">Math</td>
<td bgcolor=black> </td> <td><font color="black">Eng</td> <td><font
color="black">Phy</td> <td><font color="black">IT</td>
</tr>
<tr>
<td><font color="navy">Wednesday</td> <td><font
color="black">Bio</td> <td><font color="black">Chem</td> <td><font
color="black">Eng</td> <td><font color="black">Phy</td> <td colspan=2
align=center bgcolor=yellow>Math<td><font color="black">IT</td>
</tr>
<tr>
<td><font color="navy">Thursday</td> <td><font color="black">Tel</td>
<td><font color="black">Math</td> <td><font color="black">Eng</td>
<td><font color="black">Phy</td> <td><font color="black">Chem</td>
<td><font color="black">Bio</td> <td bgcolor=black> </td>
</tr>
<tr>
<td><font color="navy">Friday</td> <td><font color="black">Phy</td>
<td><font color="black">Math</td> <td><font color="black">Tel</td>
<td><font color="black">Chem</td> <td colspan=2 align=center
bgcolor=fuchsia>Phy Lab</td> <td>FA</td>
</tr>
<tr>
<td><font color="navy">Saturday</td> <td colspan=2 align=center
bgcolor=fuchsia>Chem Lab</td> <td><font color="black">Math</td>
<td><font color="black">Phy</td> <td><font color="black">Eng</td>
<td><font color="black">Chem</td> <td><font color="black">Bio</td>
</tr>
</table>

Output:
Input:
<table border="2" bordercolor="navy">
<tr>
<td
style="writing-mode:vertical-lr;text-orientation:mixed;">rgukt</td><td
style="writing-mode:vertical-lr;text-orientation:upright;">rgukt</td>
</tr>
<tr>
<td>rgukt</td><td>rgukt</td>
</tr>
<tr>
<td style="writing-mode:vertical-lr;text-
orientation:subways;">rgukt</td><td style="writing-mode:vertical-lr;text-
orientation:subways;">rgukt</td>
</tr>
</table>

Output:

div with CSS:


Input:
<style>
div{
float:right;
background-color:#f2f2f2;
color:#00698f;
border:5px double;
border-radius:40px;
border-color:#ccc;
outline-color:#666;
}
</style>
<body>
<div>
This is Example
</div>
</body>

Output:

Using div three in a row:

Input:
<html>
<head>
<title>Three in a row</title>
<style>
#abc{
width:30%;
height:35%;
float:left;
padding:8px;
margin:2px;
box-shadow:0 0 20px gray;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;

}
#xyz{
width:30%;
height:5%;
float:left;
border-radius:10px;
padding:8px;
margin:2px;
font-weight:bold;
text-align:center;
border-top-left-radius:10px;
border-top-right-radius:10px;
}
</style>
</head>
<body>
<div>
<div id="xyz" style="background-color:red;color:white;border-
bottom:2px solid red;">Ordered list</div>
<div id="xyz" style="background-color:orange;color:white;border-
bottom:2px solid orange;">
Unordered List</div>
<div id="xyz" style="background-color:blue;color:white;border-
bottom:2px solid blue;">
Description List</div>
</div>

<div>
<div id="abc" style="border-bottom:3px solid red;">
<ol>
<li>Information Gathering</li>
<li style="background-color:lightgray;">Planning</li>
<li>Design</li>
<li style="background-color:lightgray;">Development</li>
<li>Testing &Deployment</li>
<li style="background-color:lightgray;">Maintenance</li>
</ol>
</div>
<div id="abc" style="border-bottom:3px solid orange;">
<ul type="square">
<li>HTML</li>
<li>CSS</li>
</ul>
<ul type="circle" style="background-color:lightgray;">
<li>SQL</li>
<li>PHP</li>
</ul>
<ul>
<li>JavaScript</li>
<li>Python</li>
</ul>
</div>
<div id="abc" style="border-bottom:3px solid blue">
<dl>
<dt><small>HTML</dt>
<dd><small><small><small>HTML stands for Hyper Text
Markup [Link] is the standard markup language for creating wed
[Link] describes the structure of wed
page.</small></small></small></dd>

<dt><small>CSS</small></dt>
<dd><small><small><small>CSS is the acronym of 'Cascading
Style Sheets'. CSS is the language use to style an HTML document .CSS
describes how HTML elements should be
displayed.</small></small></small></dd>
<dt><small>PHP</small></dt>
<dd><small><small><small>PHP is an acronym for
'PHP:Hypertext Preprocessor'.PHP is sever scripting [Link] a
powerful tool for making dynamic and interactive web
pages.</small></small></small></dd>
</dl>
</div>
</div>
</body>
</html>

Output:

Input:

<html>
<head>
<title>Example of Internal Linking</title>
<style>
*{text-align:center;background-color:yellow;}
h1{color:red;}
</style>
</head>
<body>
<p>paragraph</p>
<h1>hello</h1>
<p>hi</p>
<p>Total body is following * instructions from the style.</p>
</body>
</html>
Output:

Rotation:
Input:
<style>
.a{
writing-mode:vertical-rl;
text-orientation:sideways;
transform:rotate(0deg);
border:5px dotted red;
margin:19pt;
float:left;
}
.b{
writing-mode:vertical-rl;
text-orientation:sideways;
transform:rotate(90deg);
border:5px dotted red;
margin:19pt;
float:left;
}
.c{
writing-mode:vertical-rl;
text-orientation:sideways;
transform:rotate(180deg);
border:5px dotted red;
margin:19pt;
float:left;
}
.d{
writing-mode:vertical-rl;
text-orientation:sideways;
transform:rotate(270deg);
border:5px dotted red;
margin:19pt;
float:left;
}
.e{
writing-mode:vertical-rl;
text-orientation:sideways;
transform:rotate(360deg);
border:5px dotted red;
margin:19pt;
float:left;
}
</style>
<body>
<div class="a">Poornima</div>
<div class="b">Poornima</div>
<div class="c">Poornima</div>
<div class="d">Poornima</div>
<div class="e">Poornima</div>
</body>

Output:

Text-shadow:
Input:
<div style="float:left;text-shadow:5px 5px 5px
red;padding:15px;">Poornima</div>
<div style="float:left;text-shadow:-5px 5px 5px
red;padding:15px;">Poornima</div>
<div style="float:left;text-shadow:5px -5px 5px
red;padding:15px;">Poornima</div>
<div style="float:left;text-shadow:5px 5px -5px
red;padding:15px;">Poornima</div>

Output:

Explanation:
 text-shadow:x-axis y-axis blur color
List
Input:
<style>
ul{
border:3px solid navy;
border-radius:20px;
padding:20px;
position:relative;
top:30px;
left:50px;
}
</style>
<body>
<ul>
<li>html</li>
<ul>
<li>css</li>
<ul>
<li>java</li>
<ul>
<li>python</li>
</ul>
</ul>
</ul>
</ul>
</body>
Output:

You might also like