RefCardz - Core CSS 1
RefCardz - Core CSS 1
com
tech facts at your fingertips
CONTENTS INCLUDE:
n
Hot Tips and more...
The first proposal for CSS was made by Håkom Wium Lie,
About CSS now CTO of Opera Software. He worked with Bert Bos to
co-author the first CSS specification, which believe it or not,
As Cascading Style Sheets mature as a language of design became a recommendation in 1996! By 1998 CSS 2.0 brought
and a tool of Web site and application management, a deep us richer options, as we find later in advancing versions CSS
understanding of how the language really works is essential. 2.1 and CSS 3.0.
However, most people have learned CSS the same way they’ve
learned HTML—by viewing source, copying template codes, Version Date Implementations
reading books and articles. While this “bootstrap” method of CSS 1.0 First proposed 1994, Still flawed CSS 1 portions in all
First specification in 1996 CSS browsers
learning is often the best way to find great techniques, it may
CSS 2.0 1998 No full implementation
not be the best for knowing how to manage, debug, customize
CSS 2.1 Not yet published as a Some close to complete
and even advance those techniques. complete specification implementations
CSS 3.0 (Modular) Certain modules are ahead Some CSS 3.0 features are
What our training hasn’t necessarily provided are the core of others in development implemented in versions of WebKit,
concepts within CSS. This is why the Core CSS series may contain Mozilla and Opera browsers
simple examples of things you already know. You’ll just get to Table 1. CSS Versions, Publication Dates and Implementation
know them better here! In this foundational reference card, you’ll
As CSS evolves, we find it becoming more and more important
find not only a bit of history and rationale for use, rule structure
for not only visual designers in terms of managing the esthetics
and syntax, but also a thorough resource as to the Cascade,
of the site, but technologists working on large web sites or
inheritance and specificity—core principles of CSS that will expand
www.dzone.com
n n
Figure 3. Using the h1 selector to apply the color “red” to a Figure 5. Inheritance. Imagine pouring a bucket of blue paint onto the
corresponding h1 element body element. Because color is an inheritable property, all text descend-
ing from body will be blue until another style overrides the inherited color.
Additional declarations are simply added to the block:
h1 {color: red; font-size: 80%; font-family: Verdana;}
Some properties are not inheritable, mostly those related to the
box model (margins, padding, box widths and so on), however
this rule asks the browser to match any h1, color it red, size it most are. Authors can tap into the power of inheritance by
relatively to 80% and apply the Verdana typeface (Figure 4): allowing inheritable properties to be inherited by their children
or descendents, or prohibit inheritance if so desired.
Author Style Sheets by Type, continued So as with inline style, we’re left looking at a type of style sheet
might be influencing the document, an inline style is considered that, while handy in some cases, doesn’t provide the benefits
more specific and therefore will apply to that element no matter we’re looking for. With the style element in the head portion
other conflicting styles. of the document, we do achieve slightly better separation of
presentation from our document’s content and structure, but
Consider the following paragraph element:
only in that same document. Table 5 provides some insights
<p>This paragraph is styled only by default
into the best ways to use embedded style.
browser styles</p>
The style is placed within the style attribute as a value: Scenario Issues Best Practice
<p style=”color: blue;”>This paragraph will now Embedded If you have a weblog with one Avoid in professional practice.
have a blue color.</p> style in small template document that controls
versus large your entire site, it is feasible to use
Figure 6 shows the comparison. Web sites embedded style in this instance.
However, in any professional site
or app development, avoid using
embedded style, for it, like inline
style, can contribute to confusion
when debugging.
the document at all! Embedded Where is that style? What if Avoid publishing embedded
style as “quick” you want to use it again more style sheets.
So what benefits does inline style really offer? Table 4 provides fixes (aka efficiently?
laziness)
some best practice insights as to when to avoid and when to
use inline style. Table 5. Best Practices: Embedded Style
Scenario Issues Best Practice
Linked (External Style)
Inline style If you have a very small site (10 Avoid use of inline style in
in small documents or less) the risk of losing almost all professional web Linked style is the true “holy grail” of style sheet types. It provides
versus large track of inline styles is less than if sites, and in particular those
Web sites you are working on very large sites, sites which are large or
us with the broadest application of style; allows us to manage
where it’s easy to lose track of inline expected to grow significantly. the presentational aspects of a site from a handful of style sheets;
styles unless they are meticulously
documented. And who does that? performance is faster due to the browser placing the styles into
Inline As the section on “specificity” will Use inline style when necessary memory (cache); and the worst of conflicts are avoided.
style for demonstrate, an inline style has the to debug. Typically, if you are
debugging highest specificity of any other rule able to apply a style inline that
purposes that might be trying to style the you’d been struggling with
Linked style sheets are separate text documents containing
element in question. If you are having before means you have rules your style rules, saved with a .css file extension and linked to
trouble getting to the heart of the conflicting somewhere that need
matter, dropping an inline style into the to be found. Find the conflicts, from the HTML documents you want to style using the link
element you are having trouble with repair the rules, and remove the
can help determine that in fact, there’s diagnostic inline style prior to element in the head portion of your markup document:
a conflict. publishing!
<head>
Inline style There are very few benefits from Despite the fact that I do this
as “quick” using inline style, but one I find that’s myself, it’s not something I’d <link rel=”stylesheet” type=”text/css” src=”style/
fixes (aka great is for quick fixes and blog recommend, particularly for
laziness) posts, which you can do on the fly. professional sites. global.css”>
Table 4. Best Practices: Inline Style </head>
Embedded Style In almost all cases, the linked style sheet is the one you will be
Embedded style is used to control the style of a single working with most.
document. In this case, the style element is used to define the
embedded area for the document’s style as follows:
Be careful with case matching between your
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
Hot
Tip CSS and HTML documents. If you create a selector
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns="http://www/w3/org/TR/xhtml1">
H1 in upper case, then it will only select h1s in
<head> upper case within the markup documents. Best practices
<title>Core CSS I: Examples</title> suggest keeping all HTML elements and attribute names
<style type="text/css"> in lower case (this is required in XHTML) and keeping CSS
p {color: blue;}
</style>
lower case as well, helping to avoid potential case-related
</head> conflicts. Also, while many programmers find camel case
<body> (class=”ModuleTwo”) intuitive, this also can cause case-
<p>In this case, all paragraphs on the page will matching problems, particularly in larger-scale sites,
turn blue.</p>
</body> particularly those being managed by multi-person teams.
</html>
The following online references will be helpful additions to the It should be clear that CSS has nuances that only time and
learning in this refcard. experience can reveal. Well, that and good references! Look
Reference URL for the remaining “Core CSS” series and go into depth with
CSS 2.1 Specification http://www.w3.org/TR/CSS21/ selectors, the box model, floats, positioning and the z-index.
CSS Discussion List http://www.css-discuss.org/ Sound exciting? I think so too!
CSS-D Wiki http://css-discuss.incutio.com/
(Lots of helpful information and links)
More Core CSS Refcardz:
CSS Zen Garden http://www.csszengarden.com/ Core CSS: Part II—October 2008
(Beautiful showcase site)
Core CSS: Part III—November 2008
Table 8. Online References
DZone, Inc.
1251 NW Maynard
ISBN-13: 978-1-934238-18-9
Cary, NC 27513
ISBN-10: 1-934238-18-X
50795
888.678.0399
DZone communities deliver over 3.5 million pages per month to 919.678.0300
more than 1.5 million software developers, architects and designers.
Refcardz Feedback Welcome
DZone offers something for every developer, including news, [email protected]
$7.95
tutorials, blogs, cheatsheets, feature articles, source code and more. Sponsorship Opportunities 9 781934 238189
“DZone is a developer’s dream,” says PC Magazine. [email protected]
Copyright © 2008 DZone, Inc. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, Version 1.0
photocopying, or otherwise, without prior written permission of the publisher. Reference: Spring Into HTML and CSS, Molly E. Holzschlag, Addison-Wesley Professional, April 22, 2005.