Simple Responsive Layout Using HTML and CSS Only

First create index.html

<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Layout</title>
<link rel="stylesheet" href="css.css">
</head>
<body>

<div id="wrapper">
<header><p> HEADER</p></header>
<div class="menu">
<p>MENU</p>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">CONTACTS</a></li>
</ul>

</div>
<div class="container">
<h2>Container</h2>
<p>HTML5 is a core technology markup language of the Internet used for structuring and presenting content for the World Wide Web. As of October 2014 this is the final and complete fifth revision of the HTML standard of the World Wide Web Consortium (W3C). The previous version, HTML 4, was standardised in 1997.</p>

<p>Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and DOM Level 2 HTML.</p>
<p>
Following its immediate predecessors HTML 4.01 and XHTML 1.1, HTML5 is a response to the fact that the HTML and XHTML in common use on the World Wide Web are a mixture of features introduced by various specifications, along with those introduced by software products such as web browsers, those established by common practice. It is also an attempt to define a single markup language that can be written in either HTML or XHTML. It includes detailed processing models to encourage more interoperable implementations; it extends, improves and rationalises the markup available for documents, and introduces markup and application programming interfaces (APIs) for complex web applications. For the same reasons, HTML5 is also a potential candidate for cross-platform mobile applications. Many features of HTML5 have been built with the consideration of being able to run on low-powered devices such as smartphones and tablets. In December 2011, research firm Strategy Analytics forecast sales of HTML5 compatible phones would top 1 billion in 2013.</p>

<p>

The Web Hypertext Application Technology Working Group (WHATWG) began work on the new standard in 2004. At that time, HTML 4.01 had not been updated since 2000, and the World Wide Web Consortium (W3C) was focusing future developments on XHTML 2.0. In 2009, the W3C allowed the XHTML 2.0 Working Group's charter to expire and decided not to renew it. W3C and WHATWG are currently working together on the development of HTML5.

While HTML5 is often compared to Adobe Flash, the two technologies are very different. Both include features for playing audio and video within web pages, and for using Scalable Vector Graphics. HTML5 on its own cannot be used for animation or interactivity — it must be supplemented with CSS3 or JavaScript. There are many Flash capabilities that have no direct counterpart in HTML5. See Comparison of HTML5 and Flash.

Although HTML5 has been well known among web developers for years, it became the topic of mainstream media around April 2010 after Apple Inc's then-CEO Steve Jobs issued a public letter titled "Thoughts on Flash" where he concludes that "Flash is no longer necessary to watch video or consume any kind of web content" and that "new open standards created in the mobile era, such as HTML5, will win". This sparked a debate in web development circles where some suggested that while HTML5 provides enhanced functionality, developers must consider the varying browser support of the different parts of the standard as well as other functionality differences between HTML5 and Flash. In early November 2011, Adobe announced that it will discontinue development of Flash for mobile devices and reorient its efforts in developing tools using HTML5.</p>
<p> Content taken From wikipedia</p>
</div>
<footer><p>Footer</p></footer>
</div>

</body>
</html>

Create css.css

body{
margin:auto;
background:#CCCCCC;
}
header{

padding:20px;
margin:auto;
background:#000000;
}
header p{
color:#666666;
text-align:center;
}
#wrapper{
margin:auto;
overflow:auto;
width:80%;
padding:10px;
background:#999999;
}
.menu{
height:auto;
overflow:auto;
margin:auto;
width:100%;
background:#666666;
}
.menu ul{
}
.menu li{
display:inline;

}
.menu li a{
background:#000000;
    border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
    color: #ddd;
    float: left;
    line-height: 23px;
    margin: 10px;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    width: 175px;

}
.menu li a:hover{
color: #999999;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.menu p{
text-align:center;
color:#333333;
}
.container{
overflow:auto;
padding:10px;
background:#CCCCCC;
}
.container h2{
text-align:center;
}
.container p{
text-align:justify;
}
footer{

padding:20px;
margin:auto;
background:#000000;
}
footer p{
color:#666666;
text-align:center;
}

CSS and CSS3 TutorialS

Search This Blog