There are similar questions in StackOverflow on this topic but none of them bring answer to my question:
#header{
border-bottom: 3px solid #87B825;
background: #84E637 url("backg400.gif") repeat-x top left; **<!-- This background is not showing up -->**
}
All of the files being in the same directory, there should not be any file path issue.
Here below the html and associated CSS sources adopted from Dan Cederholm in Chapter 9 of his book "Bulletproof Web Design", 2nd Edition.
Thank you in advance for your help.
1) HTML source
<!doctype html>
<html>
<head>
<meta charset="iso-8859-1">
<title>My Site</title>
<link href="mysite.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">
<h1> My Site</h1>
this is header
</div> <!--end #header -->
<p id="message">
<strong>This is my site</strong>
</p>
<div id="wrap">
<div id="content">
<div class="gutter">
... content goes here
</div> <!--end .gutter -->
</div> <!--end #content -->
<div id="sidebar">
<div class="gutter">
<p>... sidebar goes here </p>
</div> <!--end .gutter -->
</div> <!--end #sidebar -->
<div id="footer">
<p> Copyright © 2015 My Site. All rights reserved</p>
</div>
</div> <!--end #wrap -->
</body>
</html>
CSS source (mysite.css):
#charset "iso-8859-1";
body {
margin: 0;
padding: 0;
font-familly: Verdana, sans-serif;
font-size: small;
background: #fff;
}
<!-- Layout structure -->
#header{
border-bottom: 3px solid #87B825;
background: #84E637 url("backg400.gif") repeat-x top left; <!-- This one is not showing up -->
}
#header h1{
margin: 0;
padding: 25px;
font-family: Georgia, serif;
font-size: 150%;
color: #374C0E;
background: url("backg400.gif") no-repeat top left; <!-- This one is not showing up -->
}
#wrap{
background: url("backg400.gif") repeat-y 80% 0; <!-- This one is showing up -->
}
#content{
float: left;
width: 80%;
font-size: 95%;
line-height: 1.5em
color: #333;
}
#sidebar{
float: right;
width: 20%;
}
#footer{
clear: both;
background: #828377;
}
You are using HTML comments (<!-- comment content -->) on your stylesheet. Remove all these HTML comments from your stylesheet and use the following comment syntax instead:
/** comment content */
Note: There is a typo on the body rule: font-family instead of font-familly.
Additionally try checking your CSS syntax using W3C validation service: http://www.css-validator.org/#validate_by_input
Related
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 12 months ago.
I can't seem to get rid of the slight margin/padding that is on my entire site (currently working on a codecademy assignment).
I've looked through the entire document for any margins that I made have acccidentally added or padding settings, but I can't seem to find it anywhere. What is causing the white space on the sides of the website?
Here is the CSS and HTML for my website:
/* Universal Styles */
html {
font-family: "Roboto", sans-serif;
font-size: 16px;
}
body {
border-style: border-box;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
color: #4A4A4A;
}
.content {
padding: 0;
margin: 0;
}
header .content {
display: flex;
margin: 0 0;
justify-content: space-between;
align-items: center;
height: 85px;
}
.desktop {
}
.desktop ul {
display: flex;
}
.desktop li a {
margin: auto 25px;
display: flex;
align-items: center;
}
.desktop img {
height: 20px;
width: 20px;
}
.mobile {
display: none;
}
#sign-up-section {
background-image: url("banner-landingpage.jpg");
color: white;
}
#sign-up-section .content.center {
background-color: #9DC20A;
margin-top: 170px;
margin-bottom: 170px;
margin-left: 100px;
}
#sign-up-section .cursive {
font-family: Damion, curisve;
font-weight: 50;
font-size: 3em;
}
#sign-up-section .striking {
color: white;
font-size: 50px;
font-family: 'Rubik-Regular', sans-serif;
line-height: 1.4;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Damion" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,600,700" rel="stylesheet">
<link rel="stylesheet" href="./resources/css/style.css">
<meta charset="UTF-8">
</head>
<body>
<!-- Header -->
<header>
<div class="content">
Fotomatic
<nav class="desktop">
<ul>
<li>Product detail</li>
<li>About us</li>
<li>Follow us <img class="icon" src="./resources/images/instagram.png"></li>
</ul>
</nav>
<nav class="mobile">
<ul>
<li><img src="./resources/images/ic-logo.svg"></li>
<li><img src="./resources/images/ic-product-detail.svg"></li>
<li><img src="./resources/images/ic-about-us.svg"></li>
<li>Join us</li>
</ul>
</nav>
</div>
</header>
<!-- Main Content -->
<div class="main-content">
<!-- Sign Up Section -->
<div id="sign-up-section" class="banner">
<div id="sign-up-cta">
<div class="content center">
<div class="header">
<h2 class="cursive">Instant</h2>
<h1 class="striking">FORMAT CAMERA</h1>
</div>
<div class="email">
<span>
Email us to request a demo and be in our waiting list for the <strong>Febuary 2017</strong> release!
</span>
<div class="button">Join the waiting list</div>
</div>
</div>
</div>
</div>
<!-- Features Section -->
<div id="features-section">
<div class="feature">
<div class="center">
<div class="image-container">
<img src="./resources/images/feature-1.png" />
</div>
<div class="./resources/content">
<h2>Advanced, automatic, instant</h2>
<h3>Shutter speed, apperture and flash output adjust automatically</h3>
</div>
</div>
</div>
<div class="feature">
<div class="center">
<div class="image-container">
<img src="./resources/images/feature-2.png" />
</div>
<div class="content">
<h2>Beautifully crafted inside-out</h2>
<h3>From the paint outside to the tiny screw inside, Fotomatic is crafted with love and 20-year of expertise</h3>
</div>
</div>
</div>
</div>
<!-- Filters Section -->
<div id="filters-section">
<div class="content center">
<h2>Over 20+ filters to choose from</h2>
<h3>Feed your creativity with 20 different filter designed by our eclectic in-house photographers!</h3>
</div>
<div class="images-container">
<div class="image-container">
<img src="./resources/images/filter-1.png" />
</div>
<div class="image-container">
<img src="./resources/images/filter-2.png" />
</div>
<div class="image-container">
<img src="./resources/images/filter-3.png" />
</div>
<div class="image-container extra">
<img src="./resources/images/filter-4.png" />
</div>
</div>
</div>
<!-- Quotes Section
<div id="quotes-section">
<div class="content center">
<span class="quote">“It’s truly something that could create a brand new photography Renaissance”</span>
<img class="quote-citation" src="./resources/images/photography-logo.png" />
</div>
</div>
<!-- Footer -->
<footer>
<div class="content">
<span class="copyright">© 2016 Fotomatic, All Rights Reserved</span>
<span class="location">Designed in NYC</span>
</div>
</footer>
</div>
</body>
</html>
Please add following code in css style, may help you:
* {
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
}
By default browsers add styles on some HTML elements, for example on the body. To avoid headaches, and control everything, you would wanna reset them. Also you would wanna set box-sizing: border-box; on all your items, it makes styling much easier.
/* add those lines at the top of your css file: */
*,::after,::before{
margin:0;
padding:0;
box-sizing:border-box;
}
you should all this at the start of ur css code
*,
*::before,
*::after{
box-sizing: border-box;
margin: 0;
padding: 0;
scroll-behavior: smooth; // this is optional but I prefer it for better user experience
}
You can go around this by hard coding the margin and padding settings for the whole body:
body {
display: block;
box-sizing: border-box;
margin: 0;
padding: 0;
}
This is good practice for all CSS style sheets to add at the start.
In your original body class, you set an invalid attribute:
border-style: border-box;
i have a problem where my footer element is not at the bottom of the page while i browse the page over mobile this my html
<!DOCTYPE html>
<html>
<head>
<title>Ziad Alian</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h4>Ziad Alian</h4>
<img class="imgz" src="zCmakv5P_400x400.jpg"/></img>
<ul>
<li>ABOUT ME</li>
<li>PROJECTS</li>
<li>CONTACT</li>
</ul>
<hr>
<div>
<p id="hello">Hello World! </p>
<p id="aboutme">I'm Ziad Alian a 26 years old Software Developer. Born in the 331 BC ancient city of Alexandria, Egypt.<br/>
I studied Geomatics but I don't like it cause computer science is my passion.<br/>
I'm a self taught web developer, My goal is to be a fucll stack developer using
HTML5, CSS, JavaScript, React, Python and Django.<br/>
I love programming and everything that has to do with technology, the internet and writing code.
</p>
</div>
<hr>
<div id="contact">
<ul>
<li>GitHub </li>
<li>LinkedIn </li>
<li>Twitter </li>
<li>Instagram </li>
</ul>
</div>
<br>
<footer>© 2020 Ziad Alian</footer>
</body>
</html>
And this is my CSS
this where my footer element been added
footer {
background-color: black;
color: white;
padding: 0.5em;
}
Edit
i added this code
body {
background-color:whitesmoke;
min-height: 100%;
display: flex;
flex-direction: column;
}
h4 {
text-align: center;
font-size: 68px;
font-weight: 80;
color: teal;
}
.imgz {
width: 200px;
border-radius: 50%;
}
#hello {
text-align: center;
font-size: 30px;
color: teal;
}
#aboutme {
font-size: medium;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
p {
text-align: justify;
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color:white;
padding: 0.5em;
margin: 0;
margin-top: auto;
}
and it's now fixed like it's just go down and up with me while i scroll the page i just want it to stay at the bottom
mywebsite
You have not integrated some properties into the CSS-file.
You have not integrated the block of the element footer into the HTML-file.
New footer properties
footer {
background-color: black;
color: white;
padding: 0.5em;
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
}
Old footer properties
footer {
background-color: black;
color: white;
padding: 0.5em;
}
New footer
<footer> © 2020 Ziad Alian</footer>
These properties fix the object for the view of the user visiting the website, which means that the object is dynamic for the view of the user.
You could also try giving the main section a min-height: 100vh so to push the footer down. See if that helps.
Try using position: fixed to keep your footer pinned to the bottom of the viewport.
When using fixed positioning, you'll also want to be sure you set the left: 0 and width: 100% properties to make the footer the same width as the viewport.
footer {
background-color: black;
color: white;
padding: 0.5em;
position:fixed;
bottom:0;
left:0;
width:100%
}
<footer>© 2020 Ziad Alian</footer>
I have developed a website for you with the same structure as your old website, but with only minor changes.
The source code now has a better structure.
Comments have been added to avoid losing track of the source code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB"><head>
<title>2020 Ziad Alian</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<!-- Header start -->
<h1>
<center>2020 Ziad Alian</center>
</h1>
<!-- Header end -->
</div>
<div id="body">
<!-- Body start -->
<center>
<img class="imgz" src="zCmakv5P_400x400.jpg"></img>
<p>
<a href="https://LinkToTheWebsite.com">
<li> ABOUT ME</li></a></p>
<p>
<a href="https://LinkToTheWebsite.com">
<li>PROJECTS</li></a></p>
<p>
<a href="https://LinkToTheWebsite.com">
<li>CONTACT</li></a></p>
</center>
<hr>
<p>
<center style="font-size: 30px"> HELLO WORLD</style></center>
</p>
<center>
<p><strong>I'm Ziad Alian a 26 years old Software Developer. Born in the 331 BC ancient city of Alexandria, Egypt.<br><br>
I studied Geomatics but I don't like it cause computer science is my passion.<br><br>
I'm a self taught web developer, My goal is to be a fucll stack developer using HTML5, CSS, JavaScript, React, Python and Django.<br><br>
I love programming and everything that has to do with technology, the internet and writing code.</strong>
</p>
</center>
<hr>
<center>
<p>
<a href="https://LinkToTheWebsite.com">
<li> GitHub</li></a></p>
<p>
<a href="https://LinkToTheWebsite.com">
<li>LinkedIn</li></a></p>
<p>
<a href="https://LinkToTheWebsite.com">
<li>Twitter</li></a></p>
<p>
<a href="https://LinkToTheWebsite.com">
<li>Instagram</li></a></p>
</center>
<!-- Body end -->
</div>
<div id="footer">
<!-- Footer start -->
<center>
<p><font color="#FFFFFF">© 2020 Ziad Alian</font></p>
</center>
<!-- Footer end -->
</div>
</div>
</body>
</html>
CSS
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#000000;
}
.imgz {
border-radius: 50%;
}
#header p,
#header h1 {
margin:0;
padding:10px 0 0 10px;
}
#footer p {
margin:0;
padding:10px;
}
So I've noticed in my website that there if you scroll to the right (not as if there is any content to the right) there is a long vertical white strip. This is only if you scroll that you'll see it. This is only alongside certain div elements. Once I get to the rows, the content just stretches to the extra space to the right rather than have the white space as well. Since the problem isn't consistent, I've included all the HTML and CSS code to see if there may be two problems in two separate locations.
This is the HTML
<!DOCTYPE HTML>
<html>
<head>
<title>ACA Technology</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="MyWebsite.css">
</head>
<body>
<div id="infoHeader" class="header">
<div id="header_container">
<!-- header -->
<header class="header_shadow nav_type_12 sticky_header header_to_shrink clearfix" >
<div style="float: left; margin-left: 20px">
<h2> EAZYnetz </h2>
</div>
<div style="float: right; margin-right: 10px">
<button id="home" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-home"></span> Home</button>
<button id="ourApps" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-phone"></span> Our Services</button>
<button id="contactUs" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-user"></span> Contact Us</button>
</div>
</div><!-- end panel-footer -->
</div>
</div>
<div class="Home">
<div id="bigPicture" class="container" align="center">
<h1>BUILD YOUR EMPIRE.</h1>
<p>Every idea needs a website to express itself. Tell us what you need and how you'll like it. We'll make the layout, animation, and paint the final picture to your future method of advertisement.</p>
</div>
</div>
<div id="OurServices">
<div id="information" class="row">
<h3 align="center"> What's included in any option </h3>
<hr>
<div class="col-sm-4">
<h3>Your preferences</h3>
<p> Every idea needs a website to express itself. Tell us what you need and how you'll like it, then we'll make it perfect.</p>
</div>
<div class="col-sm-4">
<h3>Layout</h3>
<p> Tell us how you want everything formatted and where to place what according to your liking. </p>
</div>
<div class="col-sm-4">
<h3>Content</h3>
<p>What do you want to show your costumers? What do you want them to see? Put whatever you want to express on your webpage, no limits.</p>
</div>
</div>
<div id="servicesInfo" class="row">
<h3 align="center"> Choices to pick from</h3>
<hr>
<div class="col-sm-4">
<h3>Front End </h3>
<p>This consists of content text only.</p>
</div>
<div class="col-sm-4">
<h3> Front End + Design </h3>
<p>This consists of the content text and the design (colors, layout, menu, animation, etc). </p>
</div>
<div class="col-sm-4">
<h3>Whole Package <br> Front End + Design + Databases </h3>
<p> This is the whole package. It consists of the text of the website, design of the website, and the databases(forums, users, etc) in the website. <p>
</div>
<p> Overall price depends on level of complexity and number of pages </p>
</div>
</div>
<div id="ContactUs" class="jumbotron">
<div class="container">
<h3>Contact Us</h3>
<ul style="list-style-type:none">
<li><span class="glyphicon glyphicon-earphone"></span> 647-550-3998</li>
<li><span class="glyphicon glyphicon-envelope"></span> temporary#easynetz.net</li>
</ul>
<p> If you're interested or have any questions or concerns,<br> feel free to contact us. </p>
</div>
</div>
</body>
</html>
This is the CSS
a{
font-family: Avant Garde,Avantgarde,Century Gothic,CenturyGothic,AppleGothic,sans-serif;
}
p{
font-family: Avant Garde,Avantgarde,Century Gothic,CenturyGothic,AppleGothic,sans-serif;
font-size: 25px;
}
h1, h2, h3{
font-family: Avant Garde,Avantgarde,Century Gothic,CenturyGothic,AppleGothic,sans-serif;
font-size: 35px;
}
li{
font-family: Avant Garde,Avantgarde,Century Gothic,CenturyGothic,AppleGothic,sans-serif;
font-size: 25px;
color: #FFFFFF
}
#infoHeader{
height: 70px;
background-color: #1A1C27;
}
.header button{
position: relative;
top: 50%;
transform: translateY(50%);
}
.header a{
text-decoration: none;
}
.body{
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
.Home{
height: 573px;
background-image: url("clouds.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.Home h1,h2,h3{
color: white;
font-weight: 900;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
.Home p{
color: white;
font-weight: 900;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
.Home .container h1{
margin-top: 170px;
}
.top button{
background-color: black;
color: black;
font-size: 18px;
padding: 8px 30px;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
}
#theName{
color: white;
}
#information{
background-color: #68ABDD;
}
#information h3{
color: #ffffff;
text-align: center;
font-size: 20px;
}
#information p{
text-align: center;
font-size: 14px;
color: #ffffff;
}
#servicesInfo h3{
color: #ffffff;
text-align: center;
font-size: 20px;
}
#servicesInfo p{
text-align: center;
font-size: 14px;
color: #ffffff;
}
#servicesInfo{
background-color: #ff0000;
}
#ContactUs{
height: 635px;
padding:0!important;
margin:0 !important;
background-image: url("http://hdwallpaperspretty.com/wp-content/gallery/beautiful-buildings-wallpapers/Best-top-desktop-3d-buildings-wallpapers-hd-3d-buildings-wallpaper-13.jpg");
background-repeat: no-repeat;
}
#ContactUs{
color: white;
}
#contactHeader{
padding:0;
margin:0;
}
add following class to your CSS
#information, #servicesInfo {
margin: 0;
padding: 0;
}
you can fix that with adding the next css to the html tag on the html file or target the html on the css file:
overflow-x:hidden
The overflow means scrolling when the elements on the page are too big for the page. I didn't check your code to the end in order to see which element is too big for the page but this is a quick way to fix that.
The best option though is to check which element is too big and resize it with css in which way you want to.
One way is
max-width:100%;
I'm currently working on a menu for a website and got a problem: I have a logo which should be on the left side and menu buttons which should be on the right side. This is what I got so far:
<!DOCTYPE HTML>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Share:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<title>Menu</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: 'Share', cursive;
}
#header {
background-color: ;
}
#header_logo {
width: ;
margin-top: ;
}
#header_menu {
width: 100%;
}
.menubutton {
height: 2.5em;
line-height: 2.5em;
display: inline-block;
background-color: ;
margin-left: 20px;
}
a {
font-family: 'Share', cursive;
}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
</style>
</head>
<body>
<div id="wrapper" align=""> <!-- Beginning of wrapper -->
<div id="header"> <!-- Beginning of Header -->
<div id="header_logo" align="left">
<img src="http://futurized.t15.org/fut_logo.png" style="height: 12px; z-index: 2;"/>
</div>
<div id="header_menu" align="right">
<div class="menubutton">
Home
</div>
<div class="menubutton">
Info
</div>
<div class="menubutton">
Werben
</div>
<div class="menubutton" align="right" style="margin-right: 20px;">
Kontakt & Impressum
</div>
</div>
</div> <!-- End of header -->
</div> <!-- End of wrapper -->
</body>
</html>
The problem is that the logo is not on a line with the menu buttons…
Before I added the logo everything worked perfect. I tried different things but nothing worked. Do you guys have an idea how I can solve that problem?
Add float:left to your #header_logo div.
jsFiddle example
Note that you may also want to reduce or eliminate the line-height property on your .menubutton class if you want the spacing to be even tighter.
You may also try for display: inline-block;
This property allows a DOM element to have all the attributes of a block element, but keeping it inline.
Also do check this article
I'm creating a navigation system and currently all I have is the titles at the top of the screen, side by side, e.g. home, about us and so on.
I'm unsure how I would create a fixed position for the navigation system at the top of the screen, so when you scroll down etc the options will still be there to click onto at the top of the screen.
Also, how it would be possible to add a background colour just to the navigation system?
Thank you.
Try something like this:
In between the tags in the HTML:
<div id='header'>NAVIGATION LINKS</div>
and in the CSS put:
#header{
padding:10px;
height:20px;
position:fixed;
width:100%;
}
Here's a JSFiddle: http://jsfiddle.net/MGumH/
It would most probably be best to go the HTML5 route, and use SEMANTIC tags.
Something along the lines of the below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Title</title>
<!-- next line points to EXTERNAL Stylesheet -->
<link type="text/css" rel="stylesheet" href="mystylesheet.css" />
</head>
<body>
<!-- HEADER -->
<header>
<h1>Header in h1</h1>
</header>
<!-- NAVIGATION -->
<nav>
<ul>
<li class="MyMenuItem">Menu Option 1</li>
<li class="MyMenuItem">Menu Option 2</li>
<li class="MyMenuItem">Menu Option 3</li>
</ul>
</nav>
<!-- SECTION(S) -->
<br />
<section>
<article>
<header>
<h3 class="MyArticleHeader">Article #1</h3>
</header>
<section>
<p>This is the first article. This is <mark>highlighted</mark>. This is some body text, lorem ipsum dipsum and some more unknown latin words over and over again. Lorem ipsum dipsum and some more unknown latin words over and over again. Lorem ipsum dipsum and some more unknown latin words over and over again. Lorem ipsum dipsum and some more unknown latin words over and over again.</p>
</section>
</article>
<article>
<header>
<h3 class="MyArticleHeader">Article #2</h3>
</header>
<section>
<p>This is the second article. These articles could be blog posts, etc.</p>
</section>
</article>
</section>
<!-- FOOTER -->
<footer id="MyFooter">Footer - Copyright 2013</footer>
</body>
</html>
There are also other semantic tags too, like Aside for example.
And this is the stylesheet that goes with the above sample
body
{
padding: 12px;
}
h1
{
color: #FFFFFF;
background-color: #FF0000;
text-align: center;
vertical-align: middle;
}
.MyMenuItem
{
margin: 2px;
padding: 2px 8px 2px 8px;
list-style-type: none;
vertical-align: middle;
text-align: center;
float: left;
color: #FFFFFF;
background-color: #FFCC66;
}
.MyMenuItem:hover
{
margin: 2px;
padding: 2px 8px 2px 8px;
list-style-type: none;
vertical-align: middle;
text-align: center;
float: left;
color: #000000;
background-color: #99CCFF;
}
.MyArticleHeader
{
color: #FF0000;
text-decoration: underline;
font-weight: bold;
}
p
{
font-family: Tahoma;
font-size: 12pt;
}
#MyFooter
{
color: #FFFFFF;
background-color: #FF0000;
vertical-align: middle;
text-align: center;
}
Simply copy ans paste the above two samples into separate files one called test.htm and the other called mystylesheet.css (in the same folder)
Ref: for further information http://blogs.msdn.com/b/jennifer/archive/2011/08/01/html5-part-1-semantic-markup-and-page-layout.aspx