vanilla-css3-fundamentals.html

<!-- vanilla-css3-fundamentals -->


<!-- 01. internal css/background color  -->


<!-- Source :  -->
<!doctype html>
<html>
<head>
<style>
h1 { 
background-color: pink;
}
</style>
<title> idol wave </title>
</head>
<body>
<h1> software, user interface, user experience </h1>
<p> a tune of better world </p>
<h2> virtual marketing </h2>
<p> success </p>
</body> 
</html>
<!-- save as  -->
<!-- text.html -->


<!-- 02a.internal css/font color -->


<!-- source : -->
<!doctype html>
<html>
<head>
<style>
h1 { 
background-color: pink;
}
p { 
color: purple;
}
</style>
<title> idol wave </title>
</head>
<body>
<h1> software, user interface, user experience </h1>
<p> a tune of better world </p>
<h2> virtual marketing </h2>
<p> success </p>
</body>  
</html>


<!-- 02b.internal css/font size -->


<!-- source: -->
<!doctype html>
<html>
<head>
<style>
h1 { 
 background-color: pink; 
}
p { 
color: purple; 
font-size: 25px;
 }
</style>
<title> idol wave </title>
</head>
<body>
<h1> software, user interface, user experience </h1>
<p> a tune of better world </p>
<h2> virtual marketing </h2>
<p> success </p> 
</body>  
</html>


<!-- 02c.internal css/font family -->


<!-- source: -->
<!doctype html>
<html>
<head>
<style>
h1 { 
background-color: pink;
}
p {
 color: purple; 
font-size: 25px; 
font-family: helvetica;
}
</style>
<title> idol wave </title>
</head>
<body>
<h1> software, user interface, user experience </h1>
<p> a tune of better world </p>
<h2> virtual marketing </h2>
<p> success </p>
</body> 
</html>


<!-- 03a.internal css/multiple selectors and writing rule for more than one element -->


<!-- source: -->
<!doctype html>
<html>
<head>
<style>
h1,h2 { 
background-color: pink;
}
p { 
color: purple;
 font-size: 25px;
 font-family: helvetica;
}
</style>
<title> idol wave </title>
</head>
<body>
<h1> software, user interface, user experience </h1>
<p> a tune of better world </p>
<h2> virtual marketing </h2>
<p> success </p>
</body> 
</html>


<!-- 03b.internal css/multiple selectors and writing rule for more than one element -->


<!-- source: -->
<!doctype html>
<html>
<head>
<style>
h1,h2 { 
background-color: pink;
}
h1,h2 {
 color: blue;
}
p { 
color: purple; 
font-size: 25px; 
font-family: helvetica;
}
</style>
<title> idol wave </title>
</head>
<body>
<h1> software, user interface, user experience </h1>
<p> a tune of better world </p>
<h2> virtual marketing </h2>
<p> success </p>
</body> 
</html>


<!-- 03c.internal css/multiple selectors and writing rule for more than one element -->


<!-- source: -->
<!doctype html>
<html>
<head>
<style>
h1,h2 { 
background-color: pink;
}
h1 {
 color: blue;
}
<! virtual marketing is in not blue color because h2 is not selected in above coding>
p { 
color: purple; 
font-size: 25px; 
font-family: helvetica;
}
</style>
<title> idol wave </title>
</head>
<body>
<h1> software, user interface, user experience </h1>
<p> a tune of better world </p>
<h2> virtual marketing </h2>
<p> success </p>
</body> 
</html>


<!-- 04a. add a line to header and border property (holl). -->


<!-- source: -->
<!doctype html>
<html>
<head>
<style>
h1,h2 { 
border: 1px solid black;
}

p { 
color: purple; 
font-size: 25px; 
font-family: helvetica;
}
</style>
<title> idol wave </title>
</head>
<body>
<h1> software, user interface, user experience </h1>
<p> a tune of better world </p>
<h2> virtual marketing </h2>
<p> success </p>
</body> 
</html>


<!-- 04b. add a line to header and border property (bottom). -->


<!-- source: -->
<!doctype html>
<html>
<head>
<style>
h1,h2 { 
border-bottom: 1px solid black;
}
p { 
color: purple; 
font-size: 25px; 
font-family: helvetica;
}
</style>
<title> idol wave </title>
</head>
<body>
<h1> software, user interface, user experience </h1>
<p> a tune of better world </p>
<h2> virtual marketing </h2>
<p> success </p>
</body> 
</html>


<!-- 04c. add a line to header and border property( top, bottom, left and right). -->


<!-- source: -->
<!doctype html>
<html>
<head>
<style>
h1 { 
border-top: 3px solid blue;
}
h2 { 
border-bottom: 10px solid green;
}
h3 { 
border-left: 15px solid red;
}
h4 { 
border-right: 5px solid pink ;
}
<! for output of border-right command another helping program will add in next> 
p { 
color: purple; 
font-size: 25px; 
font-family: helvetica;
}
</style>
<title> idol wave </title>
</head>
<body>
<h1> software, user interface, user experience </h1>
<p> a tune of better world </p>
<h2> virtual marketing </h2>
<p> success </p>
<h3> thanks </h3>
<h4> the end </h4>
</body> 
</html>


<!-- 05a. inheritance and overriding -->


<!-- source: -->
<!doctype html>
<html>
<head>
<style>
body {
color: green;
}
<! when we using body color then all body text will similar color>
</style>
<title> idol wave </title>
</head>
<body>
<h1> software, user interface, user experience </h1>
<p> a tune of better world </p>
<h2> virtual marketing </h2>
<p> success </p>
</body> 
</html>


/* 05b. inheritance and overriding */


/* source: */
<!doctype html>
<html>
<head>
<style>
body {
color: green;
}
p {
color: red;
}
<!when we using body color then all body text will similar color 
but when we again add a para color this call over overriding/writing 
and para color will change. body color will same>
</style>
<title> idol wave </title>
</head>
<body>
<h1> software, user interface, user experience </h1>
<p> a tune of better world </p>
<h2> virtual marketing </h2>
<p> success </p>
</body> 
</html>


/* 06. using classes in css */


