html 5 and css 3_ the techniques you'll soon be using - tuts+ code tutorial.pdf
TRANSCRIPT
-
7/22/2019 HTML 5 and CSS 3_ The Techniques You'll Soon Be Using - Tuts+ Code Tutorial.pdf
1/31
28/4/2014 HTML 5 and CSS 3: The Techniques You'll Soon Be Using - Tuts+ Code Tutorial
http://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708 1/31
Categories Series
Code
HTML & CSS
HTML 5 and CSS 3: The Techniques You'llSoon Be Usingby Mads Kjaer 7 Jul 2009
http://code.tutsplus.com/categories/html-csshttps://www.pinterest.com/pin/create/button/?url=http://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708&description=HTML%205%20and%20CSS%203:%20The%20Techniques%20You%27ll%20Soon%20Be%20Using%20%E2%80%94%20Tuts+&media=https://cdn.tutsplus.com/net/uploads/legacy/373_html5/200x200.pnghttps://plus.google.com/share?url=http://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708https://www.facebook.com/sharer/sharer.php?u=http://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708https://twitter.com/intent/tweet?text=HTML%205%20and%20CSS%203:%20The%20Techniques%20You%27ll%20Soon%20Be%20Using%20%E2%80%94%20Tuts+&url=http://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708&via=tutsplushttp://tutorials.tutsplus.com/authors/mads-kjaerhttp://code.tutsplus.com/http://code.tutsplus.com/serieshttp://code.tutsplus.com/categorieshttp://tutorials.tutsplus.com/ -
7/22/2019 HTML 5 and CSS 3_ The Techniques You'll Soon Be Using - Tuts+ Code Tutorial.pdf
2/31
28/4/2014 HTML 5 and CSS 3: The Techniques You'll Soon Be Using - Tuts+ Code Tutorial
http://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708 2/31
In this tutorial, we are going to build a blog page using next-generation techniques from HTML 5
and CSS 3. The tutorial aims to demonstrate how we will be building websites when thespecifications are finalized and the browser vendors have implemented them. If you already
know HTML and CSS, it should be easy to follow along.
-
7/22/2019 HTML 5 and CSS 3_ The Techniques You'll Soon Be Using - Tuts+ Code Tutorial.pdf
3/31
28/4/2014 HTML 5 and CSS 3: The Techniques You'll Soon Be Using - Tuts+ Code Tutorial
http://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708 3/31
1.HTML 5
HTML 5 is the next major version of HTML. It introduces a bunch of new elements that will make
our pages more semantic. This will make it a lot easier for search engines and screenreaders
to navigate our pages, and improve the web experience for everyone. In addition, HTML 5 will
also include fancy APIs for drawing graphics on screen, storing data offline, dragging and
dropping, and a lot more. Let's get started marking up the blog page.
2.Basic Structure
Before we begin marking up the page we should get the overall structure straight:
In HTML 5 there are specific tags meant for marking up the header, navigation, sidebar and
footer. First, take a look at the markup and I'll explain afterwards:
Page title
-
7/22/2019 HTML 5 and CSS 3_ The Techniques You'll Soon Be Using - Tuts+ Code Tutorial.pdf
4/31
28/4/2014 HTML 5 and CSS 3: The Techniques You'll Soon Be Using - Tuts+ Code Tutorial
http://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708 4/31
Page title
It still looks like HTML markup, but there are a few things to note:
In HTML 5, there is only one doctype. It is declared in the beginning of the page by
. It simply tells the browser that it's dealing with an HTML-document.
The new tag header is wrapped around introductory elements, such as the page title or alogo. It could also contain a table of contents or a search form. Every header typically
contains a heading tag from to . In this case the header is used to introduce
the whole page, but we'll use it to introduce a section of the page a little later.
The nav-tag is used to contain navigational elements, such as the main navigation on a
site or more specialized navigation like next/previous-links.
The section-tag is used to denote a section in the document. It can contain all kinds of
markup and multiple sections can be nested inside each other.aside is used to wrap around content related to the main content of the page that could
still stand on it's own and make sense. In this case we're using it for the sidebar.
The footer-tag should contain additional information about the main content, such as info
-
7/22/2019 HTML 5 and CSS 3_ The Techniques You'll Soon Be Using - Tuts+ Code Tutorial.pdf
5/31
28/4/2014 HTML 5 and CSS 3: The Techniques You'll Soon Be Using - Tuts+ Code Tutorial
http://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708 5/31
about who wrote it, copyright information, links to related documents and so on.
Instead of using divs to contain different sections of the page we are now using appropriate,
semantic tags. They will make it a lot easier for search engines and screen readers to figure
out what's what in a page.
3.Marking Up the Navigation
The navigation is marked up exactly like we would do it in HTML 4 or XHTML, using an
unordered list. The key is that this list is placed inside the nav-tags.
BlogAboutArchivesContactSubscribe via. RSS
4.Marking Up the Introduction
We have already defined a new section in the document using the section tag. Now we just
need some content.
Do you love flowers as much as we do?
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
We add an id to the section tag so we can identify it later when styling. We use the header tag
to wrap around the introductory h2 element. In addition to describing a whole document, the
-
7/22/2019 HTML 5 and CSS 3_ The Techniques You'll Soon Be Using - Tuts+ Code Tutorial.pdf
6/31
28/4/2014 HTML 5 and CSS 3: The Techniques You'll Soon Be Using - Tuts+ Code Tutorial
http://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708 6/31
header-tag should also be used to describe individual sections.
5.Marking Up the Main Content Area
Our main content area consists of three sections: the blog post, the comments and the
comment form. Using our knowledge about the new structural tags in HTML 5, it should be easy
to mark it up.
Marking up the Blog Post
Go through the markup and I'll explain the new elements afterwards.
This is the title of a blog post
Posted on June 29th
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
We start a new section and wrap the whole blog post in an article-tag. The article tag is used to
denote an independent entry in a blog, discussion, encyclopedia, etc. and is ideal to use here.
Since we are viewing the details of a single post we only have one article, but on the front page
of the blog we would wrap each post in an article-tag.
The header element is used to present the header and metadata about the blog post. We tell
the user when the post was written, who wrote it and how many comments it has. Note that the
timestamp is wrapped in a -tag. This tag is also new to HTML 5 and is used to mark up a
specific place in time. The contents of the datetime attribute should be:
-
7/22/2019 HTML 5 and CSS 3_ The Techniques You'll Soon Be Using - Tuts+ Code Tutorial.pdf
7/31
28/4/2014 HTML 5 and CSS 3: The Techniques You'll Soon Be Using - Tuts+ Code Tutorial
http://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708 7/31
1. The year followed by a figure dash (a minus sign to you non-typography nerds)
2. The month followed by a figure dash
3. The date
4. A capital T to denote that we are going to specify the local time
5. The local time in the format hh:mm:ss
6. The time zone relative to GMT. I'm in Denmark which is 1 hour after GMT, so I write +01. If
you were in Colorado you would be 7 hours behind GMT, and you would write -07.
Marking up the Comments
Marking up the comments is pretty straight-forward. No new tags or attributes are used.
CommentsGeorge Washington on
-
7/22/2019 HTML 5 and CSS 3_ The Techniques You'll Soon Be Using - Tuts+ Code Tutorial.pdf
8/31
28/4/2014 HTML 5 and CSS 3: The Techniques You'll Soon Be Using - Tuts+ Code Tutorial
http://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708 8/31
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
Marking up the Comment Form
Several enhancements to forms have been introduced in HTML 5. You longer have to do client-side validation of required fields, emails, etc. The browser takes care of this for you.
Post a comment
Name
E-mail
Website
Comment
There are new two new types of inputs, email and url. Email specifies that the user should enter
a valid E-mail, and url that the user should enter a valid website address. If you write required
as an attribute, the user cannot submit an empty field. "Required" is a boolean attribute, new to
HTML 5. It just means that the attribute is to be declared without a value.
Marking up the Sidebar and FooterThe markup of the sidebar and footer is extremely simple. A few sections with some content
inside the appropriate aside- and footer-tags.
-
7/22/2019 HTML 5 and CSS 3_ The Techniques You'll Soon Be Using - Tuts+ Code Tutorial.pdf
9/31
28/4/2014 HTML 5 and CSS 3: The Techniques You'll Soon Be Using - Tuts+ Code Tutorial
http://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708 9/31
You can view the final, unstyled markup here. Now for the styling.
6.Styling with CSS 3
CSS 3 builds upon the principles about styles, selectors and the cascade that we know so well
from earlier versions of CSS. It adds loads of new features, including new selectors, pseudo-
classes and properties. Using these new features it becomes a lot easier to set up your layout.
Let's dive in.
Basic Setup
To start off with we are going to define some basic rules concerning typography, background
color of the page, etc. You'll recognize all of this from CSS 2.1
/* Makeshift CSS Reset */
{
margin: 0;padding: 0;}
/* Tell the browser to render HTML 5 elements as block */
header, footer, aside, nav, article {
display: block;}
body {
margin: 0 auto;width: 940px;font: 13px/22px Helvetica, Arial, sans-serif;background: #f0f0f0;}
h2 {
font-size: 28px;line-height: 44px;padding: 22px 0;}
http://cdn.tutsplus.com/net/uploads/legacy/373_html5/markup/index.html -
7/22/2019 HTML 5 and CSS 3_ The Techniques You'll Soon Be Using - Tuts+ Code Tutorial.pdf
10/31
28/4/2014 HTML 5 and CSS 3: The Techniques You'll Soon Be Using - Tuts+ Code Tutorial
http://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708 10/31
h3 {
font-size: 18px;line-height: 22px;padding: 11px 0;}
p {
padding-bottom: 22px;}
First we reset margin- and padding-styles with a simple rule. In a production environment I
would use a more complete CSS Reset such as Eric Meyer's (for CSS 2.1) but for the scope of
the tutorial this will do.
We then tell the browser to render all the new HTML 5 elements as block. The browsers are fine
with elements they don't recognize (this is why HTML 5 is somewhat backwards compatible),
but they don't know how those elements should be rendered by default. We have to tell them
this until the standard is implemented across the board.
Also note how I've chosen to size the fonts in pixels instead of ems or %. This is to maintain the
progressive nature of the tutorial. When the major browsers one day are completely finished
implementing HTML 5 and CSS 3 we will all have access to page zooming instead of just text
resizing. This eliminates the need to define sizes in relative units, as the browser will scale the
page anyway.
See what the page looks likewith the basic styling applied. Now we can move on to styling the
rest of the page. No additional styles are required for the header, so we'll go straight to thenavigation.
7.Styling the Navigation
It is important to note that the width of the body has been defined as 940px and that it has been
centered. Our navigation bar needs to span the whole width of the window, so we'll have to
apply some additional styles:
http://cdn.tutsplus.com/net/uploads/legacy/373_html5/basic_styling/index.html -
7/22/2019 HTML 5 and CSS 3_ The Techniques You'll Soon Be Using - Tuts+ Code Tutorial.pdf
11/31
-
7/22/2019 HTML 5 and CSS 3_ The Techniques You'll Soon Be Using - Tuts+ Code Tutorial.pdf
12/31
28/4/2014 HTML 5 and CSS 3: The Techniques You'll Soon Be Using - Tuts+ Code Tutorial
http://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708 12/31
nav ul li.selected a {color: #fff;}nav ul li.subscribe a {margin-left: 22px;padding-left: 33px;text-align: left;background: url("rss.png") left center no-repeat;}
8.Styling the Introduction
The markup for the introduction is pretty simple: A section with a heading and a paragraph of
text. However, we'll use some new CSS 3 tricks to make it look more appealing.
#intro {
margin-top: 66px;padding: 44px;background: #467612 url("intro_background.png") repeat-x;background-size: 100%;border-radius: 22px;}
We are using two new properties. The first one is background-size, which allows you to scale
the background-image. In our case, we scale it to 100% on both axes. If the box expands as we
add more content to it, the gradient background will scale as well. This is something that was
not possible in CSS 2.1 without non-semantic markup and miscellaneous browser issues.
-
7/22/2019 HTML 5 and CSS 3_ The Techniques You'll Soon Be Using - Tuts+ Code Tutorial.pdf
13/31
28/4/2014 HTML 5 and CSS 3: The Techniques You'll Soon Be Using - Tuts+ Code Tutorial
http://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708 13/31
The second new property is border-radius, which applies rounded corners to the element. The
radius of our rounded corners are 22px in every corner. You could specify different values for
each corner or choose to only round individual corners.
Unfortunately, neither of the properties are fully implemented into the major browsers. However,
we can get some support by using vendor-specific attributes. Background-size is supported by
newer versions of Safari, Opera and Konqueror. Border-radius is supported by newer versions
of Safari and Firefox.
#intro {
.../* Background-size not implemented yet */-webkit-background-size: 100%;-o-background-size: 100%;
-
7/22/2019 HTML 5 and CSS 3_ The Techniques You'll Soon Be Using - Tuts+ Code Tutorial.pdf
14/31
28/4/2014 HTML 5 and CSS 3: The Techniques You'll Soon Be Using - Tuts+ Code Tutorial
http://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708 14/31
-khtml-background-size: 100%;/* Border-radius not implemented yet */-moz-border-radius: 22px;
-webkit-border-radius: 22px;}
Since we have a background-color defined, there will be no major problems in browsers that
don't support background-size, such as Firefox. Now we just need to style the heading and the
text.
#intro h2, #intro p{
width: 336px;}
#intro h2 {
padding: 0 0 22px 0;font-weight: normalcolor: #fff;}
#intro p {
padding: 0;color: #d9f499;}
The flower image can be added easily by giving #intro a second background image, something
that CSS 3 supports.
#intro {
...background: #467612 url("intro_background.png") top left (287px 1url("intro_flower.png") top right (653px 100%) no-repeat;
...}
We give the two background images explicit dimensions to ensure that they don't overlap, and
we're set. Note the shorthand notation of background-size.
-
7/22/2019 HTML 5 and CSS 3_ The Techniques You'll Soon Be Using - Tuts+ Code Tutorial.pdf
15/31
28/4/2014 HTML 5 and CSS 3: The Techniques You'll Soon Be Using - Tuts+ Code Tutorial
http://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708 15/31
Unfortunately, no browser reliably supports this yet, so we'll have to do it the old-fashioned way:
by including an inline image and positioning it using CSS. See the final example to see how it
was done.
9.Styling the Content Area and Sidebar
The content area and sidebar are going to be aligned beside each other. Traditionally you
would do this by using floats, but in CSS 3 we are going to use tables!
"What?! Tables?" you might ask and look confused. You probably learned years ago that using
tables for web layout is a big no-no, and it still is. You should never use the table-element to
mark up a layout. However, in CSS 3 we can make elements behave like tables without it ever
showing in the markup! To start off with, we're going to need some divs to group the sections in
a little more logical manner.
-
7/22/2019 HTML 5 and CSS 3_ The Techniques You'll Soon Be Using - Tuts+ Code Tutorial.pdf
16/31
28/4/2014 HTML 5 and CSS 3: The Techniques You'll Soon Be Using - Tuts+ Code Tutorial
http://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708 16/31
Everything still makes sense semantically, but now we can style it. We want the #content div to
behave like a table, with #mainContent and aside as table-cells. With CSS 3, this is very easy:
#content {
display: table;}
#mainContent {display: table-cell;width: 620px;padding-right: 22px;}
aside {display: table-cell;width: 300px;
-
7/22/2019 HTML 5 and CSS 3_ The Techniques You'll Soon Be Using - Tuts+ Code Tutorial.pdf
17/31
28/4/2014 HTML 5 and CSS 3: The Techniques You'll Soon Be Using - Tuts+ Code Tutorial
http://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708 17/31
}That's all! No more floating, faux column background images, clearing or collapsing margins.
We've made the elements behave like a table, and this makes it much easier for us to do
layout.
10.Styling the Blog Post
The styling of the post header is rather trivial so I'll skip to the fun part: the multi-column layout.
Multiple columns
Multiple columns of text was previously impossible without manually splitting the text, but withCSS 3 it's a piece of cake, although we have to add a div around the multiple paragraphs for
this to work with current browsers.
Lorem ipsum dolor sit amet...
Pellentesque ut sapien arcu...
Vivamus vitae nulla dolor...
...Now we can add two simple properties and call it a day.
.blogPost div {
column-count: 2;column-gap: 22px;}
We want 2 columns and a gap of 22px between the columns. The additional div is needed
because there is currently no supported way of making an element span more than one column.
In the future, however, you'll be able to specify the column-span property, and we could just
write:
.blogPost {
column-count: 2;column-gap: 22px;
-
7/22/2019 HTML 5 and CSS 3_ The Techniques You'll Soon Be Using - Tuts+ Code Tutorial.pdf
18/31
28/4/2014 HTML 5 and CSS 3: The Techniques You'll Soon Be Using - Tuts+ Code Tutorial
http://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708 18/31
}
.blogPost header {column-span: all;}Of course the column-count and column-gap properties are only supported by some browsers,
Safari and Firefox. We have to use the vendor-specific properties for now.
.blogPost div {
/* Column-count not implemented yet */-moz-column-count: 2;-webkit-column-count: 2;/* Column-gap not implemented yet */-moz-column-gap: 22px;-webkit-column-gap: 22px;}
Box shadow
If you look closely at the image in the blog post you'll see a drop-shadow. We are able to
generate this using CSS 3 and the box-shadow property.
.blogPost img {
margin: 22px 0;box-shadow: 3px 3px 7px #777;}
-
7/22/2019 HTML 5 and CSS 3_ The Techniques You'll Soon Be Using - Tuts+ Code Tutorial.pdf
19/31
28/4/2014 HTML 5 and CSS 3: The Techniques You'll Soon Be Using - Tuts+ Code Tutorial
http://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708 19/31
The first "3px" tells the browser where we want the shadow to stop horizontally. The second
"3px" tells it where we want the shadow to stop vertically. The last "7px" is how blurred the
border should be. If you set it to 0 it will be completely solid. Last but not least we define the
base color of the shadow. This color is of course faded, depending on how much you blur the
shadow.
It probably comes as no surprise that this property is not implemented in all browsers yet. In
fact, it only works in Safari, and you have to use the vendor-specific property.
.blogPost img {
margin: 22px 0;-webkit-box-shadow: 3px 3px 7px #777;}
11.Zebra-striping the Comments
Zebra-striping, or highlighting every second element in a series, has traditionally involved
selecting all the elements via javascript, then looping through them and highlighting all the odd
elements. CSS 3 introduces the pseudo-class "nth-child", which makes it ridiculously simple to
do this without javascript. We'll use it to zebra-stripe the comments.
-
7/22/2019 HTML 5 and CSS 3_ The Techniques You'll Soon Be Using - Tuts+ Code Tutorial.pdf
20/31
28/4/2014 HTML 5 and CSS 3: The Techniques You'll Soon Be Using - Tuts+ Code Tutorial
http://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708 20/31
section#comments article:nth-child(2n+1) {
padding: 21px;background: #E3E3E3;border: 1px solid #d7d7d7;/* Border-radius not implemented yet */-moz-border-radius: 11px;-webkit-border-radius: 11px;}
The weird value "2n+1" is actually pretty simple if you understand what it stands for:
2n selects every second item. If you wrote 3n it would select every third item, 4n every
fourth item, and so on.
The +1 tells the browser to start at element 1. If you are familiar with programming you
probably know that all arrays start at 0, and this is also true here. This means that element
1 is actually the second element in the series.
Alternatively, you could simply write:
section#comments article:nth-child(odd) { ... }
Since the standard includes the two most used values as shorthand, odd and even. The rest of
the comment styling should be simple to understand with your new knowledge.
Styling the Comment Form, Footer and Sidebar
A couple of CSS 3 techniques are reused in the styling of the comment form, footer and
sidebar. In the comment form and the footer I've used the same type of table layout technique
used in the main layout. In the sidebar border-radius is used to add rounded corners to the
different sections.
12.The Final Design
See the final designwith all styling applied.
Compatibility
The page renders correctly in Safari 4 and newer webkit-based browsers, as it is the only
http://cdn.tutsplus.com/net/uploads/legacy/373_html5/final/index.html -
7/22/2019 HTML 5 and CSS 3_ The Techniques You'll Soon Be Using - Tuts+ Code Tutorial.pdf
21/31
28/4/2014 HTML 5 and CSS 3: The Techniques You'll Soon Be Using - Tuts+ Code Tutorial
http://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708 21/31
rendering engine that supports all of the CSS 3 techniques we have used. Firefox 3 has some
problems applying rounded corners to our flower image and it doesn't support background-
size, but besides that the layout works. I've chosen to ignore Internet Explorer as it requires a bit
of hackingto get HTML 5 to work. You could also define some more rules and get everything
working across major browsers, but all of this is outside the scope of the tutorial.
Conclusion
When HTML 5 and CSS 3 are one day implemented in all browsers it will be a lot easier to
build websites. We'll finally be able to stop using floats for layout (which they were never meant
to be used for), and we will spend considerably less time writing javascript to scale our
background images or zebra-stripe our tables. Hopefully we will use all this extra time to study
some long-neglected areas of web design, like front end optimizationand proper information
architecture.
Follow us on Twitter, or subscribe to the NETTUTS RSS Feedfor more daily web development
tuts and articles.
Adve rtisement
Difficulty:
Intermediate
Length:
Medium
Tagged with:
http://code.tutsplus.com/search?search%5Bfilters%5D%5Bcompletion_time%5D%5B%5D=Mediumhttp://code.tutsplus.com/search?search%5Bfilters%5D%5Bdifficulty%5D%5B%5D=Intermediatehttp://feeds.feedburner.com/nettutshttp://www.twitter.com/nettutshttp://psd.tutsplus.com/articles/9-information-design-tips-to-make-you-a-better-web-designer/http://www.youtube.com/watch?v=BTHvs3V8DBAhttp://remysharp.com/2009/01/07/html5-enabling-script/ -
7/22/2019 HTML 5 and CSS 3_ The Techniques You'll Soon Be Using - Tuts+ Code Tutorial.pdf
22/31
28/4/2014 HTML 5 and CSS 3: The Techniques You'll Soon Be Using - Tuts+ Code Tutorial
http://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708 22/31
HTML & CSS Web Development HTML5 CSS3
About Mads Kjaer
Mads is a web designer and standards aficionado. He creates beautiful websites using HTML, CSS,
jQuery, PHP and WordPress. Despite his young age, he has been involved in web development since the
days of Netscape 4. Follow him on Twitter.
View Full Profile
- Collapse Bio
Adve rtisement
Related Posts
Introducing Markdown on OS X
5 days ago Markdown is a popular formatting syntax that lets you eas ily write plain text that can be
convert...
Build a Top Bar Off-Canvas Navigation With Foundation 5
4 Mar 2014 Today, we are going to combine ZURB's Foundation 5 Off-Canvas feature with our top bar
navigation...
Creating a Simple Responsive HTML Email
19 Dec 2013 In this tutorial I will show you how to create a simple responsive HTML email which will
work in ...
http://code.tutsplus.com/articles/creating-a-simple-responsive-html-email--webdesign-12978http://code.tutsplus.com/articles/creating-a-simple-responsive-html-email--webdesign-12978http://code.tutsplus.com/articles/build-a-top-bar-off-canvas-navigation-with-foundation-5--webdesign-17767http://code.tutsplus.com/articles/build-a-top-bar-off-canvas-navigation-with-foundation-5--webdesign-17767http://code.tutsplus.com/tutorials/introducing-markdown-on-os-x--cms-20764http://code.tutsplus.com/tutorials/introducing-markdown-on-os-x--cms-20764http://tutorials.tutsplus.com/authors/mads-kjaerhttp://code.tutsplus.com/tutorials/http//twitter.com/madshttp://code.tutsplus.com/categories/css3http://code.tutsplus.com/categories/html5http://code.tutsplus.com/categories/web-developmenthttp://code.tutsplus.com/categories/html-css -
7/22/2019 HTML 5 and CSS 3_ The Techniques You'll Soon Be Using - Tuts+ Code Tutorial.pdf
23/31
28/4/2014 HTML 5 and CSS 3: The Techniques You'll Soon Be Using - Tuts+ Code Tutorial
http://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708 23/31
608 Comments
Carlos Arbelaez
Hello, nice job. I would like to use it on my course at the university. With your permision, I
would like to translate the document to spanish and distribute it on my students with your
credits ?
Best wishes
Carlos Arbelaez
Rehan
Where can we find the images used???
Reinier Kaper
I'd suggest you take a close look at your outline, because this mark-up is far from nice.Don't get me wrong, HTML5 isn't as great as people pretend, simply because of the section,
article, aside, nav, etc elements. They imply new sections and are arguably useless...
Just a little example: you use an h2 for the blog article and an h2 for the intro section, but
Creating a WordPress Theme From Static HTML: Creating Template Files
18 Dec 2013 In the first part of this series, I showed you how to prepare your HTML and CSS files for
WordPre...
The Truth About Multiple H1 Tags in the HTML5 Era
17 Dec 2013 Whether you're a webmaster or a web designer, there's a question you've mos t likely
either asked ...
Creating a WordPress Theme From Static HTML: Preparing the Markup
13 Dec 2013 Last year I did a small (and admittedly very un-scientific) survey among other WordPress
develope...
http://code.tutsplus.com/tutorials/creating-a-wordpress-theme-from-static-html-preparing-the-markup--wp-33895http://code.tutsplus.com/tutorials/creating-a-wordpress-theme-from-static-html-preparing-the-markup--wp-33895http://code.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824http://code.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824http://code.tutsplus.com/tutorials/creating-a-wordpress-theme-from-static-html-creating-template-files--wp-33939http://code.tutsplus.com/tutorials/creating-a-wordpress-theme-from-static-html-creating-template-files--wp-33939http://disqus.com/reinierkaper/ -
7/22/2019 HTML 5 and CSS 3_ The Techniques You'll Soon Be Using - Tuts+ Code Tutorial.pdf
24/31
28/4/2014 HTML 5 and CSS 3: The Techniques You'll Soon Be Using - Tuts+ Code Tutorial
http://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708 24/31
because they are both within a section, they have the same weight in the outline.
Also, because you have the blog article in a section, it creates a new Untitled heading
(because the section itself implies this) which is not right.
Furthermore, I don't think you use the aside in the right way. Both Categories and Archives
should be in their own aside, because (again) an aside implies a new section and creates
an Untitled heading.
Don't get me wrong: HTML5 creates more issues with outlines than it solves, but if you
follow the current specs, you'll see that this is not really the right way to do things.
I also suggest using H5o, an HTML5 outliner snippet to see you outline, it really helps and
lets you see where you miss (implied) headings (think about all the poor screenreaders,
they go nuts over this).
cishemant
Nice one!! Can you explain me the difference between HTML5 and Microsoft Silverlight.
yacobi
Regarding the comments section, you put each comment wrapped in inside
. But a comment section is usually an ordered list with somes inside.
Jorge L Camacho
A million thanks, you gave me a playground. Hundreds of doubt out of my head. I'm a
newbie with no education about creating websites and end exactly as you exposed. The two
columns not working in IExplorer but it works fine in Firefox.
wondering
Hmm, isn't this pretty much identical to one of the THEMES from Coffee Cop HTML creator
who borrowed from whom I wonder?
Xxobit
Great tutorial! It helped me a lot, especially the content part. You make it so damn easy
compared with what I was tought. Thanks again for this tut.
Randallg
Awesome article. Thanks!
p.s. "You longer have to do client-side" should be "You no longer have to do client-side"
http://disqus.com/xxobit/http://disqus.com/jorgelcamacho/http://disqus.com/cishemant/http://www.talentsfromindia.com/silverlight-developer-programmer.html -
7/22/2019 HTML 5 and CSS 3_ The Techniques You'll Soon Be Using - Tuts+ Code Tutorial.pdf
25/31
28/4/2014 HTML 5 and CSS 3: The Techniques You'll Soon Be Using - Tuts+ Code Tutorial
http://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708 25/31
Niranjan
Really, good job!
Jade
I believe you have used the section, article and aside tag in the wrong context
It should be used like this instead
Blah
Content
Blah
Content
With the aside is generally used as content related to the main content in the page, not for a
nav which is unrelated.
I got lots of info of correct way to use the new HTML5 tags from http://html5doctor.com/
Rusty
Great article BUT. How on earth on the comments section do you manage to get the
headings to the left aligned and the comments to the right wrapped ?? Been trying for ages
but cannot do it. Can you put the CSS up as well please ??? Driving me mad trying to do it.
:-(
Fett'e Brown
Thank you for this code. It gave me the concept that I needed in order to complete my
assignment.
Ghid turistic
Now that is the way to make a tutorial. Soon enought I will star learning css/ html and I'll be
back on this tutorial for sure
Dennis
This is the future, in the current. I like that one day browsers will start page zooming, the %
are starting to kinda get tiring.
Mulberry Alexa Bag This is a great post that i have to say like this because it is a truth. Thankyou sincerely for
your great showing with us.
http://html5doctor.com/ -
7/22/2019 HTML 5 and CSS 3_ The Techniques You'll Soon Be Using - Tuts+ Code Tutorial.pdf
26/31
28/4/2014 HTML 5 and CSS 3: The Techniques You'll Soon Be Using - Tuts+ Code Tutorial
http://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708 26/31
yacobi
Cool, but regarding the comments section, you put each comment wrapped in inside . But a
comment section is usually an ordered list with somes inside!
Jecson Singh
Wow so good information about HTML5 and Css3 thanks a lot for sharing. Here i also wantto share a very best site where anyone can share their site to get better responses in their
business.
http://cssxperts.com/
Stijn Jasper
In the index.html file you are referring to master.css however I can't seem to find that file on
this page to download. Can you put it up so I can take a look at the styling? Thank you!
M K D tutorials
nice article
Try this HTML Tutorials http://mkmovietrailer.blogspot.com/2013/09/html-tutorials.html
Definitely good tutorial,thanks
Techslate
Nice Post and good article. I would be happy if you could cover some aspect on how it can
be used for mobile friendly sites.
suleman
Thanks for the tutorial it help very much for creating the template for my website
"scriptzguru.com"
anayasteven
i think that you have to explain HTML 5 and other application in details.
http://www.adwebstudio.com/adv...
tarek hasan
Undoubtedly, that post is very effective and helpful than I found in http://vectology.com.
Really excellent tips and tutorials.
http://disqus.com/tarekhasan/http://disqus.com/techslate/http://disqus.com/disqus_HdImd5zLb7/http://disqus.com/stijnjasper/http://disqus.com/jecsonsingh/http://vectology.com/http://www.adwebstudio.com/advertising-agency-in-sharjah/http://scriptzguru.com/http://mkmovietrailer.blogspot.com/2013/09/html-tutorials.htmlhttp://cssxperts.com/ -
7/22/2019 HTML 5 and CSS 3_ The Techniques You'll Soon Be Using - Tuts+ Code Tutorial.pdf
27/31
28/4/2014 HTML 5 and CSS 3: The Techniques You'll Soon Be Using - Tuts+ Code Tutorial
http://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708 27/31
MP
You are mixing and matching old technology (LISTS) with new (NAV)!
They are two completely different things.
Nav bars are easily (and obviously) styled like this
nav {}
nav a {}
nav a:hover {}
They do not need and tags. Those belong to lists.
Chris
This layout doesn't work in Internet Explore. How come?
Nick
Some say that an unordered list inside a nav tag is redundant.
Rajkumar
Good
Sikkander
Nice tutorial....
amul
I'd have to agree with others here and point out that some of the material here is dated nowin oct 2012. However the basics still apply...
Browsers have been iterating rapidly so by the very nature the technology documentation
will always go out of date.
Amir Rachum
How do handle sticky footer business?
Randallg
'There are new two new types of inputs" probably should be "There are now two new types
of inputs"?
http://disqus.com/disqus_Vd1n7klsF0/ -
7/22/2019 HTML 5 and CSS 3_ The Techniques You'll Soon Be Using - Tuts+ Code Tutorial.pdf
28/31
28/4/2014 HTML 5 and CSS 3: The Techniques You'll Soon Be Using - Tuts+ Code Tutorial
http://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708 28/31
Mjs34
When you get to section 9. Styling the Content Area and Sidebar you do not indicate where
the code goes in the html doc. When I check the source code of the final results page it
differs from what you had me code in the html portion of the tutorial. Maybe you make
adjustments further along in the tut, but it can be very confusing for a novice. Makes me
wonder if it's worth the money I pay.
Sudha
Thanks to share your knowledge to all. I got more ideas from this. I am new one to web
design. Keep it this kind of sharing.
Deepu
Thanks.
its very easy to understand both html5 and css3 for new guys....
MFMOsem
this is a definitely good starting point for me! thank you
lucho gizza
Excelente tutorial, good tutorial! thanks!
FoxaZ
That's an amazing tutorial. Very helpful!
rraqi
very nice :D
if you want help for html 5 check out this page
THENX
N'Djamena M.
Thanks for this tutorial. I'm kind of on the fence about HTML5/CSS3. It seems to be really
growing in popularity these days but I'm not sure I want to invest time in learning it while it'sstill not implemented across the major browsers. Cross-browser compatibility is very
important for me.
http://helphtml5.blogspot.com/ -
7/22/2019 HTML 5 and CSS 3_ The Techniques You'll Soon Be Using - Tuts+ Code Tutorial.pdf
29/31
28/4/2014 HTML 5 and CSS 3: The Techniques You'll Soon Be Using - Tuts+ Code Tutorial
http://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708 29/31
Asif Khan
Nice Tuts ......it very Help Ful
gutoLee
Nice tutorial! Thank you! But I'm wonder why you are presenting css properties that don't
have yet implemented in most browers? It would'nt be more nice if you've covered stuffs100% functional in every browser.
uploadpic
Thank you for this article, I'm inspired now with the new elements.
Hein
This is great post!
Ricardo Nunes
That's a very good beginners tutorial!
daxuky
Nice work dude! I've started learning HTML5 and this tuto have helped me a lot!
Umair Ulhaque
Nicely written with comprehensive guidelines.. I am just moving to html5 and css3 it was a
good start for me to make use of new elements thanks to the author
Rollin Shultz
It is very nice. You are using the new HTML tags , I have adopted and which I find
convenient for eliminating div IDs. I did this build with your code and images, and I played
with it a bit. I did a gradient background in place of your background and if you try it I bet you
will like it.
background: #C0C0C0; /* Old browsers */
background: -moz-linear-gradient(top, #C0C0C0 0%, #ededed 53%, #f9f9f9 100%); /*
FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C0C0C0), color-
stop(53%,#ededed), color-stop(100%,#f9f9f9)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #C0C0C0 0%,#ededed 53%,#f9f9f9 100%); /*
Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #C0C0C0 0%,#ededed 53%,#f9f9f9 100%); /* Opera
11.10+ */
-
7/22/2019 HTML 5 and CSS 3_ The Techniques You'll Soon Be Using - Tuts+ Code Tutorial.pdf
30/31
28/4/2014 HTML 5 and CSS 3: The Techniques You'll Soon Be Using - Tuts+ Code Tutorial
http://code.tutsplus.com/tutorials/html-5-and-css-3-the-techniques-youll-soon-be-using--net-5708 30/31
Teaching skills to millions worldwide.
Design & Illustration Code Web Design Music & Audio Photography
3D & Motion Graphics Game Development Computer Skills Crafts & DIY
Business
ac groun : -ms- near-gra en op, , e e e , ;
background: linear-gradient(top, #C0C0C0 0%,#ededed 53%,#f9f9f9 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C0C0C0',
endColorstr='#f9f9f9',GradientType=0 ); /* IE6-9 */
- - -
Adve rtisement
About Us
FAQ
Blog
Write for Us
Advertise
Suggestions
Privacy Policy
Terms & Conditions
https://plus.google.com/108971748263060947124/postshttps://twitter.com/tutsplushttps://www.facebook.com/tutsplushttp://tutorials.tutsplus.com/terms-and-conditionshttp://tutorials.tutsplus.com/privacy-policyhttp://tutorials.tutsplus.com/suggestionshttp://tutorials.tutsplus.com/advertisehttp://tutorials.tutsplus.com/write-for-ushttp://blog.tutsplus.com/http://tutorials.tutsplus.com/faqhttp://tutorials.tutsplus.com/abouthttp://business.tutsplus.com/http://crafts.tutsplus.com/http://computers.tutsplus.com/http://gamedevelopment.tutsplus.com/http://cgi.tutsplus.com/http://photography.tutsplus.com/http://music.tutsplus.com/http://webdesign.tutsplus.com/http://code.tutsplus.com/http://design.tutsplus.com/ -
7/22/2019 HTML 5 and CSS 3_ The Techniques You'll Soon Be Using - Tuts+ Code Tutorial.pdf
31/31
28/4/2014 HTML 5 and CSS 3: The Techniques You'll Soon Be Using - Tuts+ Code Tutorial
2013 Envato Pty Ltd.
http://www.envato.com/