Hi I am writing this post particularly for one of my friend who is very much keen to learn web programming. So here it goes. You will leran and be able to differentiate the power of CSS.
Lets write code which have no CSS.
Steps to be takes-
1. Open any editor viz notepad++, bracket or sublime.
2. Write the following code and save it [yourpagenam.html].
<html>
<head>
<title>
HTML Page without CSS
</title>
</head>
<body>
<h3>An HTML Page without CSS</h3>
<p>
This is a sample HTML Page with no extra design and look. It has palin text and look which is supported and provided by HTML.
This is a sample HTML Page with no extra design and look. It has palin text and look which is supported and provided by HTML.
This is a sample HTML Page with no extra design and look. It has palin text and look which is supported and provided by HTML.
This is a sample HTML Page with no extra design and look. It has palin text and look which is supported and provided by HTML.
This is a sample HTML Page with no extra design and look. It has palin text and look which is supported and provided by HTML.
This is a sample HTML Page with no extra design and look. It has palin text and look which is supported and provided by HTML.
This is a sample HTML Page with no extra design and look. It has palin text and look which is supported and provided by HTML.
This is a sample HTML Page with no extra design and look. It has palin text and look which is supported and provided by HTML.
This is a sample HTML Page with no extra design and look. It has palin text and look which is supported and provided by HTML.
This is a sample HTML Page with no extra design and look. It has palin text and look which is supported and provided by HTML.
This is a sample HTML Page with no extra design and look. It has palin text and look which is supported and provided by HTML.
This is a sample HTML Page with no extra design and look. It has palin text and look which is supported and provided by HTML.
This is a sample HTML Page with no extra design and look. It has palin text and look which is supported and provided by HTML.
This is a sample HTML Page with no extra design and look. It has palin text and look which is supported and provided by HTML.
</p>
</body>
</html>
Now lets write sample code which have a drop down and styled with CSS to have good looking.
open another file and write below code-
<html>
<head>
<title>
HTML Page with CSS
</title>
<style>
h3 {
display: block;
text-align: center;
font-size: 3em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
span {
display:block;
}
/* this is a comment for menu CSS*/
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h3>An HTML Page with CSS</h3>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<p>
<span>This is a sample HTML Page with extra design and look. It has palin text along with CSS Applied in Heading tag and other HTML elements.<span>
<span>This is a sample HTML Page with extra design and look. It has palin text along with CSS Applied in Heading tag and other HTML elements.<span>
<span>This is a sample HTML Page with extra design and look. It has palin text along with CSS Applied in Heading tag and other HTML elements.<span>
<span>This is a sample HTML Page with extra design and look. It has palin text along with CSS Applied in Heading tag and other HTML elements.<span>
<span>This is a sample HTML Page with extra design and look. It has palin text along with CSS Applied in Heading tag and other HTML elements.<span>
<span>This is a sample HTML Page with extra design and look. It has palin text along with CSS Applied in Heading tag and other HTML elements.<span>
<span>This is a sample HTML Page with extra design and look. It has palin text along with CSS Applied in Heading tag and other HTML elements.<span>
<span>This is a sample HTML Page with extra design and look. It has palin text along with CSS Applied in Heading tag and other HTML elements.<span>
<span>This is a sample HTML Page with extra design and look. It has palin text along with CSS Applied in Heading tag and other HTML elements.<span>
<span>This is a sample HTML Page with extra design and look. It has palin text along with CSS Applied in Heading tag and other HTML elements.<span>
<span>This is a sample HTML Page with extra design and look. It has palin text along with CSS Applied in Heading tag and other HTML elements.<span>
<span>This is a sample HTML Page with extra design and look. It has palin text along with CSS Applied in Heading tag and other HTML elements.<span>
<span>This is a sample HTML Page with extra design and look. It has palin text along with CSS Applied in Heading tag and other HTML elements.<span>
<span>This is a sample HTML Page with extra design and look. It has palin text along with CSS Applied in Heading tag and other HTML elements.<span>
</p>
</body>
</html>
To Get Sample code Click here.
Lets write code which have no CSS.
Steps to be takes-
1. Open any editor viz notepad++, bracket or sublime.
2. Write the following code and save it [yourpagenam.html].
<html>
<head>
<title>
HTML Page without CSS
</title>
</head>
<body>
<h3>An HTML Page without CSS</h3>
<p>
This is a sample HTML Page with no extra design and look. It has palin text and look which is supported and provided by HTML.
This is a sample HTML Page with no extra design and look. It has palin text and look which is supported and provided by HTML.
This is a sample HTML Page with no extra design and look. It has palin text and look which is supported and provided by HTML.
This is a sample HTML Page with no extra design and look. It has palin text and look which is supported and provided by HTML.
This is a sample HTML Page with no extra design and look. It has palin text and look which is supported and provided by HTML.
This is a sample HTML Page with no extra design and look. It has palin text and look which is supported and provided by HTML.
This is a sample HTML Page with no extra design and look. It has palin text and look which is supported and provided by HTML.
This is a sample HTML Page with no extra design and look. It has palin text and look which is supported and provided by HTML.
This is a sample HTML Page with no extra design and look. It has palin text and look which is supported and provided by HTML.
This is a sample HTML Page with no extra design and look. It has palin text and look which is supported and provided by HTML.
This is a sample HTML Page with no extra design and look. It has palin text and look which is supported and provided by HTML.
This is a sample HTML Page with no extra design and look. It has palin text and look which is supported and provided by HTML.
This is a sample HTML Page with no extra design and look. It has palin text and look which is supported and provided by HTML.
This is a sample HTML Page with no extra design and look. It has palin text and look which is supported and provided by HTML.
</p>
</body>
</html>
Now lets write sample code which have a drop down and styled with CSS to have good looking.
open another file and write below code-
<html>
<head>
<title>
HTML Page with CSS
</title>
<style>
h3 {
display: block;
text-align: center;
font-size: 3em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
span {
display:block;
}
/* this is a comment for menu CSS*/
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h3>An HTML Page with CSS</h3>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<p>
<span>This is a sample HTML Page with extra design and look. It has palin text along with CSS Applied in Heading tag and other HTML elements.<span>
<span>This is a sample HTML Page with extra design and look. It has palin text along with CSS Applied in Heading tag and other HTML elements.<span>
<span>This is a sample HTML Page with extra design and look. It has palin text along with CSS Applied in Heading tag and other HTML elements.<span>
<span>This is a sample HTML Page with extra design and look. It has palin text along with CSS Applied in Heading tag and other HTML elements.<span>
<span>This is a sample HTML Page with extra design and look. It has palin text along with CSS Applied in Heading tag and other HTML elements.<span>
<span>This is a sample HTML Page with extra design and look. It has palin text along with CSS Applied in Heading tag and other HTML elements.<span>
<span>This is a sample HTML Page with extra design and look. It has palin text along with CSS Applied in Heading tag and other HTML elements.<span>
<span>This is a sample HTML Page with extra design and look. It has palin text along with CSS Applied in Heading tag and other HTML elements.<span>
<span>This is a sample HTML Page with extra design and look. It has palin text along with CSS Applied in Heading tag and other HTML elements.<span>
<span>This is a sample HTML Page with extra design and look. It has palin text along with CSS Applied in Heading tag and other HTML elements.<span>
<span>This is a sample HTML Page with extra design and look. It has palin text along with CSS Applied in Heading tag and other HTML elements.<span>
<span>This is a sample HTML Page with extra design and look. It has palin text along with CSS Applied in Heading tag and other HTML elements.<span>
<span>This is a sample HTML Page with extra design and look. It has palin text along with CSS Applied in Heading tag and other HTML elements.<span>
<span>This is a sample HTML Page with extra design and look. It has palin text along with CSS Applied in Heading tag and other HTML elements.<span>
</p>
</body>
</html>
To Get Sample code Click here.
No comments:
Post a Comment