/* source: */
<!doctype html>
<html>
<head>
<style>
body {
color: green;
}
p.blue { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.red { 
color: red; 
font-size: 25px; 
font-family: helvetica;
}
</style>
<title> idol wave </title>
</head>
<body>
<h1> software, user interface, user experience </h1>
<p class="blue"> a tune of better world </p>
<h2> virtual marketing </h2>
<p class="red"> success </p>
</body> 
</html>


<!-- 07a. more on classes in css -->

 
<!-- source: -->
<!doctype html>
<html>
<head>
<style>
body {
color: green;
}
p.blue { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.red { 
color: red; 
font-size: 25px; 
font-family: helvetica;
}
</style>
<title> idol wave </title>
</head>
<body>
<h1> software, user interface, user experience </h1>
<p class="blue"> a tune of better world </p>
<h2> virtual marketing </h2>
<p class="red"> success </p>
<blockquote>
is a innitiative
</blockquote> 
<!due to blockquote area will show as view in different position.>
</body> 
</html>


<!-- 07b. more on classes in css -->
 
<!-- source: -->
<!doctype html>
<html>
<head>
<style>
body {
color: green;
}
.blue { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.red { 
color: red; 
font-size: 25px; 
font-family: helvetica;
}
</style>
<title> idol wave </title>
</head>
<body>
<h1> software, user interface, user experience </h1>
<p class="blue"> a tune of better world </p>
<h2> virtual marketing </h2>
<p class="red"> success </p>
<blockquote class="blue">
is a innitiative
</body> 
</html>


<!-- 07c. more on classes in css -->
 
<!-- source: -->
<!doctype html>
<html>
<head>
<style>
body {
color: green;
}
.blue { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.red { 
color: red; 
font-size: 25px; 
font-family: helvetica;
}
.underline {
text-decoration: underline;
}
</style>
<title> idol wave </title>
</head>
<body>
<h1> software, user interface, user experience </h1>
<p class="blue"> a tune of better world </p>
<h2> virtual marketing </h2>
<p class="red"> success </p>
<blockquote class="blue underline">
is a innitiative
</body> 
</html>


<!-- 07d. more on classes in css -->


<!-- source: -->
<!doctype html>
<html>
<head>
<style>
body {
color: green;
}
.blue { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.red { 
color: red; 
font-size: 25px; 
font-family: helvetica;
}
.underline {
text-decoration: underline;
}
</style>
<title> idol wave </title>
</head>
<body>
<h1> software, user interface, user experience </h1>
<p class="blue underline"> a tune of better world </p>
<h2> virtual marketing </h2>
<p class="red"> success </p>
<blockquote class="blue underline">
is a innitiative
</body> 
</html>


<!-- 08. more on classes in css -->


<!-- source: -->
<!doctype html>
<html>
<head>
<style>
body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
}
.blue { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.red { 
color: red; 
font-size: 25px; 
font-family: helvetica;
}
.underline {
text-decoration: underline;
}
</style>
<title> idol wave </title>
</head>
<body>
<h1> software, user interface, user experience </h1>
<p class="blue underline"> a tune of better world </p>
<h2> virtual marketing </h2>
<p class="red"> success </p>
<blockquote class="blue underline">
is a innitiative
</body> 
</html>


<!-- 09a. the font weight property (light) -->

 
<!-- source: -->
<!doctype html>
<html>
<head>
<style>
body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: lighter;
}
.blue { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.red { 
color: red; 
font-size: 25px; 
font-family: helvetica;
}
.underline {
text-decoration: underline;
}
</style>
<title> idol wave </title>
</head>
<body>
<h1> software, user interface, user experience </h1>
<p class="blue underline"> a tune of better world </p>
<h2> virtual marketing </h2>
<p class="red"> success </p>
<blockquote class="blue underline">
is a innitiative
</body> 
</html>


<!-- 09b. the font weight property (normal) -->


<!-- source: -->
<!doctype html>
<html>
<head>
<style>
body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: normal;
}
.blue { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.red { 
color: red; 
font-size: 25px; 
font-family: helvetica;
}
.underline {
text-decoration: underline;
}
</style>
<title> idol wave </title>
</head>
<body>
<h1> software, user interface, user experience </h1>
<p class="blue underline"> a tune of better world </p>
<h2> virtual marketing </h2>
<p class="red"> success </p>
<blockquote class="blue underline">
is a innitiative
</body> 
</html>


<!-- 09c. the font weight property (bold) -->


<!-- source: -->
<!doctype html>
<html>
<head>
<style>
body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bold;
}
.blue { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.red { 
color: red; 
font-size: 25px; 
font-family: helvetica;
}
.underline {
text-decoration: underline;
}
</style>
<title> idol wave </title>
</head>
<body>
<h1> software, user interface, user experience </h1>
<p class="blue underline"> a tune of better world </p>
<h2> virtual marketing </h2>
<p class="red"> success </p>
<blockquote class="blue underline">
is a innitiative
</body> 
</html>


<!-- 09d. the font weight property (bolder) -->


<!-- source: -->
<!doctype html>
<html>
<head>
<style>
body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
}
.blue { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.red { 
color: red; 
font-size: 25px; 
font-family: helvetica;
}
.underline {
text-decoration: underline;
}
</style>
<title> idol wave </title>
</head>
<body>
<h1> software, user interface, user experience </h1>
<p class="blue underline"> a tune of better world </p>
<h2> virtual marketing </h2>
<p class="red"> success </p>
<blockquote class="blue underline">
is a innitiative
</body> 
</html>


<!-- 10. external style sheet -->


<!-- source (css+html) –  -->
<!-- external css : -->
body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
}
.blue { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.red { 
color: red; 
font-size: 25px; 
font-family: helvetica;
}
.underline {
text-decoration: underline;
}


<!-- save as stylesheet.css -->


<!-- html : -->
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title> idol wave </title>
</head>
<body>
<h1> software, user interface, user experience </h1>
<p class="blue underline"> a tune of better world </p>
<h2> virtual marketing </h2>
<p class="red"> success </p>
<blockquote class="blue underline">
is a innitiative
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 11a. external style sheet-text-decoration property -->


<!-- source (css+html) –  -->
<!-- external css : -->
body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
}
h1,h2 {
text-decoration: underline;
}
.blue { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.red { 
color: red; 
font-size: 25px; 
font-family: helvetica;
}

<!-- save as stylesheet.css -->


<!-- html : -->
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title> idol wave </title>
</head>
<body>
<h1> software, user interface, user experience </h1>
<p class="blue underline"> a tune of better world </p>
<h2> virtual marketing </h2>
<p class="red"> success </p>
<blockquote class="blue underline">
is a innitiative
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 11b. external style sheet-text-decoration property -->


<!-- source (css+html) –  -->
<!-- external css : -->
body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
}
h1,h2 {
text-decoration: line-through;
}
.blue { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.red { 
color: red; 
font-size: 25px; 
font-family: helvetica;
}


<!-- save as stylesheet.css -->


<!-- html : -->
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title> idol wave </title>
</head>
<body>
<h1> software, user interface, user experience </h1>
<p class="blue underline"> a tune of better world </p>
<h2> virtual marketing </h2>
<p class="red"> success </p>
<blockquote class="blue underline">
is a innitiative
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 11c. external style sheet-text-decoration property -->


<!-- source (css+html) –  -->
<!-- external css : -->
body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
}
h1,h2 {
text-decoration: overline;
}
.blue { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.red { 
color: red; 
font-size: 25px; 
font-family: helvetica;
}
<!-- save as stylesheet.css -->


<!-- html : -->
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title> idol wave </title>
</head>
<body>
<h1> software, user interface, user experience </h1>
<p class="blue underline"> a tune of better world </p>
<h2> virtual marketing </h2>
<p class="red"> success </p>
<blockquote class="blue underline">
is a innitiative
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 11d. external style sheet-text-decoration property -->


<!-- source (css+html) –  -->
<!-- external css : -->
body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
}
h1,h2 {
text-decoration:  underline overline;
}
.blue { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.red { 
color: red; 
font-size: 25px; 
font-family: helvetica;
}


<!-- save as stylesheet.css -->


<!-- html : -->
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title> idol wave </title>
</head>
<body>
<h1> software, user interface, user experience </h1>
<p class="blue underline"> a tune of better world </p>
<h2> virtual marketing </h2>
<p class="red"> success </p>
<blockquote class="blue underline">
is a innitiative
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 11e. external style sheet-text-decoration property -->


<!-- source (css+html) –  -->
<!-- external css : -->
body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
}
h1,h2 {
text-decoration:  underline overline;
}
.blue { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.red { 
color: red; 
font-size: 25px; 
font-family: helvetica;
}

<!-- save as stylesheet.css -->


<!-- html : -->
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title> idol wave </title>
</head>
<body>
<h1> software, user interface, user experience </h1>
<p class="blue underline"> a tune of better world </p>
<h2> virtual marketing </h2>
<p class="red"> success </p>
<blockquote class="blue underline">
is a innitiative
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 12a. external style sheet-italic(start) fonts -->


<!-- source (css+html) –  -->
external css :
body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
}
h1,h2 {
text-decoration: none;
}
p.para1 { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.para2 { 
color: red; 
font-size: 25px; 
font-family: helvetica;
}
p.para3 { 
color: purple; 
font-size: 25px; 
font-family: helvetica;
}


<!-- save as stylesheet.css -->

<!-- html : -->
<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 

<title> idol wave </title> 
</head> 
<body> 
<h1> software, user interface, user experience </h1> 
<p class="para1"> a tune of better world </p> 
<h2> virtual marketing </h2> 
<p class="para2"> success </p> 
<p class="para3"> is a innitiative </p> 
</body> 
</html> 

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 12b. external style sheet-italic fonts -->


<!-- source (css+html) –  -->
<!-- external css : -->

body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
}
h1,h2 {
text-decoration: none;
}
p.para1 { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.para2 { 
color: red; 
font-size: 25px; 
font-family: helvetica;
}
p.para3 { 
color: purple; 
font-size: 25px; 
font-family: helvetica;
font-style : italic;
}


<!-- save as stylesheet.css -->


<!-- html : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body> 
<h1> software, user interface, user experience </h1> 
<p class="para1"> a tune of better world </p> 
<h2> virtual marketing </h2> 
<p class="para2"> success </p> 
<p class="para3"> is a innitiative </p> 
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 12c. external style sheet-italic/oblique fonts -->


<!-- source (css+html) –  -->
<!-- external css : -->

body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
}
h1,h2 {
text-decoration: none;
}
p.para1 { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.para2 { 
color: red; 
font-size: 25px; 
font-family: helvetica;
}
p.para3 { 
color: purple; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
}

<!-- save as stylesheet.css -->

<!-- html : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body> 
<h1> software, user interface, user experience </h1> 
<p class="para1"> a tune of better world </p> 
<h2> virtual marketing </h2> 
<p class="para2"> success </p> 
<p class="para3"> is a initiative </p> 
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 12d. external style sheet-italic fonts -->


<!-- source (css+html) –  -->
<!-- external css : -->

body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
}
h1,h2 {
text-decoration: none;
}
p.para1 { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.para2 { 
color: red; 
font-size: 25px; 
font-family: helvetica;
}
p.para3 { 
color: purple; 
font-size: 25px; 
font-family: helvetica;
font-style : italic;
}

<!-- save as stylesheet.css -->

<!-- html : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body> 
<h1> software, user interface, user experience </h1> 
<p class="para1"> a tune of better world </p> 
<h2> virtual marketing </h2> 
<p class="para2"> success of this <i> initiation </i></p> 
<p class="para3"> is a good initiative </p> 
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 13a. web colors -->

                       
<!-- source (css+html) –  -->
<!-- external css : -->

body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
background-color : lime;
}
h1,h2 {
text-decoration: none;
}
p.para1 { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.para2 { 
color: red; 
font-size: 25px; 
font-family: helvetica;
}
p.para3 { 
color: purple; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
}

<!-- save as stylesheet.css -->


<!-- html : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body> 
<h1> software, user interface, user experience </h1> 
<p class="para1"> a tune of better world </p> 
<h2> virtual marketing </h2> 
<p class="para2"> success of this <i> initiation </i></p> 
<p class="para3"> is a good initiative </p> 
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 13b. web colors(rgb color code/hex-# color code) -->

                       
<!-- source (css+html) –  -->
<!-- external css : -->

body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
background-color : rgb(240,20,235);
}
h1,h2 {
text-decoration: none;
}
p.para1 { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.para2 { 
color: red; 
font-size: 25px; 
font-family: helvetica;
}
p.para3 { 
color: purple; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
}

<!-- save as stylesheet.css -->


<!-- html : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body> 
<h1> software, user interface, user experience </h1> 
<p class="para1"> a tune of better world </p> 
<h2> virtual marketing </h2> 
<p class="para2"> success of this <i> initiation </i></p> 
<p class="para3"> is a good initiative </p> 
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 13c. web colors(rgb color code/hex-# color code) -->

                       
<!-- source (css+html) –  -->
<!-- external css : -->

body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
background-color : #ffcf79;
}
h1,h2 {
text-decoration: none;
}
p.para1 { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.para2 { 
color: red; 
font-size: 25px; 
font-family: helvetica;
}
p.para3 { 
color: purple; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
}
save as stylesheet.css


<!-- html : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body> 
<h1> software, user interface, user experience </h1> 
<p class="para1"> a tune of better world </p> 
<h2> virtual marketing </h2> 
<p class="para2"> success of this <i> initiation </i></p> 
<p class="para3"> is a good initiative </p> 
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 14. using inline style         -->
 

<!-- source (css+html) –  -->
<!-- external css : -->

body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
background-color : #ffcf79;
}
h1,h2 {
text-decoration: none;
}
p.para1 { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.para2 { 
color: red; 
font-size: 25px; 
font-family: helvetica;
}
p.para3 { 
color: purple; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
}

<!-- save as stylesheet.css -->


<!-- html : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body> 
<h1> software, user interface, user experience </h1> 
<p class="para1"> a tune of better world </p> 
<h2> virtual marketing </h2> 
<p class="para2"> success of this <i> initiation </i></p> 
<p class="para3"> is a good initiative </p> 
<p style="color:white;font-size:25px;"> this is in line style</p>
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 15. more on font sizes  -->
 

<!-- source (css+html) –  -->
<!-- external css : -->

body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
background-color : #ffcf79;
font-size: 25px; 
}
h1 {
text-decoration: none;
font-size: 150%;
}
h2 {
text-decoration: none;
font-size: 1.2em;
}
p.para1 { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.para2 { 
color: red; 
font-size: 25px; 
font-family: helvetica;
}
p.para3 { 
color: purple; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
}

<!-- save as stylesheet.css -->

<!-- html : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body> 
<h1> software, user interface, user experience </h1> 
<p class="para1"> a tune of better world </p> 
<h2> virtual marketing </h2> 
<p class="para2"> success of this <i> initiation </i></p> 
<p class="para3"> is a good initiative </p> 
<p style="color:white;font-size:25px;"> this is in line style</p>
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 16.line height property (space between two lines) -->

 
<!-- source (css+html) –  -->
<!-- external css : -->

body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
background-color : #ffcf79;
}
h1,h2 {
text-decoration: none;
}
p.para1 { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.para2 { 
color: red; 
font-size: 20px; 
font-family: helvetica;
}
p.para3 { 
color: purple; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
}

<!-- save as stylesheet.css -->


<!-- html : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body> 
<h1> software, user interface, user experience </h1> 
<p class="para1"> a tune of better world </p> 
<h2> virtual marketing </h2> 
<p class="para2"> success of this <i> initiation </i></p> 
<p class="para3"> through quality service, we qualify ourselves in a competitive position. <br> so that you will select us for your better complacence. <br> in this era idea & proficiency, travelling faster & occupy own abode.
<br>idol wave innovates something that surpasses ordinary expectations and since the information <br> technology realm is already a highly incomparable space, <br> there is no saying just how far your endeavors can take you with us. </p> 
<p style="color: white; font-size:25px;"> this is in line style</p>
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 17a.css box model-content  -->
<!-- (margin-border-padding-content) -->

 
<!-- source (css+html) –  -->
<!-- external css : -->

body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
background-color : #ffcf79;
}
h1,h2 {
text-decoration: none;
}
p.para1 { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.para2 { 
color: red; 
font-size: 20px; 
font-family: helvetica;
}
p.para3 { 
color: purple; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
background-color: #e5e4d7;
}

<!-- save as stylesheet.css -->


<!-- html : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body> 
<h1> software, user interface, user experience </h1> 
<p class="para1"> a tune of better world </p> 
<h2> virtual marketing </h2> 
<p class="para2"> success of this <i> initiation </i></p> 
<p class="para3"> through quality service, we qualify ourselves in a competitive position. <br> so that you will select us for your better complacence. <br> in this era idea & proficiency, travelling faster & occupy own abode.
<br>idol wave innovates something that surpasses ordinary expectations and since the information <br> technology realm is already a highly incomparable space, <br> there is no saying just how far your endeavors can take you with us. </p> 
<p style="color: white; font-size:25px;"> this is in line style</p>
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 17b.css box model-padding-content -->
<!-- (margin-border-padding-content) -->

 
<!-- source (css+html) –  -->
<!-- external css : -->

body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
background-color : #ffcf79;
}
h1,h2 {
text-decoration: none;
}
p.para1 { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.para2 { 
color: red; 
font-size: 20px; 
font-family: helvetica;
}
p.para3 { 
color: purple; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
background-color: #e5e4d7;
padding: 40px;
}

<!-- save as stylesheet.css -->


<!-- html : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body> 
<h1> software, user interface, user experience </h1> 
<p class="para1"> a tune of better world </p> 
<h2> virtual marketing </h2> 
<p class="para2"> success of this <i> initiation </i></p> 
<p class="para3"> through quality service, we qualify ourselves in a competitive position. <br> so that you will select us for your better complacence. <br> in this era idea & proficiency, travelling faster & occupy own abode.
<br>idol wave innovates something that surpasses ordinary expectations and since the information <br> technology realm is already a highly incomparable space, <br> there is no saying just how far your endeavors can take you with us. </p> 
<p style="color: white; font-size:25px;"> this is in line style</p>
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->

<!-- 17c.css box  model–border–padding-content -->
 <!-- (margin-border-padding-content) -->

 
<!-- source (css+html) – -->
<!-- external css : -->

body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
background-color : #ffcf79;
}
h1,h2 {
text-decoration: none;
}
p.para1 { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.para2 { 
color: red; 
font-size: 20px; 
font-family: helvetica;
}
p.para3 { 
color: purple; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
background-color: #e5e4d7;
padding: 40px;
border-color: black;
border-width: 2px;
border-style: solid;
}

<!-- save as stylesheet.css -->

<!-- html : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body> 
<h1> software, user interface, user experience </h1> 
<p class="para1"> a tune of better world </p> 
<h2> virtual marketing </h2> 
<p class="para2"> success of this <i> initiation </i></p> 
<p class="para3"> through quality service, we qualify ourselves in a competitive position. <br> so that you will select us for your better complacence. <br> in this era idea & proficiency, travelling faster & occupy own abode.
<br>idol wave innovates something that surpasses ordinary expectations and since the information <br> technology realm is already a highly incomparable space, <br> there is no saying just how far your endeavors can take you with us. </p> 
<p style="color: white; font-size:25px;"> this is in line style</p>
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->

<!-- 18.css box  model-margin–border–padding-content -->
<!-- (margin-border-padding-content) -->

 
<!-- source (css+html) –  -->
<!-- external css : -->

body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
background-color : #ffcf79;
}
h1,h2 {
text-decoration: none;
}
p.para1 { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.para2 { 
color: red; 
font-size: 20px; 
font-family: helvetica;
}
p.para3 { 
color: purple; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
background-color: #e5e4d7;
padding: 40px;
border-color: black;
border-width: 2px;
border-style: solid;
}
p.para4 { 
color: black; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
margin: 40px;
background-color: #e5e4d7;
padding: 40px;
border-color: black;
border-width: 2px;
border-style: solid;
}

<!-- save as stylesheet.css -->


<!-- html : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body> 
<h1> software, user interface, user experience </h1> 
<p class="para1"> a tune of better world </p> 
<h2> virtual marketing </h2> 
<p class="para2"> success of this <i> initiation </i></p> 
<p class="para3"> through quality service, we qualify ourselves in a competitive position.<br> so that you will select us for your better complacence.<br> in this era idea & proficiency, travelling faster & occupy own abode.
</p>
<p class="para4"> through quality service, we qualify ourselves in a competitive position.<br> so that you will select us for your better complacence.<br> in this era idea & proficiency, travelling faster & occupy own abode.
</p>  
<p style="color:white;font-size:25px;"> this is in line style</p>
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 19a.css box  model-margin–border–padding-content -->

                  
<!-- source (css+html) –  -->
<!-- external css : -->

body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
background-color : #ffcf79;
}
h1,h2 {
text-decoration: none;
}
p.para1 { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.para2 { 
color: red; 
font-size: 20px; 
font-family: helvetica;
}
p.para3 { 
color: purple; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
background-color: #e5e4d7;
padding: 40px;
border-color: black;
border-width: 2px;
border-style: solid;
}
p.para4 { 
color: black; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
margin: 40px;
background-color: #e5e4d7;
padding: 40px;
border-color: black;
border-width: 2px;
border-style: solid;
}

<!-- save as stylesheet.css -->

<!-- html : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body> 
<h1> software, user interface, user experience </h1> 
<p class="para1"> a tune of better world </p> 
<img class="imagec" src="logo.png" width="400" height="400">
<h2> virtual marketing </h2> 
<p class="para2"> success of this initiation </p> 
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 19b.css box  model-margin–border–padding-content -->


<!-- source (css+html) – -->
<!-- external css : -->

body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
background-color : #ffcf79;
}
h1,h2 {
text-decoration: none;
}
p.para1 { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.para2 { 
color: red; 
font-size: 20px; 
font-family: helvetica;
}
p.para3 { 
color: purple; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
background-color: #e5e4d7;
padding: 40px;
border-color: black;
border-width: 2px;
border-style: solid;
}
p.para4 { 
color: black; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
margin: 40px;
background-color: #e5e4d7;
padding: 40px;
border-color: black;
border-width: 2px;
border-style: solid;
}
.imagec {
display: block;
margin-left: auto;
margin-right: auto;
}

<!-- save as stylesheet.css -->
<!-- html : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body> 
<h1> software, user interface, user experience </h1> 
<p class="para1"> a tune of better world </p> 
<img class="imagec" src="logo.png" width="400" height="400">
<h2> virtual marketing </h2> 
<p class="para2"> success of this initiation </p> 
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 19c.css box  model-margin–border–padding-content -->
    

<!-- source (css+html) – -->
<!-- external css : -->

body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
background-color : #ffcf79;
}
h1,h2 {
text-decoration: none;
}
p.para1 { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.para2 { 
color: red; 
font-size: 20px; 
font-family: helvetica;
}
p.para3 { 
color: purple; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
background-color: #e5e4d7;
padding: 40px;
border-color: black;
border-width: 2px;
border-style: solid;
}
p.para4 { 
color: black; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
margin: 40px;
background-color: #e5e4d7;
padding: 40px;
border-color: black;
border-width: 2px;
border-style: solid;
}
.imagec {
display: block;
margin-left: auto;
margin-right: auto;
padding: 10px;
background-color: silver;
border-color: black;
border-width: 2px;
border-style: solid;
}

<!-- save as stylesheet.css -->

<!-- html : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body> 
<h1> software, user interface, user experience </h1> 
<p class="para1"> a tune of better world </p> 
<img class="imagec" src="logo.png" width="400" height="400">
<h2> virtual marketing </h2> 
<p class="para2"> success of this initiation </p> 
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 20.css box  model-margin–border–padding-content -->


<!-- source (css+html) –  -->
<!-- external css : -->

body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
background-color : #ffcf79;
}
h1,h2 {
text-decoration: none;
}
p.para1 { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.para2 { 
color: red; 
font-size: 20px; 
font-family: helvetica;
}
p.para3 { 
color: purple; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
background-color: #e5e4d7;
padding: 40px 40px 40px 160px;
border-color: black;
border-width: 2px;
border-style: solid;
}
p.para4 { 
color: black; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
margin: 40px;
background-color: #e5e4d7;
padding: 40px 40px 40px 200px;
border-color: black;
border-width: 2px;
border-style: solid;
}

<!-- save as stylesheet.css -->


<!-- html : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body> 
<h1> software, user interface, user experience </h1> 
<p class="para1"> a tune of better world </p> 
<h2> virtual marketing </h2> 
<p class="para2"> success of this <i> initiation </i></p> 
<p class="para3"> through quality service, we qualify ourselves in a competitive position.<br> so that you will select us for your better complacence.<br> in this era idea & proficiency, travelling faster & occupy own abode.
</p>
<p class="para4"> through quality service, we qualify ourselves in a competitive position.<br> so that you will select us for your better complacence.<br> in this era idea & proficiency, travelling faster & occupy own abode.
</p>  
<p style="color:white;font-size:25px;"> this is in line style</p>
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 21a.css background image property -->

 
<!-- source (css+html) –  -->
<!-- external css : -->

body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
}
h1,h2 {
text-decoration: none;
}
p.para1 { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.para2 { 
color: red; 
font-size: 20px; 
font-family: helvetica;
}
p.para3 { 
color: purple; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
background-color: #e5e4d7;
padding: 40px 40px 40px 160px;
border-color: black;
border-width: 2px;
border-style: solid;
}

p.para4 { 
color: black; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
margin: 40px;
padding: 40px 40px 40px 200px;
border-color: black;
border-width: 2px;
border-style: solid;
background-image: url(clouds.gif);
}

<!-- save as stylesheet.css -->


<!-- html : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body> 
<h1> software, user interface, user experience </h1> 
<p class="para1"> a tune of better world </p> 
<h2> virtual marketing </h2> 
<p class="para2"> success of this <i> initiation </i></p> 
<p class="para3"> through quality service, we qualify ourselves in a competitive position.<br> so that you will select us for your better complacence.<br> in this era idea & proficiency, travelling faster & occupy own abode.
</p>
<p class="para4"> through quality service, we qualify ourselves in a competitive position.<br> so that you will select us for your better complacence.<br> in this era idea & proficiency, travelling faster & occupy own abode.
</p>  
<p style="color:white;font-size:25px;"> this is in line style</p>
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 21b.css background image property  -->
 

<!-- source (css+html) –  -->
<!-- external css : -->

body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
background-image: url(clouds.gif);
}
h1,h2 {
text-decoration: none;
}
p.para1 { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.para2 { 
color: red; 
font-size: 20px; 
font-family: helvetica;
}
p.para3 { 
color: purple; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
background-color: #e5e4d7;
padding: 40px 40px 40px 160px;
border-color: black;
border-width: 2px;
border-style: solid;
}

p.para4 { 
color: black; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
margin: 40px;
padding: 40px 40px 40px 200px;
border-color: black;
border-width: 2px;
border-style: solid;
background-color: #e5e4d7;
}

<!-- save as stylesheet.css -->


<!-- html : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body> 
<h1> software, user interface, user experience </h1> 
<p class="para1"> a tune of better world </p> 
<h2> virtual marketing </h2> 
<p class="para2"> success of this <i> initiation </i></p> 
<p class="para3"> through quality service, we qualify ourselves in a competitive position.<br> so that you will select us for your better complacence.<br> in this era idea & proficiency, travelling faster & occupy own abode.
</p>
<p class="para4"> through quality service, we qualify ourselves in a competitive position.<br> so that you will select us for your better complacence.<br> in this era idea & proficiency, travelling faster & occupy own abode.
</p>  
<p style="color:white;font-size:25px;"> this is in line style</p>
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 22a.css the id attribute(paragraph common use) -->


<!-- source (css+html) –  -->
<!-- external css : -->

body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
}
h1,h2 {
text-decoration: none;
}
p.para1 { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.paragraph { 
color: purple; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
background-color: #e5e4d7;
padding: 40px 40px 40px 160px;
border-color: black;
border-width: 2px;
border-style: solid;
background-image: url(clouds.gif);
}
p.para4 { 
color: black; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
margin: 40px;
padding: 40px 40px 40px 200px;
border-color: black;
border-width: 2px;
border-style: solid;
background-color: #e5e4d7;
}

<!-- save as stylesheet.css -->

<!-- html : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body> 
<h1> software, user interface, user experience </h1> 
<p class="para1"> a tune of better world </p> 
<h2> virtual marketing </h2> 
<p class="paragraph"> success of this <i> initiation </i></p> 
<p class="paragraph"> through quality service, we qualify ourselves in a competitive position.<br> so that you will select us for your better complacence.<br> in this era idea & proficiency, travelling faster & occupy own abode.
</p>
<p class="para4"> through quality service, we qualify ourselves in a competitive position.<br> so that you will select us for your better complacence.<br> in this era idea & proficiency, travelling faster & occupy own abode.
</p>  
<p style="color:white;font-size:25px;"> this is in line style</p>
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 22b.css the id attribute (same as previous but page location with id) -->


<!-- source (css+html) –  -->
<!-- external css : -->

body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
}
h1,h2 {
text-decoration: none;
}
#para1homepage { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.paragraph { 
color: purple; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
background-color: #e5e4d7;
padding: 40px 40px 40px 160px;
border-color: black;
border-width: 2px;
border-style: solid;
background-image: url(clouds.gif);
}
#para4homepage { 
color: black; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
margin: 40px;
padding: 40px 40px 40px 200px;
border-color: black;
border-width: 2px;
border-style: solid;
background-color: #e5e4d7;
}

<!-- save as stylesheet.css -->


<!-- html : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body> 
<h1> software, user interface, user experience </h1> 
<p id="para1homepage"> a tune of better world </p> 
<h2> virtual marketing </h2> 
<p class="paragraph"> success of this <i> initiation </i></p> 
<p class="paragraph"> through quality service, we qualify ourselves in a competitive position.<br> so that you will select us for your better complacence.<br> in this era idea & proficiency, travelling faster & occupy own abode.
</p>
<p id="para4homepage"> through quality service, we qualify ourselves in a competitive position.<br> so that you will select us for your better complacence.<br> in this era idea & proficiency, travelling faster & occupy own abode.
</p>  
<p style="color:white;font-size:25px;"> this is in line style</p>
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 23a.css the text align property -->


<!-- source (css+html) –  -->
<!-- external css : -->

body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
background-color : #ffcf79;
}
h1,h2 {
text-decoration: none;
text-align: center;
}
p.para1 { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.para2 { 
color: red; 
font-size: 20px; 
font-family: helvetica;
}
.imagec {
display: block;
margin-left: auto;
margin-right: auto;
padding: 10px;
background-color: silver;
border-color: black;
border-width: 2px;
border-style: solid;
}

<!-- save as stylesheet.css -->

<!-- html : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body> 
<h1> software, user interface, user experience </h1> 
<p class="para1"> a tune of better world </p> 
<img class="imagec" src="logo.png" width="400" height="400">
<h2> virtual marketing </h2> 
<p class="para2"> success of this initiation </p> 
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 23b.css the text align property -->


<!-- source (css+html) –  -->
<!-- external css : -->

body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
background-color : #ffcf79;
}
h1,h2 {
text-decoration: none;
text-align: center;
}
p.para1 { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
text-align: center;
}
p.para2 { 
color: red; 
font-size: 20px; 
font-family: helvetica;
text-align: center;
}
.imagec {
display: block;
margin-left: auto;
margin-right: auto;
padding: 10px;
background-color: silver;
border-color: black;
border-width: 2px;
border-style: solid;
}

<!-- html : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body> 
<h1> software, user interface, user experience </h1> 
<p class="para1"> a tune of better world </p> 
<img class="imagec" src="logo.png" width="400" height="400">
<h2> virtual marketing </h2> 
<p class="para2"> success of this initiation </p> 
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 24a.css border property -->
 

<!-- source (css+html) –  -->
<!-- external css : -->

body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
}
h1,h2 {
text-decoration: none;
}
#para1homepage { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.paragraph { 
color: purple; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
background-color: #e5e4d7;
padding: 40px 40px 40px 160px;
border-color: black;
border-width: 2px;
border-style: solid;
background-image: url(clouds.gif);
}
#para4homepage { 
color: black; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
margin: 40px;
padding: 40px 40px 40px 200px;
border-color: #00FF00;
border-width: thick;
<! border-color or color code we can write by – name, RGB, Hex code>
<! border-width we can write by – px, thin, medium, thick>
border-style: solid;
background-color: #e5e4d7;
}

