1. There are three ways of inserting a style sheet:
* External style sheet
* Internal style sheet
* Inline style
External Style Sheet:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
Internal Style Sheet
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Inline Styles
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
result:
This is a paragraph.
2. CSS background:
body {background-color:blue;}
h1 {background-color:blue;}
p {background-color:blue;}
div {background-color:blue;}
body {background-image:url('bg.gif');} //background image
3. CSS text color
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
4. Text Alignment
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
5. Text Decoration
a {text-decoration:none;}
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
6. Text Transformation
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
7. Text Indentation
p {text-indent:50px;}
Example:
<p style="text-indent:50px;color:red;background-color:grey;text-decoration:underline">Text indentation 50px.</p>
or
<div style="text-indent:50px;color:red;background-color:grey;text-decoration:underline">Text indentation 50px.</div>
Result:
Text indentation 50px.
8. CSS Font style:p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
9. CSS Font size:
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
example:
<div style="font-style:oblique;font-size:30px">font-style:oblique;font-size:30px</div>
result:
font-style:oblique;font-size:30px
9. CSS style linksColor
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
Text decoration
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
Background color:
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
10. CSS list:
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
11. CSS table
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
table
{
width:100%;
}
th
{
height:50px;
}
td
{
height:50px;
vertical-align:bottom;
}
td
{
text-align:right;
}
example:
<table border="2" style="border:10px solid red;background-color:green;text-align:center;width:50%;">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Result can be found HERE.
Example 1: Link Box:
<style type="text/css">
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
<a href="http://www.blogger.com/default.asp" target="_blank">This is a link</a>
Example 2: header
<style type="text/css">
div.header{
padding:0.5em;
color:white;
background-color:gray;
clear:center};
</style>
<div class="header"><h1 class="header"><center>Welcome to My Homepage</center></h1></div>
Results can be seen here
Example 3: CSS drop down menu:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Dropdown mainmenu Example</title>
<style type="text/css">
<!--
#menuh-container
{
position: absolute;
top: 1em;
left: 1em;
}
#menuh
{
font-size: small;
font-family: arial, helvetica, sans-serif;
width:100%;
float:left;
margin:2em;
margin-top: 1em;
}
#menuh a
{
text-align: center;
display:block;
border: 1px solid #555;
white-space:nowrap;
margin:0;
padding: 0.3em;
}
#menuh a:link, #menuh a:visited, #menuh a:active /* menu at rest */
{
color: white;
background-color: royalblue;
text-decoration:none;
}
#menuh a:hover /* menu on mouse-over */
{
color: white;
background-color: cornflowerblue;
text-decoration:none;
}
#menuh a.top_parent, #menuh a.top_parent:hover /* attaches down-arrow to all top-parents */
{
background-image: url(navdown_white.gif);
background-position: right center;
background-repeat: no-repeat;
}
#menuh a.parent, #menuh a.parent:hover /* attaches side-arrow to all parents */
{
background-image: url(nav_white.gif);
background-position: right center;
background-repeat: no-repeat;
}
#menuh ul
{
list-style:none;
margin:0;
padding:0;
float:left;
width:9em; /* width of all menu boxes */
/* NOTE: For adjustable menu boxes you can comment out the above width rule.
However, you will have to add padding in the "#menh a" rule so that the menu boxes
will have space on either side of the text -- try it */
}
#menuh li
{
position:relative;
min-height: 1px; /* Sophie Dennis contribution for IE7 */
vertical-align: bottom; /* Sophie Dennis contribution for IE7 */
}
#menuh ul ul
{
position:absolute;
z-index:500;
top:auto;
display:none;
padding: 1em;
margin:-1em 0 0 -1em;
}
#menuh ul ul ul
{
top:0;
left:100%;
}
div#menuh li:hover
{
cursor:pointer;
z-index:100;
}
div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}
div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}
/* End CSS Drop Down Menu */
</style>
</head>
<body>
<div id="menuh-container">
<div id="menuh">
<ul>
<li><a href="#" class="top_parent">Item 1</a>
<ul>
<li><a href="#" class="parent">Sub 1:1</a>
<ul>
<li><a href="#">Sub 1:1:1</a></li>
<li><a href="#">Sub 1:1:2</a></li>
<li><a href="#">Sub 1:1:3</a></li>
<li><a href="#">Sub 1:1:4</a></li>
</ul>
</li>
<li><a href="#" class="parent">Sub 1:2</a>
<ul>
<li><a href="#">Sub 1:2:1</a></li>
<li><a href="#">Sub 1:2:2</a></li>
<li><a href="#">Sub 1:2:3</a></li>
<li><a href="#">Sub 1:2:4</a></li>
</ul>
</li>
<li><a href="#">Sub 1:3</a></li>
<li><a href="#" class="parent">Sub 1:4</a>
<ul>
<li><a href="#">Sub 1:4:1</a></li>
<li><a href="#">Sub 1:4:2</a></li>
<li><a href="#">Sub 1:4:3</a></li>
<li><a href="#">Sub 1:4:4</a></li>
</ul>
</li>
<li><a href="#" class="parent">Sub 1:5</a>
<ul>
<li><a href="#">Sub 1:5:1</a></li>
<li><a href="#">Sub 1:5:2</a></li>
<li><a href="#">Sub 1:5:3</a></li>
<li><a href="#">Sub 1:5:</a></li>
<li><a href="#">Sub 1:5:5</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><a href="#" class="top_parent">Item 2</a>
<ul>
<li><a href="#" class="parent">Sub 2:1</a>
<ul>
<li><a href="#">Sub 2:2:1</a></li>
<li><a href="#">Sub 2:2:2</a></li>
<li><a href="#">Sub 2:2:3</a></li>
<li><a href="#">Sub 2:2:4</a></li>
</ul>
</li>
<li><a href="#" >Sub 2:2</a>
</li>
</li>
</ul>
</div> <!-- end the menuh-container div -->
</div> <!-- end the menuh div -->
</body>
</html>
Results can be seen here
No comments:
Post a Comment