CSS Design
Ranked #3,468 in Internet, #194,381 overall | Donates to Squidoo Charity Fund
An Introduction to HTML5
When I first wrote this lens, XHTML was the web markup language of choice. Web coders benefitted from the structure XHTML provided. Writing well-formed markup meant using lower case for elements, closing all tags (both non-empty and empty) and shunning deprecated elements. Code validators that showed zero errors made us comfortable in the fact that we were following standards.
Then HTML5 came along and told us not to worry so much. Well, not entirely. But they did drastically shorten the markup wherever possible. It took this completely forgettable doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
...and made it much more memorable:
<!DOCTYPE html>
This is just one of many examples where HTML5 simplifies the markup, but more on that later.
HTML5 is more backward compatible than XHTML. Elements formerly labeled deprecated are now simply called obsolete. You can use these elements, yet your page will be considered "non-conforming".
One of the biggest benefits of using HTML5 is the new semantic elements it uses. Examples include header, footer, article and nav. There are more, but you'll have to read on to find out what they are.
As you can imagine, IE browser versions earlier than 9 will handle these poorly, but there are workarounds. These will be explained in greater detail below.
Then HTML5 came along and told us not to worry so much. Well, not entirely. But they did drastically shorten the markup wherever possible. It took this completely forgettable doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
...and made it much more memorable:
<!DOCTYPE html>
This is just one of many examples where HTML5 simplifies the markup, but more on that later.
HTML5 is more backward compatible than XHTML. Elements formerly labeled deprecated are now simply called obsolete. You can use these elements, yet your page will be considered "non-conforming".
One of the biggest benefits of using HTML5 is the new semantic elements it uses. Examples include header, footer, article and nav. There are more, but you'll have to read on to find out what they are.
As you can imagine, IE browser versions earlier than 9 will handle these poorly, but there are workarounds. These will be explained in greater detail below.
Contents at a Glance
New Semantic Elements
The HTML5 spec defines a number of new semantic elements.
-
<section>
Use this element to group thematic content. This might remind you of the div, but there is a big difference: div elements are not semantic and tell you nothing about the content within. This element often includes a header.
spec -
<article>
The article element should be used for self-contained content available for syndication. As is the case with the section element, a header usually accompanies an article. There is much discussion about when one should use section or article to organize content. Louis Lazarus does a great job explaining the differences between these two elements.
spec -
<header>
According to the spec, the header element "represents a group of introductory or navigational aids". Although this element is intended to include a heading (such as h1-h6), this is not a requirement. While most of us equate the term header with a web page's masthead, this element can (and should) be used within the content of the page.
spec -
<footer>
Like the header, footer does not simply refer to the bottom of the web page. Footer should be used to relay information about its containing element (author, related links, copyright).
spec -
<nav>
The nav element should contain major blocks of navigation. However, since it's common practice for footers to contain simplified site navigation, no nav element is required for those menus.
spec -
<aside>
This element is used for content tangentially related to the content in which it's placed, such as sidebars and pull quotes. You should use the aside element if it meets these criteria, regardless of where it's physically placed on the page.
spec -
<mark>
Use the mark element to highlight text for reference purposes. A common usage is in search results where the query is highlighted within the results list.
spec -
<time>
From the time element specification: "The time element represents either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset."
spec
Amazon XHTML Titles
Learn XHTML
Dump font face
Separate content from display using CSS
Allow your site's visitors to experience pages that load quickly the way you intended. Follow these simple rules to get started with style sheets.
- 1Never use a font tag again. All fonts (and colors, backgrounds, borders, padding, etc.) should be defined in an external style sheet. This allows you to make changes to the appearance of your entire site by editing one document.
- 2Forget using tables as a layout device. Tables are great for displaying tabular data, but they are woefully inadequate as a design tool. How many times have we all gotten lost in a never-ending maze of nested tables? Using divs and CSS positioning, designers have learned to blow the doors off old design limitations.
- 3Just as we did with our XHTML, we need to validate our CSS: jigsaw.w3.org/css-validator/
CSS Texts
Design Software
Can you imagine working without these titles?
Dreamweaver and Photoshop are a necessity for me. The latter was always an obvious choice, but I can't say the same for the former. I used to code all my sites using Notepad. Every link, every tag, every table cell was done from scratch -- it was my badge of honor. Then I got smart and bought Dreamweaver. My productivity went way up. You'll definitely make back the money you spend.
There will be sticker shock when you buy the suites, but you will get what you pay for. Buying just two of the products included in either of the suites will cost you more than if you went all in. For those wanting an all-in-one purchase, the Adobe/Macromedia Web Bundle is a designer's dream.
There will be sticker shock when you buy the suites, but you will get what you pay for. Buying just two of the products included in either of the suites will cost you more than if you went all in. For those wanting an all-in-one purchase, the Adobe/Macromedia Web Bundle is a designer's dream.
meyerweb.com
CSS guru
Meyer's CSS Texts
No frills, just solutions
Choosing Colors
Looking for inspiration
I'm often asked by young designers how I choose colors. My response is usually "the client" (why do they always pick blue?). But selecting a palette can be a daunting task. It was actually easier when we were limited to 216 web-safe colors, but the results were often common and uninspired.
Now we have millions of colors from which to choose. With so many options, how do we come up with workable palettes? Setting aside the many online sources for a minute, inspiration can come from our everyday lives. Nature is a great place to start: trees in autumn can provide us with a warm color set; rose gardens offer brilliant reds, yellows and greens; sunsets have a variety of colors that change moment to moment. Paintings, prints and photographs should also stimulate your brain. Finally, inspiration can also come from the mundane; we simply need to open our eyes to see it.
As mentioned above, there are some great online resources to aid in your search for colors. Sites like ColorBlender and ColorSchemer Online allow you to manipulate hex values by moving RBG sliders or inputting values into appropriate fields. ColorSchemer also provides palettes supplied by readers and more advanced color selection tools available for download.
Finally, other websites can provide inspiration. Using the Firefox Colorzilla extension, we can find exact color values without taking a screen capture and opening Photoshop. Use these other sites as a source of inspiration, but don't copy another designer's work. At least change the hex values a little bit!
Now we have millions of colors from which to choose. With so many options, how do we come up with workable palettes? Setting aside the many online sources for a minute, inspiration can come from our everyday lives. Nature is a great place to start: trees in autumn can provide us with a warm color set; rose gardens offer brilliant reds, yellows and greens; sunsets have a variety of colors that change moment to moment. Paintings, prints and photographs should also stimulate your brain. Finally, inspiration can also come from the mundane; we simply need to open our eyes to see it.
As mentioned above, there are some great online resources to aid in your search for colors. Sites like ColorBlender and ColorSchemer Online allow you to manipulate hex values by moving RBG sliders or inputting values into appropriate fields. ColorSchemer also provides palettes supplied by readers and more advanced color selection tools available for download.
Finally, other websites can provide inspiration. Using the Firefox Colorzilla extension, we can find exact color values without taking a screen capture and opening Photoshop. Use these other sites as a source of inspiration, but don't copy another designer's work. At least change the hex values a little bit!
Amazon's Books on Color
mezzoblue.com
Zen Garden creator Dave Shea
Links
Just some of many I frequent
- CSS Zen Garden
- A demonstration of what can be accomplished visually through CSS-based design.
- Eric Meyer
- CSS guru.
- Jeffrey Zeldman
- Author of Designing with Web Standards and founder of A List Apart (see below).
- A List Apart
- A List Apart Magazine explores the design, development, and meaning of web content, with a special focus on techniques and benefits of designing with web standards.
- mezzoblue.com
- Home to Dave Shea, creator of the CSS Zen Garden.
- lynda.com
- I\'ve learned a lot from Lynda\'s books on html design and Photoshop. Her online library is a great tool for designers and developers alike.
- World Wide Web Consortium
- The World Wide Web Consortium (W3C) develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential.
- W3 Schools
- Fantastic (and free) online resource covering a wide range of web-related topics.
Zeldman's Headlines
Zeldman's Books
CSS Tweets
Have Anything to Add?
-
-
Chardoo
May 31, 2011 @ 3:46 pm | delete
- The Zen Garden is very nice
-
-
-
JoyfulPamela
Mar 17, 2011 @ 7:37 pm | delete
- I don't quite get CSS, but I'm grateful that there are many people like you who do and help the rest of us. =D
-
-
-
KokoTravel
Jan 9, 2011 @ 6:45 pm | delete
- Trying to learn CSS after knowing a bit of html sometimes gets confusing. Thanks for this lens.
-
-
-
dlardon
Dec 16, 2010 @ 5:15 am | delete
- Useful!
-
-
-
joshuabrown Oct 14, 2009 @ 4:45 pm | in reply to goldenecho | delete
- The line break tag closes immediately -- <br />
Tags that don't wrap other content simply need a forward slash before the close bracket.
-
-
-
RealNerd
Nov 12, 2009 @ 2:23 pm | delete
- Great example, thanks!
-
-
-
goldenecho
Oct 9, 2009 @ 4:08 pm | delete
- I don't understand the whole closing a BR tag. Where does it close? Immediately? After the content? HUH? It was so simple when no closing tag was required, and I really wish THAT was the standard because it would make so much more sense. But alas, I don't make the rules.
-
-
-
Marc_Sandford
Apr 20, 2009 @ 11:47 am | delete
- Very useful. I just book marked your lens. This is exactly the sort of info I need. I'm slowly picking up CSS, mostly for changing the look of my wordpress blogs. Many wordpress themes aren't very flexible, so it helps to know how to code.
-
HTML5 vs. XHTML
When I first wrote this lens, XHTML was the web markup language of choice. Web coders benefitted from the structure XHTML provided. Writing well-formed markup meant using lower case for elements, closing all tags (both non-empty and empty) and shunning deprecated elements. Code validators that showed zero errors made us comfortable in the fact that we were following standards.
Then HTML5 came along and told us not to worry so much. Well, not entirely. But they did drastically shorten the markup wherever possible. It took this completely forgettable doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
...and made it much more memorable:
<!DOCTYPE html>
This is just one of many examples where HTML5 simplifies the markup, but more on that later.
HTML5 is more backward compatible than XHTML. Elements formerly labeled deprecated are now simply called obsolete. You can use these elements, yet your page will be considered "non-conforming".
One of the biggest benefits of using HTML5 is the new semantic elements it uses. Examples include header, footer, article and nav. There are more, but you'll have to read on to find out what they are.
As you can imagine, IE browser versions earlier than 9 will handle these poorly, but there are workarounds. These will be explained in greater detail below.
Then HTML5 came along and told us not to worry so much. Well, not entirely. But they did drastically shorten the markup wherever possible. It took this completely forgettable doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
...and made it much more memorable:
<!DOCTYPE html>
This is just one of many examples where HTML5 simplifies the markup, but more on that later.
HTML5 is more backward compatible than XHTML. Elements formerly labeled deprecated are now simply called obsolete. You can use these elements, yet your page will be considered "non-conforming".
One of the biggest benefits of using HTML5 is the new semantic elements it uses. Examples include header, footer, article and nav. There are more, but you'll have to read on to find out what they are.
As you can imagine, IE browser versions earlier than 9 will handle these poorly, but there are workarounds. These will be explained in greater detail below.
by joshuabrown
I'm a dad, husband, css geek, and bass trombonist. I design and code for Squidoo.
- 5 featured lenses
- Winner of 12 trophies!
- Top lens » Great HBO Miniseries
Feeling creative?
Create a Lens!
Explore related pages
- How To Create An Impressive Writing Website How To Create An Impressive Writing Website
- Airg On Firefox Airg On Firefox
- Is Mozilla Firefox better than Internet Explorer? Is Mozilla Firefox better than Internet Explorer?
- Firefox vs Opera Firefox vs Opera
- Create Stunning CSS Backgrounds with Images Create Stunning CSS Backgrounds with Images
- 10 Firefox Plugins for Lazy Afternoons 10 Firefox Plugins for Lazy Afternoons
PHP for Designers
Codin' for the Web: A Designer's Guide to Developing Dynamic Web Sites
Amazon Price: $37.98 (as of 05/31/2012)
I tried quite a few PHP texts before I found this one. Wyke-Smith's book quickly became my favorite.
Zeldman Teaches Solid XHTML/CSS
Designing with Web Standards (3rd Edition)
Amazon Price: $24.96 (as of 05/30/2012)
Learn to build web sites the right way.
Featured Lenses