<!-- save as stylesheet.css -->


<!-- html : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body> 
<h1> software, user interface, user experience </h1> 
<p id="para1homepage"> a tune of better world </p> 
<h2> virtual marketing </h2> 
<p class="paragraph"> success of this <i> initiation </i></p> 
<p class="paragraph"> through quality service, we qualify ourselves in a competitive position.<br> so that you will select us for your better complacence.<br> in this era idea & proficiency, travelling faster & occupy own abode.
</p>
<p id="para4homepage"> through quality service, we qualify ourselves in a competitive position.<br> so that you will select us for your better complacence.<br> in this era idea & proficiency, travelling faster & occupy own abode.
</p>  
<p style="color:white;font-size:25px;"> this is in line style</p>
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 24b.css border property -->


output for dashed -
 
output for dotted –
 

output for double –
 

output for groove –
 

output for ridge –
 
output for inset –
 

output for outset –
 
source (css+html) – 

<!-- external css : -->

body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
}
h1,h2 {
text-decoration: none;
}
#para1homepage { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.paragraph { 
color: purple; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
background-color: #e5e4d7;
padding: 40px 40px 40px 160px;
border-color: black;
border-width: 2px;
border-style: solid;
background-image: url(clouds.gif);
}
#para4homepage { 
color: black; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
margin: 40px;
padding: 40px 40px 40px 200px;
border-color: #00FF00;
border-width: thick;
border-style: dashed;
<! Border-style we can write – dashed, dotted, double, groove, ridge, inset, outset>
background-color: #e5e4d7;
}

