You can learn Css only 2 Lessons.
lesson1 lesson2
Including comments in stylesheet definitions
<html>
<head>
<style type="text/css">
/* this is a comment
this is another comment
*/
p{
color: green; /* the color of the text in the paragraph */
font-family: Courier;
margin-top: 0;
margin-left: 0; /* the left margin of the paragraph */
}
</style>
</head>
<body>
<p>
The text in this paragraph will be green.
</p>
</body>
</html>
Run . . . .
Background
<html>
<head>
<title>Background properties</title>
<style type="text/css">
body {background-color: blue;}
h1 {background-color: lightsteelblue;}
p {background-color: rgb(220, 220, 220);}
a {background-color: #e6dcbe;}
</style>
</head>
<body>
<h1> I am Asad</h1>
<p>
A paragraph
</p></body>
</html>
Font setting
<head>
<title>Background properties</title>
<style type="text/css">
h1 {color: green;}
p {color: #00008b;}
p.text{color: rgb(47, 49, 49);}
</style>
</head>
<body>
<h1>This text is green</h1>
<p>This text is darkblue</p>
<p class="text">This text is darkslategray</p>
</body>
</html>
Run . . . . .
<html>
<head>
<title>Lists</title>
</head>
<body>
<ul style="list-style-type: square;">
<li>black</li>
<li>blue</li>
<li>yellow</li>
<li>orange</li>
</ul>
<ul style="list-style-type: upper-alpha;">
<li>black</li>
<li>blue</li>
<li>yellow</li>
<li>orange</li>
</ul>
<ol style="list-style-type: disc;">
<li>black</li>
<li>blue</li>
<li>yellow</li>
<li>orange</li>
</ol>
<ol style="list-style-type: circle;">
<li>black</li>
<li>blue</li>
<li>yellow</li>
<li>orange</li>
</ol>
</body>
</html>
Run . . . .
Border
<html>
<head>
<title>Lists</title>
<style type="text/css">
h1 {border-style: dashed;}
h2 {border-style: double;}
p {border-style: dotted;}
a {border-style: groove;}
</style>
</head>
<body>
<h1>This text has a dashed border</h1>
<h2>This text has a double border</h2>
<p>This text has a dotted border</p>
<a href="http://www.yahoo.com">This text has a groove
border</a>
</body>
</html>
Run . . .
<html>
<head>
<style type="text/css">
p.two {position: absolute; left: 20; top: 40;}
h2 {position: relative; right: 40;bottom: 60;}
</style>
<title>Positioning elements</title>
</head>
<body>
<p>This paragraph has a default position.</p>
<p class="two">This paragraph has an absolute position.
</p>
<h4>This heading has a relative position.</h4>
</body>
</html>
Run . . . .
Table
<table border="2" width="94%" style="border-collapse:
collapse;">
<tr>
<td>This table</td>
<td>has the <b>border-collapse</b></td>
</tr>
<tr>
<td>property</td>
<td>set to "collapse"</td>
</tr>
</table>
<table border="2" width="94%" style="border-collapse:
separate;">
<tr>
<td>This table</td>
<td>has the <b>border-collapse</b></td>
</tr>
<tr>
<td>property</td>
<td>set to "separate"</td>
</tr>
</table>
Run . . . .
>>> Previous
