Homework SourseCss or source code for a awoko newspaper html website which
Css or source code for a awoko newspaper html website which provides business and finance, editorial, entertainment.,features and sport and logo of an eagle on top of the paper.
Solution
CSS is an acronym for Cascading Style Sheets and this file is created in a text editor such as Notepad. CSS allows to define styles and page layout in one location so that we can globally apply them to our .htm files. The style once changed in CSS file, it automatically updates all of .htm files. This can save a lot of time and energy down the line.
Below is the sample code which can be modified in any sense depending upon your actual requirements:
<!DOCTYPE html>
<html>
<head>
<!-- Write your webpage information -->
<title>Website Name</title>
<meta name=\"author\" content=\"your name\" />
<meta name=\"description\" content=\"\" />
<!-- It is preferred to add your stylesheet (css) in the head tag so that it loads before the page html is being displayed -->
<link rel=\"stylesheet\" href=\"style.css\" type=\"text/css\" />
</head>
<body>
<!-- webpage content comes in the body -->
<div id=\"page\">
<div id=\"logo\">
<h1><a href=\"/\" id=\"logoLink\">My Website</a></h1>
</div>
<div id=\"nav\">
<ul>
<li><a href=\"#/home.html\">Home</a></li>
<li><a href=\"#/about.html\">About</a></li>
<li><a href=\"#/contact.html\">Contact</a></li>
</ul>
</div>
<div id=\"content\">
<h2>Home</h2>
<p>
First webpage created
</p>
<p>
It will contain business and finance, editorial, entertainment,features and sport
</p>
</div>
<div id=\"footer\">
<p>
Webpage created by <a href=\"/\" target=\"_blank\">[your name]</a>
</p>
</div>
</div>
</body>
CSS code :
p{ line-height: 3em; }
h1, h2, h3, h4{
color: orange;
font-weight: normal;
line-height: 1.5em;
margin: 0 0 .7em 0;
}
h1{ font-size: 2.0em; }
h2{ font-size: 1.7em; }
a{
color: blue;
text-decoration: none;
}
a:hover,
a:active{ text-decoration: underline; }
body{
font-family: arial; font-size: 70%; line-height: 1.5em; width: 100%; margin: 0; background: #eee;
}
#page{ margin: 10px; }
#logo{
width: 35%; margin-top: 2px; font-family: verdana; display: inline-block;
}
#nav{
width: 50%;
display: inline-block;
text-align: right;
float: right;
}
#nav ul{}
#nav ul li{
display: inline-block;
height: 80px;
}
#nav ul li a{
padding: 10px;
background: white;
color: pink;
}
#nav ul li a:hover{
background-color: #ffb424;
box-shadow: 0px 1px 1px #666;
}
#nav ul li a:active{ background-color: #ff8f00; }
#content{
margin: 20px 0;
background: white;
padding: 20px;
clear: both;
}
#footer{
border-bottom: 1px #ccc solid;
margin-bottom: 20px;
}
#footer p{
text-align: right;
text-transform: lowercase;
font-size: 80%;
color: grey;
}
#content,
ul li a{ box-shadow: 0px 2px 2px #999; }