<!-- save as stylesheet.css -->


<!-- html : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body> 
<h1> software, user interface, user experience </h1> 
<p id="para1homepage"> a tune of better world </p> 
<h2> virtual marketing </h2> 
<p class="paragraph"> success of this <i> initiation </i></p> 
<p class="paragraph"> through quality service, we qualify ourselves in a competitive position.<br> so that you will select us for your better complacence.<br> in this era idea & proficiency, travelling faster & occupy own abode.
</p>
<p id="para4homepage"> through quality service, we qualify ourselves in a competitive position.<br> so that you will select us for your better complacence.<br> in this era idea & proficiency, travelling faster & occupy own abode.
</p>  
<p style="color:white;font-size:25px;"> this is in line style</p>
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 25a.css border property -->


<!-- source (css+html) –  -->
<!-- external css : -->

body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
}
h1,h2 {
text-decoration: none;
}
#para1homepage { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.paragraph { 
color: purple; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
background-color: #e5e4d7;
padding: 40px 40px 40px 160px;
border-color: black;
border-width: 2px;
border-style: solid;
background-image: url(clouds.gif);
border-radius: 20px;
}
#para4homepage { 
color: black; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
margin: 40px;
padding: 40px 40px 40px 200px;
border-color: #00FF00;
border-width: thick;
border-style: dashed;
background-color: #e5e4d7;
}

