This course is about HTML5, not about CSS. However, we've been asked to show to beginners how to make a simple layout using CSS and the new structural elements we just studied this week.
So, there are many possible approaches, as CSS is a very rich technology. And this example, the one we will present, do not pretend to be the best way to make nice layouts. But we try to keep them as simple as possible. For example, explaining in details the new ‘flexbox’ module from CSS3 would take a whole week.
So we just give you the most simple example that uses this technology.
The others examples rely on a classic CSS property called ‘float’. ‘float:right’, ‘float:left’ is useful for indicating where we want to put elements in the page. So you will see, I think, two or three examples based on the CSS float property and one based on the ‘flexbox’ module.
Hi! This live coding session is for CSS beginners. I’m going to show you how to create a simple layout that uses some of the sectioning elements we saw, like ‘section’ and ‘aside’, and also how to use the ‘header’ and ‘footer’ elements introduced this week.
I created a small structure, a small HTML structure for a page ‘about myself’.
I used a ‘section’ that contains a small heading called “about me”, a picture, a small description of my work… and I used also an ‘aside’ for describing my coordinates, my email and twitter account. And what I would like to get, as a result, is this… it’s just a nice layout with the ‘aside’ on the right, with the ‘section’ on the left, with a nice font characters, margins, shadows, rounded rectangles and a nice display of the ’header’ here at the top, and of the ‘footer’ at the bottom.
How can we do that? We are going to play with CSS properties, and in particular, one property called “float” property.
I will first start by highlighting the different parts of my page. For the ‘header’, the ‘footer’, the ‘aside’ and the ‘section’, I’m going to indicate that I want a background color that is green. You can see the result in real time in JSBin. The part here is called “the selector”, and, inside the selector, you specify properties and values. I can also indicate that I want a white color for the text; that I would like some space between the border of the elements and the text inside: this is classed the “padding”. I can add a “padding” that is vertically of 24 pixels, and horizontally of 14 pixels, for example. I can add a “margin” to separate them.
If I indicate only one value it’s for left, right, top, bottom. I can also make some rounded corners with the border-radius property. I’m going to use 10px also for the border-radius, here. I can add shadows to these elements, with the box-shadow property, that takes some parameters: the two first ones are the offsets of the shadow (horizontal offset, and vertical offset). I’m going to use 2 pixels on the right and two pixels directed to the bottom for the shadow… the third parameter is the “blur” (I want a blurred color), and finally, the size of the shadow and the color. So like this, I’ve got a 2 pixels wide shadow that is blurred, this is the value of the blur: 5 pixels, and 2 pixels on the right and directed to the bottom, and finally the color.
This is for the “global” look of the elements. Then, I want to center the text of the header and of the footer… For the footer and for the header, I can indicate that I want the text aligned – the property is called “text-align” - I want the text centered.
Like this, I centered the text of my footer and of my header.
I can also indicate the font of the different characters I’m using… I can use the “font” property. First, it’s the size of the font, and then the second parameter – if I use a /-… is the size of the lines…, and third parameter is the name of the font.
Like this I’ve got a fancy font, nice colors, margins, padding (padding is the space inside, the text aligned, and so on… Now, I would like the “section” to be on the left, and the “contact” on the right… For the “section”, I’m going to use float:left. It will take effect only when other elements are on the right.
For the “aside”, I’m using float:right. Ok, the aside is on the right now, but the section uses the whole size, the whole horizontal size by default. I can restrict this using the “width” property. I’m going to use a percentage here… 60% of the size will be used by the section. For the aside, I cannot use 40%... because I’ve got margins that will interfere. So, I’m going to use 25% here… Like that, you can see that it’s resizable…
I’ve got some problems: I’ve got the footer that is also using this area here… and this is not what I want: I would like the footer to use the whole horizontal size, and same for the header.
I can use a property called “clear” and if I use “clear:both”, it means that I don’t want to have any neighbor elements, either on my left or on my right..
So what do I have now. I’ve got a resizable page with the aside on the right and the section on the left. Finally I’m going to position the picture inside the section, on the right. The picture has an id, here: “image id=“michelBuffa”…
I’m going to use this id as a CSS selector. For ids, I use the “#” sign to select the picture, and I can use “float:right”. And now the picture is on the right, and if I want to have some margin here between the text and the picture, I can use the ‘margin-left’ property 10 pixels. Now what do I have? I have exactly the same result I showed you here… The corner radius is not the same, but we’ve got nearly the same results in the live coding session. I can resize and you can see that the layout is adjusting. Of course, the small margin here is not really adjusting perfectly… also, the height of the ‘aside’ does not occupy the whole area here… If you want to go further with more complex rules for making layouts, you’ve got to look at the third example that is using the ‘flexbox’ model from CSS3, that is a very powerful module. I recommend you to go for some tutorials on the Web, because learning this module would take a long time, and it’s not the purpose of this course, that is centered around markup and HTML. I hope you enjoyed this live coding session.
Look at the examples, share your experience on the forums, or ask for help in the forums if you need more information about creating layouts.
In this section, we show some "classic" CSS layout techniques for designing an HTML page that uses the new sectioning elements.
We embed examples from this very good post about "Positioning content". This is a recommended reading as it details how to use the CSS float property to layout a Web page.
The 4 examples below are given "as is" to give you some hints. There are lots of other possibilities on using CSS to position element.
This example uses the following HTML structure (notice that we use the "HTML entity syntax" for displaying "<" or ">". For example, < displays a "<" character).
<header>
<code><header></code>
</header>
<section>
<code><section> <br> float: left;</code>
</section>
<aside>
<code><aside> <br> float: right;</code>
</aside>
<footer>
<code><footer></code>
</footer>
Here we use the CSS rule float:left for the <section> and the CSS rule float:right for the <aside>. When an element floats, it goes out of the normal flow of the HTML element. Then by default it floats to the edge of its parent; and its size depends on the elements it contains. So, in order to fill the whole horizontal space, we prefer here to "force the width" by setting the CSS width property with a percentage. So we took width: 63% for the <section> on the left and width:30% for the <aside> on the right.
You can look at the complete CSS code in the interactive example below (click on the CSS or HTML text in the menu bar below, or click "edit on codepen" to change the code and see the results):
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Examples of page layouts</title>
</head>
<body>
<!-- Example 1 -->
<header>
<code><header></code>
</header>
<section>
<h1><code><section> <br> float: left;</code></h1>
</section>
<aside>
<code><aside> <br> float: right;</code>
</aside>
<footer>
<code><footer></code>
</footer>
</body>
</html>
css:
code {
background: #2db34a;
border-radius: 6px;
color: #fff;
display: block;
font: 14px/24px "Source Code Pro", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier;
padding: 24px 15px;
text-align: center;
}
header,
section,
aside,
footer {
margin: 0 1.5% 24px 1.5%;
}
section {
float: left;
width: 63%;
}
aside {
float: right;
width: 30%;
}
footer {
clear: both;
margin-bottom: 0;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>New structural elements</title>
</head>
<body>
<header>
<h1>Michel Buffa home page</H1>
</header>
<section>
<h2>About</h2>
<img id="michelBuffa" alt="michel photo" src="https://pbs.twimg.com/profile_images/110455194/n666194627_2302_400x400.jpg">
My name is Michel Buffa, I work at the University of Nice in the south of France, and I am the W3C representative of my University.
</section>
<aside>
<h2>Contact</h2>
Email:buffa@unice.fr
<br>
Twitter: @micbuffa
</aside>
<footer>
<h2>Created in 2015</h2>
</footer>
</body>
</html>
CSS:
header, footer, section, article, aside {
margin: 10px;
background: green;
border-radius: 6px;
color: white;
font: 14px/24px "Lucida Console";
padding: 24px 15px;
box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);
display:block;
}
#michelBuffa {
float: right;
margin-left:10px;
}
header, footer {
text-align:center;
clear: both;
}
section {
float: left;
width: 60%;
}
aside {
float: right;
width: 25%;
}
Here we show how to make a 3 column layout using the CSS float property.
HTML code:
<header>
<code><header></code>
</header>
<section>
<code><section> <br> float: left;</code>
</section>
<section>
<code><section> <br> float: left;</code>
</section>
<section>
<code><section> <br> float: left;</code>
</section>
<footer>
<code><footer></code>
</footer>
Instead of having one element with a float:left and one element with a float:right property, we instead use float:left for all three of them, and we give a width:30% CSS property value to each <section>. We also set a small margin so that the colums have a gap between them.
Look at the CSS code in the example below:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Layout</title>
<meta charset="utf-8"/>
</head>
<body>
<header>
<code><header></code>
</header>
<section>
<h2><code><section> <br> float: left;</code></h2>
</section>
<section>
<h2> <code><section> <br> float: left;</code> </h2>
</section>
<section>
<h2><code><section> <br> float: left;</code></h2>
</section>
<footer>
<h2><code><footer></code></h2>
</footer>
</body>
</html>
css:
code {
background: blue;
border-radius: 6px;
color: #fff;
display: block;
font: 14px/24px "Source Code Pro", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier;
padding: 24px 15px;
text-align: center;
}
header,
section,
aside,
footer {
margin: 0 1.5% 24px 1.5%;
}
section {
float: left;
width: 30%;
}
footer {
clear: both;
margin-bottom: 0;
}
This example uses the CSS flex property to achieve a result similar to the one shown in Example 2.
There are many articles on Flexbox and we recommend those from Rachel Andrew on Smashing Magazine: "Use cases for Flexbox", "Flexbox: how big is that flexible box", etc.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of multi column layout using the flex CSS property
</title>
<script src="https://rawgithub.com/ai/autoprefixer-rails/master/vendor/autoprefixer.js"></script>
</head>
<body>
<section>
<h1>This is a section with 2 articles per row + 1 aside</h1>
<div class="row">
<article class="column">
<h2>
Col one
</h2>
</article>
<article class="column">
<h2>
Col two
</h2>
</article>
<aside class="aside">
<h2>Aside</h2>
</aside>
</div>
</section>
</body>
</html>
CSS:
.row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.column {
margin: 0.5em;
min-height: 8em;
padding: 1em;
width: 40%;
}
.aside {
margin: 0.5em;
min-height: 8em;
padding: 1em;
width: 15%;
background-color: lightBlue;
}
.column:nth-child(1) { background-color: #9df5ba; }
.column:nth-child(2) { background-color: #9df5d7; }
This example also uses all the structuring elements we saw: main, article, section, etc. It uses only the simplest parts of the FlexBox CSS module, so it should be easy to understand, even for CSS beginners:
HTML & CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Semantics and Flexbox</title>
<style>
header, footer {
margin: 0.2em;
padding: 0.5em;
background-color: #D2691E;
text-align: center;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
nav {
margin: 0.2em;
min-height: 8em;
padding: 0.5em;
width: 10%;
background-color: lightgreen;
text-align: center;
}
.column {
margin: 0.2em;
min-height: 8em;
padding: 1em;
width: 65%;
background-color: #9df5d7;
}
aside {
margin: 0.2em;
min-height: 8em;
padding: 1em;
width: 20%;
background-color: lightBlue;
}
a {
text-decoration: none;
}
a:hover {
color: red;
}
</style>
</head>
<body>
<header>
<h1>HTML5 Semantics and Flexbox</h1>
</header>
<div class="row">
<nav>
<h3>Navigate</h3>
<strong>Home<br>
<a href="">Link1</a><br>
<a href="">Link2</a>
</strong>
</nav>
<main class="column">
<article>
<h2>
About This Page
</h2>
<p>On this page, I am experimenting with HTML5 semantics and CSS flexbox for a tidy layout.</p>
<p>On JS Bin, I purposedly includes the stylesheet on the HTML tab (instead of separate CSS tab) for easier code reading for those with small screen.</p>
<p>The <code>main</code> element is placed within a <code>div</code> element along with <code>nav</code> and <code>aside</code>. I don't know if this is right or wrong (let me know?).</p>
<p>Navigation links are placed within <code>nav</code>, laid on the left. The <code>main</code> is at the center column (this column). Within it is the main topic (this article).</p>
<p>The <code>aside</code> element is at the rightmost of the column, I put supplemental information on it.</p>
</article>
<article>
<h2>Test This Page!</h2>
<p>Do test this page by:</p>
<ul>
<li>Resizing the browser windows; see if flexbox lives up to its reputation.</li>
<li>Run HTML Outliner or HeadingsMap (or similar tool) and see if the outline is good. </li>
<li>Check the markup in this page with W3C Markup validator; see if the markups are good. Paste the URL of this page to the address column. <a href="https://validator.w3.org/" target="_blank">Click here to try!</a>.</li>
<li>Check the CSS part of this page too! <a href="https://jigsaw.w3.org/css-validator/" target="_blank">Click here!</a></li>
</ul>
</article>
</main>
<aside>
<h2>HTML</h2>
<p>Stands for HyperText Markup Language. The current standard is HTML5.</p>
<h2>CSS</h2>
<p>Stands for Cascaded Style Sheet. The current standard is CSS3.</p>
<h2>URL</h2>
<p>Short for Uniform Resource Locator. It is a reference (an address) to a resource on the Internet.</p>
</aside>
</div>
<footer>Nov, 2015 @ royray</footer>
</body>
</html>
Old but good articles:
on CSS Tricks: All about floats
on "A List Apart" (ALA): CSS Floats 101
Another article on Lifewire: Understanding CSS float
On MDN's Web Docs: the float CSS property and the clear CSS property