Services
Featured Sites
CSS Layouts
There are many options available for webpage layouts, so the first step in designing the layout is deciding what you want. The second step is putting together the elements to accomplish the task.
There are six basic HTML layout elements that will help you structure your website content, and then the rest is up to CSS. For our example, we will use a simple two-column layout with a header, a footer, and a width of 100%, which expands and contracts according to the size of your screen:
This layout can be brought to life using the following code:
<!DOCTYPE html>
<html>
<head>
<title>PHP For Kids Layout Example</title>
<style>
* { box-sizing: border-box; margin: 0; }
header {
background-color: #006DA6;
padding: 15px;
text-align: center;
font-size: 35px;
color: white;
}
nav {
float: left;
width: 25%;
background: #FFFFFF;
padding: 15px;
}
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 15px;
width: 75%;
background-color: #FFA100;
}
section:after {
content: "";
display: table;
clear: both;
}
footer {
background-color: #658C00;
padding: 15px;
text-align: center;
color: white;
}
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<header>
<h1>Header</h1>
</header>
<section>
<nav>
<ul>
<li><a href="#">Navigation Link 1</a></li>
<li><a href="#">Navigation Link 2</a></li>
<li><a href="#">Navigation Link 3</a></li>
</ul>
</nav>
<article>
<h2>Article</h2>
<p>So this is an example of an HTML5 layout, styled with CSS.</p>
<p>It is responsive (multi-platform friendly) and can be adapted according to your preference.</p>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
Better yet, CSS allows us to divide our style from our content and cut down on the clutter by putting all of that CSS into a separate file. The <head> element would contain the following line:
<link rel="stylesheet" href="boring-style-file-name.css" type="text/css">
The external CSS stylesheet, referenced above as being a file called "boring-style-file-name.css" should contain the style previously shown in the <style> element.
Go ahead and make some files and try it out!