<!-- save as stylesheet.css -->


<!-- html : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body> 
<h1> software, user interface, user experience </h1> 
<p id="para1homepage"> a tune of better world </p> 
<h2> virtual marketing </h2> 
<p class="paragraph"> success of this <i> initiation </i></p> 
<p class="paragraph"> through quality service, we qualify ourselves in a competitive position.<br> so that you will select us for your better complacence.<br> in this era idea & proficiency, travelling faster & occupy own abode.
</p>
<p id="para4homepage"> through quality service, we qualify ourselves in a competitive position.<br> so that you will select us for your better complacence.<br> in this era idea & proficiency, travelling faster & occupy own abode.
</p>  
<p style="color:white;font-size:25px;"> this is in line style</p>
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 25b.css border property -->
 

<!-- source (css+html) –  -->
<!-- external css : -->

body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
}
h1,h2 {
text-decoration: none;
}
#para1homepage { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.paragraph { 
color: purple; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
background-color: #e5e4d7;
padding: 40px 40px 40px 160px;
border-color: black;
border-width: 2px;
border-style: solid;
background-image: url(clouds.gif);
border-bottom-left-radius: 40px;
border-bottom-right-radius: 60px;
border-top-left-radius: 60px;
border-top-right-radius: 40px;
}
#para4homepage { 
color: black; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
margin: 40px;
padding: 40px 40px 40px 200px;
border-color: #00FF00;
border-width: thick;
border-style: dashed;
background-color: #e5e4d7;
}

<!-- save as stylesheet.css -->


<!-- html : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body> 
<h1> software, user interface, user experience </h1> 
<p id="para1homepage"> a tune of better world </p> 
<h2> virtual marketing </h2> 
<p class="paragraph"> success of this <i> initiation </i></p> 
<p class="paragraph"> through quality service, we qualify ourselves in a competitive position.<br> so that you will select us for your better complacence.<br> in this era idea & proficiency, travelling faster & occupy own abode.
</p>
<p id="para4homepage"> through quality service, we qualify ourselves in a competitive position.<br> so that you will select us for your better complacence.<br> in this era idea & proficiency, travelling faster & occupy own abode.
</p>  
<p style="color:white;font-size:25px;"> this is in line style</p>
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 25c.css border property -->

 
<!-- source (css+html) –  -->
<!-- external css : -->

body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
}
h1,h2 {
text-decoration: none;
}
#para1homepage { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.paragraph { 
color: purple; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
background-color: #e5e4d7;
padding: 40px 40px 40px 160px;
border-color: black;
border-width: 2px;
border-style: solid;
background-image: url(clouds.gif);
border-bottom-style: dotted;
border-right-style: dashed;
border-left-style: dotted;
border-top-style: dotted;
}
#para4homepage { 
color: black; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
margin: 40px;
padding: 40px 40px 40px 200px;
border-color: #00FF00;
border-width: thick;
border-style: dashed;
background-color: #e5e4d7;
}

<!-- save as stylesheet.css -->


<!-- html : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body> 
<h1> software, user interface, user experience </h1> 
<p id="para1homepage"> a tune of better world </p> 
<h2> virtual marketing </h2> 
<p class="paragraph"> success of this <i> initiation </i></p> 
<p class="paragraph"> through quality service, we qualify ourselves in a competitive position.<br> so that you will select us for your better complacence.<br> in this era idea & proficiency, travelling faster & occupy own abode.
</p>
<p id="para4homepage"> through quality service, we qualify ourselves in a competitive position.<br> so that you will select us for your better complacence.<br> in this era idea & proficiency, travelling faster & occupy own abode.
</p>  
<p style="color:white;font-size:25px;"> this is in line style</p>
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 25d.css border property -->

 
<!-- source (css+html) –  -->
<!-- external css : -->

body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
}
h1,h2 {
text-decoration: none;
}
#para1homepage { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
}
p.paragraph { 
color: purple; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
background-color: #e5e4d7;
padding: 40px 40px 40px 160px;
border-color: black;
border-width: 2px;
border-style: solid;
background-image: url(clouds.gif);
border-bottom-color: blue;
border-right-color: red;
border-left-color: red;
border-top-color: blue;
}
#para4homepage { 
color: black; 
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
margin: 40px;
padding: 40px 40px 40px 200px;
border-color: #00FF00;
border-width: thick;
border-style: dashed;
background-color: #e5e4d7;
}

<!-- save as stylesheet.css -->


<!-- html : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body> 
<h1> software, user interface, user experience </h1> 
<p id="para1homepage"> a tune of better world </p> 
<h2> virtual marketing </h2> 
<p class="paragraph"> success of this <i> initiation </i></p> 
<p class="paragraph"> through quality service, we qualify ourselves in a competitive position.<br> so that you will select us for your better complacence.<br> in this era idea & proficiency, travelling faster & occupy own abode.
</p>
<p id="para4homepage"> through quality service, we qualify ourselves in a competitive position.<br> so that you will select us for your better complacence.<br> in this era idea & proficiency, travelling faster & occupy own abode.
</p>  
<p style="color:white;font-size:25px;"> this is in line style</p>
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css.  -->


<!-- 26a. css the div element (div class format only for html) -->


<!-- source (css+html) –  -->
<!-- external css : -->


body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
}
h1,h2 {
text-decoration: none;
text-align: center;
}
#para1homepage { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
text-align: center;
}
p.paragraph { 
color: purple; 
text-align: center;
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
background-color: #e5e4d7;
padding: 40px 40px 40px 160px;
border-color: black;
border-width: 2px;
border-style: solid;
background-image: url(clouds.gif);
border-bottom-color: blue;
border-right-color: blue;
border-left-color: blue;
border-top-color: blue;
}
img.image {
display: block;
text-align-center;
margin-left: auto;
margin-right: auto;
padding: 3px
background-color: silver;
border-color: black;
border-width: 2px;
border-style: solid;
}

<!-- save as stylesheet.css -->

<!-- html : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body>
<div> 
<h1> software, user interface, user experience </h1> 
<p id="para1homepage"> a tune of better world </p>
<div> 
<a> <img class="image" src="logo.png" width="200" height="200"></a>
</div>
</div>
<div> 
<h2> virtual marketing </h2> 
<p class="paragraph"> through quality service, we qualify ourselves in a competitive position.so that you will select us for your better complacence. in this era idea & proficiency, travelling faster & occupy own abode.
</p>
<p class="paragraph"> through quality service, we qualify ourselves in a competitive position.so that you will select us for your better complacence. in this era idea & proficiency, travelling faster & occupy own abode.
</p>
</div>  
</body> 
</html>

<!-- this coding same as previous just div class adding -->
<!-- save as index.html in a same folder with css. -->


<!-- 26b. css the div element (div class id) -->


<!-- source (css+html) –  -->
<!-- external css : -->


body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
}
h1,h2 {
text-decoration: none;
text-align: center;
}
#para1homepage { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
text-align: center;
}
p.paragraph { 
color: purple; 
text-align: center;
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
background-color: #e5e4d7;
padding: 40px 40px 40px 160px;
border-color: black;
border-width: 2px;
border-style: solid;
background-image: url(clouds.gif);
border-bottom-color: blue;
border-right-color: blue;
border-left-color: blue;
border-top-color: blue;
}
img.image {
display: block;
text-align-center;
margin-left: auto;
margin-right: auto;
padding: 3px
background-color: silver;
border-color: black;
border-width: 2px;
border-style: solid;
}
#divmain {
color: red;
}
#divvirtual {
color: red;
}

<!-- save as stylesheet.css -->
<!-- html : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body>
<div> 
<div id="divmain">
<h1> software, user interface, user experience </h1> 
<p id="para1homepage"> a tune of better world </p>
<div> 
<a> <img class="image" src="logo.png" width="200" height="200"></a>
</div>
</div>
<div> 
<div id="divvirtual">
<h2> virtual marketing </h2> 
<p class="paragraph"> through quality service, we qualify ourselves in a competitive position.so that you will select us for your better complacence. in this era idea & proficiency, travelling faster & occupy own abode.
</p>
<p class="paragraph"> through quality service, we qualify ourselves in a competitive position.so that you will select us for your better complacence. in this era idea & proficiency, travelling faster & occupy own abode.
</p>
</div>  
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 27a. css the span element  highlight (html,css both) -->
<!-- (div is section and span is only in line)  -->
 

<!-- source (css+html) –  -->
<!-- external css : -->

body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
}
h1,h2 {
text-decoration: none;
text-align: center;
}
#para1homepage { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
text-align: center;
}
p.paragraph { 
color: purple; 
text-align: center;
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
background-color: #e5e4d7;
padding: 40px 40px 40px 160px;
border-color: black;
border-width: 2px;
border-style: solid;
background-image: url(clouds.gif);
border-bottom-color: blue;
border-right-color: blue;
border-left-color: blue;
border-top-color: blue;
}
img.image {
display: block;
text-align-center;
margin-left: auto;
margin-right: auto;
padding: 3px
background-color: silver;
border-color: black;
border-width: 2px;
border-style: solid;
}
#divmain {
color: red;
}
#divvirtual {
color: red;
}
.highlight {
background-color: orange;
}

<!-- save as stylesheet.css -->


<!-- html : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body>
<div> 
<div id="divmain">
<h1> software, user interface, user experience </h1> 
<p id="para1homepage"> a tune of better world </p>
<div> 
<a> <img class="image" src="logo.png" width="200" height="200"></a>
</div>
</div>
<div> 
<div id="divvirtual">
<h2> virtual marketing </h2> 
<p class="paragraph"> through quality service, we qualify ourselves in a competitive position.so that you will select us for your better complacence. in this era idea & proficiency,<span class="highlight"> travelling faster & occupy own abode. </span>
</p>
<p class="paragraph"> through quality service, we qualify ourselves in a competitive position.so that you will select us for your better complacence. in this era idea & proficiency, travelling faster & occupy own abode.
</p>
</div>  
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 27b. css the span element  highlight (html,css both) -->
<!-- (div is section and span is only in line)  -->

 
<!-- source (css+html) –  -->
<!-- external css : -->

body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
}
h1,h2 {
text-decoration: none;
text-align: center;
}
#para1homepage { 
color: blue; 
font-size: 25px; 
font-family: helvetica;
text-align: center;
}
p.paragraph { 
color: purple; 
text-align: center;
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
background-color: #e5e4d7;
padding: 40px 40px 40px 160px;
border-color: black;
border-width: 2px;
border-style: solid;
background-image: url(clouds.gif);
border-bottom-color: blue;
border-right-color: blue;
border-left-color: blue;
border-top-color: blue;
}
img.image {
display: block;
text-align-center;
margin-left: auto;
margin-right: auto;
padding: 3px
background-color: silver;
border-color: black;
border-width: 2px;
border-style: solid;
}
#divmain {
color: red;
}
#divvirtual {
color: red;
}
.highlight {
background-color: orange;
}

<!-- save as stylesheet.css -->


<!-- html : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body>
<div> 
<div id="divmain">
<h1> software, user interface, user experience </h1> 
<p id="para1homepage"> a tune of better world </p>
<div> 
<a> <img class="image" src="logo.png" width="200" height="200"></a>
</div>
</div>
<div> 
<div id="divvirtual">
<h2> virtual marketing </h2> 
<p class="paragraph"> through quality service, we qualify ourselves in a competitive position.so that you will select us for your better complacence. in this era idea & proficiency,<span class="highlight"> travelling faster & occupy own abode. </span>
</p>
<p class="paragraph"> through quality service, we qualify ourselves in a competitive position.so that you will select us for your better complacence. in this era idea & proficiency,<span style="color: red"> travelling faster & occupy own abode.</span>
</p>
</div>  
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 28a. add content page and reuse some of our css classes -->
<!-- ( linkup a new page with div id) -->
 

<!-- source (css+html) –  -->
<!-- external css : -->

body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
}
h1 {
color: none; 
text-decoration: none;
font-size: 150%; 
text-align: center;
}
h2 {
color: none; 
text-decoration: none;
font-size: 1.5em; 
text-align: center;
}
h3 {
color: green; 
text-decoration: none;
font-size: 150%; 
}
#para1homepage {
color: blue;  
font-size: 25px; 
font-family: helvetica;
text-align: center;
}
img.image {
display: block;
text-align-center;
margin-left: auto;
margin-right: auto;
padding: 3px
background-color: silver;
border-color: black;
border-width: 2px;
border-style: solid;
}
p.paragraph { 
color: black; 
text-align: center;
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
background-color: #e5e4d7;
padding: 40px 40px 40px 160px;
border-color: black;
border-width: 2px;
border-style: solid;
background-image: url(clouds.gif);
border-color: blue;
}
.highlight {
background-color: orange;
}
#divmain {
color: green;
}
#divvirtual {
color: green;
}

<!-- save as stylesheet.css -->


<!-- html index : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body>
<div> 
<div id="divmain">
<h1> software, user interface, user experience </h1> 
<p id="para1homepage"> a tune of better world </p>
<div> 
<a> <img class="image" src="logo.png" width="200" height="200"></a>
</div>
</div>
<div> 
<div id="virtual">
<h2> virtual marketing </h2> 
<p class="paragraph"> through quality service, we qualify ourselves in a competitive position.so that you will select us for your better complacence. in this era idea & proficiency,<span class="highlight"> travelling faster & occupy own abode. </span>
</p>
</div>
<h3> more about </h3> 
<a href="about.html"> about (click here) </a>    
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- html about : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body>
<div> 
<div id="virtual">
<h2> virtual marketing </h2> 
<p class="paragraph"> through quality service, we qualify ourselves in a competitive position.so that you will select us for your better complacence. in this era idea & proficiency,<span style="color: red"> travelling faster & occupy own abode.</span>
</p>
</div>  
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->


<!-- 28b. add content page and reuse some of our css classes -->
<!-- ( linkup a new page with div class content output same as like previous slide) -->
 

<!-- source (css+html) –  -->
<!-- external css : -->

body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
}
h1 {
color: none; 
text-decoration: none;
font-size: 150%; 
text-align: center;
}
h2 {
color: none; 
text-decoration: none;
font-size: 1.5em; 
text-align: center;
}
h3 {
color: green; 
text-decoration: none;
font-size: 150%; 
}
#para1homepage {
color: blue;  
font-size: 25px; 
font-family: helvetica;
text-align: center;
}
img.image {
display: block;
text-align-center;
margin-left: auto;
margin-right: auto;
padding: 3px
background-color: silver;
border-color: black;
border-width: 2px;
border-style: solid;
}
p.paragraph { 
color: black; 
text-align: center;
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
background-color: #e5e4d7;
padding: 40px 40px 40px 160px;
border-color: black;
border-width: 2px;
border-style: solid;
background-image: url(clouds.gif);
border-color: blue;
}
.highlight {
background-color: orange;
}
#divmain {
color: green;
}
#divvirtual {
color: green;
}
.divcontent {
color: red;
}

<!-- save as stylesheet.css -->


<!-- html index : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body>
<div> 
<div id="divmain">
<h1> software, user interface, user experience </h1> 
<p id="para1homepage"> a tune of better world </p>
<div> 
<a> <img class="image" src="logo.png" width="200" height="200"></a>
</div>
</div>
<div> 
<div id="virtual">
<h2> virtual marketing </h2> 
<p class="paragraph"> through quality service, we qualify ourselves in a competitive position.so that you will select us for your better complacence. in this era idea & proficiency,<span class="highlight"> travelling faster & occupy own abode. </span>
</p>
</div>
<h3> more about </h3> 
<a href="about.html"> about (click here) </a>    
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->

<!-- html about : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body>
<div> 
<div class="divcontent">
<h2> virtual marketing </h2> 
<p class="paragraph"> through quality service, we qualify ourselves in a competitive position.so that you will select us for your better complacence. in this era idea & proficiency,<span style="color: red"> travelling faster & occupy own abode.</span>
</p>
</div>  
</body> 
</html>

<!-- save as about.html  -->
<!-- in a same folder with css. -->


<!-- 29. css special effects of links  -->
 
<!-- <! first link color is green then hover or maus catcher is orange and visited color is blue but first link color is not showing in this coding. it will solve in next> -->


<!-- source (css+html) –  -->
<!-- external css : -->

body {
color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: bolder;
}
h1 {
color: none; 
text-decoration: none;
font-size: 150%; 
text-align: center;
}
h2 {
color: none; 
text-decoration: none;
font-size: 1.5em; 
text-align: center;
}
h3 {
color: green; 
text-decoration: none;
font-size: 150%; 
}
#para1homepage {
color: blue;  
font-size: 25px; 
font-family: helvetica;
text-align: center;
}
img.image {
display: block;
text-align-center;
margin-left: auto;
margin-right: auto;
padding: 3px
background-color: silver;
border-color: black;
border-width: 2px;
border-style: solid;
}
p.paragraph { 
color: black; 
text-align: center;
font-size: 25px; 
font-family: helvetica;
font-style : oblique;
line-height: 1.5em;
background-color: #e5e4d7;
padding: 40px 40px 40px 160px;
border-color: black;
border-width: 2px;
border-style: solid;
background-image: url(clouds.gif);
border-color: blue;
}
.highlight {
background-color: orange;
}
#divmain {
color: green;
}
#divvirtual {
color: green;
}
.divcontent {
color: red;
}
a:link {
color: green;
}
a:visited {
color: blue;
}
a:hover {
color: orange;
}

<!-- save as stylesheet.css -->

<!-- html index : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body>
<div> 
<div id="divmain">
<h1> software, user interface, user experience </h1> 
<p id="para1homepage"> a tune of better world </p>
<div> 
<a> <img class="image" src="logo.png" width="200" height="200"></a>
</div>
</div>
<div> 
<div id="virtual">
<h2> virtual marketing </h2> 
<p class="paragraph"> through quality service, we qualify ourselves in a competitive position.so that you will select us for your better complacence. in this era idea & proficiency,<span class="highlight"> travelling faster & occupy own abode. </span>
</p>
</div>
<h3> more about </h3> 
<a href="about.html"> about (click here) </a>    
</body> 
</html>

<!-- save as index.html  -->
<!-- in a same folder with css. -->

<!-- html about : -->

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
<title> idol wave </title> 
</head> 
<body>
<div> 
<div class="divcontent">
<h2> virtual marketing </h2> 
<p class="paragraph"> through quality service, we qualify ourselves in a competitive position.so that you will select us for your better complacence. in this era idea & proficiency,<span style="color: red"> travelling faster & occupy own abode.</span>
</p>
</div>  
</body> 
</html>

<!-- save as about.html  -->
<!-- in a same folder with css. -->


<!-- html5 -->
<!-- to -->
<!-- vanilla-css3 -->
<!-- and -->
<!-- javascrift -->