Rc019 corecss1 online

#19
tech facts at your fingertips
Get More Refcardz! Visit refcardz.com

CONTENTS INCLUDE:

Core CSS: Part I
n
CSS Rationale and Use
n
Understanding Style Rule Syntax
n
Inheritance
n
Style Sheet Types
Application Hierarchy and Sort Order
By Molly E. Holzschlag
n

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

looking to create rock-solid applications.
and strengthen your professional ability to work with CSS.
A Separate Piece
CSS RATIONALE AND USE The term for sites designed using table-based layouts and HTML
presentation rather than CSS are referred to as being authored
The idea behind CSS is not a new one. We've seen the separation in presentational HTML. This means that the presentation (the
of presentation before in desktop publishing, where master style design, style, and layout) isn’t separated from the markup
sheets can be created to control the layout, typefaces and colors (content with basic formatting).
used in a given design. Cascading Style Sheets were conceived Consider this header, which contains elements and attributes
to do exactly that: Remove the style from the document and place that define presentation:
it separately from the code to be styled.
<h1><font size=”5” color=”red” face=”Arial,
The benefits, when used carefully, can be outstanding. Some Helvetica, sans-serif”>Welcome!</font></h1>
benefits of using style sheets include: Using presentational HTML, every time you need a new font size,
n Design flexibility color or face it has to be explicitly defined in that document. And
then redefined. In CSS, we can set up presentation and have
More image options →
Better typographic control
Far more flexible layout options
Print design support Get More Refcardz
Handheld device design support (They’re free!)
Easier site maintenance Authoritative content
Core CSS: Part I

n n

One style sheet, infinite pages n Designed for developers
Design changes are very easy n Written by top experts
Changes can be made quickly n Latest tools & technologies
Reduces time to launch n Hot tips & examples
n Measurable returns n Bonus content online
Faster loading documents n New issue every 1-2 weeks
Far smaller documents
User experience improves Subscribe Now for FREE!
Accessibility improves Refcardz.com
SEO (search engine optimization) improves

DZone, Inc. | www.dzone.com

2
Core CSS: Part I

A Separate Piece, continued Learning and Implementation Curves, continued
it used not only multiple times within a given document, but At first glance it’s easy to think that these are simple issues and
across literally millions of documents. So, if I instead had a quickly remedied. But it is undeniable that the lack of clarity
separate style sheet with this rule: in terminology has led to a steeper learning curve than using
h1 {font-size: 80%; color: red; font-family:
a table (grid) and then presentational elements to work with
Arial, Helvetica, sans-serif;} that grid—much more intuitive to designers who were taught
traditional grid, color and typographic design.
Every single document I want to apply this style to can be
attached to this sheet. Then, if I need to change a million
documents with an h1 of red to an h1 of green, I simply go If you use Dreamweaver, avoid using Dream-
to the one style sheet, change the color in one location, one Hot weaver's Layers (a term that's been dropped
time, save the style and instantly all the documents connected Tip from CS4, thankfully), as they use style in a
to the sheet will now have green h1 headers (this is the point less-than best case scenario. While this feature
where you tell the boss it’s going to take all day to make the can be helpful for wireframing, it can be downright disas-
change, grab your stuff, and head to the beach)! trous in live sites. Review topics such as positioning and
So from the get-go the principles of CSS suggest that we CSS floats for alternatives to this feature.
gain many benefits from separating the technology layers
that make up front end Web development: Document, That there’s a lack of consistent and well-paced implementation
presentation, behavior (Figure 1). in Web browsers and other user software is sadly well known,
making actual use of CSS a combination of good code riddled
with workarounds, hacks, filters and JavaScript patchwork to
HTML CSS JavaScript repair problems across browser and browser versions. Error
handling is a particularly frustrating part of this, particularly
as Web browsers implement different versions of different
The three-layer cake of front end development specifications at different times (Figure 2).

Figure 1. Document (markup+content); Presentation (CSS);
Behavior (JavaScript)

Of course, just because we “bake” our three-layered cake
separately, it all has to come together and just be “cake” at
some point! This is where standards-based design and best
practices come significantly into play, and of course those skills
rely in turn on quality learning in terms of both the languages
and Web browsers we use. Figure 2. Error handling in browsers. In the first instance, if there’s
a mistake in the rule, the browser simply drops the erroneous rule
Learning and Implementation Curves and reverts to the browser style. In the second instance, the browser
instead makes an attempt to find a nearest value and apply the color
However, there’s been difficulty along the road to adopting,
to nearly disastrous results.
learning and managing CSS. This difficulty is due to a number
of influences, but two of the major concerns are a steep This is why learning as much as you can about how CSS works
learning curve and lack of consistent browser implementation is so empowering. As you begin to understand that most
of specifications. frustration with CSS is not your fault and learn some techniques
to work with some of CSS’s complexities, you’ll be able to
Especially of challenge for visual designers is that CSS nomenclature reduce the frustration caused by certain browser differences,
and concepts are programmatic rather than graphic-design CSS implementation, and be able to focus on the use of CSS
oriented (Table 2) and there are no tools that can fully replace for design and document/application management.
designer understanding. A fun, if not frightening metaphor
would be to ask graphic designers if they code in postscript, the UNDERSTANDING STYLE RULE SYNTAX
underlying language for vector drawing in Adobe products.
We’ll take a look at rule syntax here, which will set you up to
CSS Term Graphic Design Meaning
quickly understand the basic structure of CSS as we discuss
line-height Leading Space between lines
rules in the context of other language issues.
font-family Typeface Used to describe specific type faces
such as Helvetica A CSS rule contains at least one selector and at least one
color Type color The color of the text characters declaration within a declaration block. A declaration is made up
layer Multiple meanings For Dreamweaver users, a layer is actually of a property name and a corresponding value. Declaration blocks
within software tools an absolutely positioned element. are defined by curly brackets “{}” and declarations are separated
#FFF White White with a semicolon:
Table 2. Brief Comparison of terminology in visual design and CSS h1 {color: red;}
→


3
Core CSS: Part I

Understanding Style Rule Syntax, continued Inheritance, continued
This rule in turn has the browser find a match to the h1 selector
and give it a color of red (Figure 3).

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.

STYLE SHEET TYPES

There are three primary types of style sheets as follows:
n Browser. The browser style sheet is the default style
Figure 4. Adding additional declarations to the rule. of a given browser. It is either an actual .css file such
as we find in Mozilla browsers, or hard coded into the
Grammar Purpose Examples software. Browser styles are different between browsers
Selector A selector chooses (“selects”) h1
and versions, so being aware of them is extremely
an element within markup #content important. Wherever you do not supply a style, the
documents to be styled. There
are many selector types in CSS
.module browser style will be used instead.
2.1, and even more to come in :hover
future years.
n User. User style sheets are a great concept that has
Declaration A declaration is made up of color: red; unfortunately not been brought to bear on a large scale.
a CSS property and a related font-variant: small caps; User styles are meant for accessibility purposes. My aging
property value. CSS properties
are numerous and define various
margin: 0 0 0; eyes require larger text and higher contrast, I can write
background–image:(my.jpg);
styles as they relate to colors, a quick style sheet to address my issues and apply it via
text, positioning, margins,
padding, and positioning. A the browser.
declaration can have as many
property and value pairs as you n Author. The author is you! That is, author styles are those
like, contained as a group in a
declaration block and separated
styles that the developer or designer is in charge of
with a semi-colon “;” creating to create the design and management scenarios
Declaration Multiple declarations related to a {color: red; font-variant: for a given Web site or application.
Block given selector are referred to as small caps; margin: 0 0 0;
a Declaration Block. background –image:
(my.jpg); }

CSS Rule A selector plus a declaration
At some point you might have come across the
or declaration block makes a
.module {color: red; font-
variant: small caps; margin: Hot !important (referred to as “bang important”)
CSS rule. 0 0 0; background –image:
(my.jpg); }
Tip keywords. The proper use for !important is to
Style Sheet Any set of style rules (See “Style Sheet Types” later in
create a balance between author and user style
this reference) sheets, a necessity for accessibility purposes. If used in an
author style sheet but not a user style sheet, the author’s
Table 3. Rule Syntax in CSS
rule is considered to have more weight and therefore will
Once again, bear in mind that there are many selector, apply. Because of this, !important is useful only in two places:
property, and property value types. You’ll work with many As a diagnostic tool which you remove from the declaration
of them within the series, and be sure to look for the online after debugging a problem; and in a user style sheet.
references provided so you’ll have plenty of resources. Otherwise, please avoid usage at all costs.

INHERITANCE Author Style Sheets by Type
There are three types of author style sheets: Inline, embedded
It’s important to know that many properties and associated values
and linked (external). Each is authored differently and has
are inherited. It’s a fairly simplistic concept, simply relate it to what
different applications, benefits, and concerns.
you know about inheritance in living beings. I have my mother’s
curly hair, the shape of my father’s eyes. And, just as we could Inline Style
map out a family tree and see where some of those features came Inline style is style that is used directly in the markup document
from, so can we use the document tree to do the same (Figure 5). to style one discrete element. No matter what other style sheets
→


4
Core CSS: Part I

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.

Embedded As with inline styles, if you’re Though not ideal, embedded
style for trying to isolate why a given style can be used to debug
Figure 6. Applying style to a discrete element using inline style. debugging style isn’t applying, you can use and find conflicts in the case of
and workflow embedded style to work through multiple style sheets. Workflow
purposes some conflicts. Another use advantages as described can
If you’re thinking “but that code really looks just like that I find helpful is that during be useful, the one caveat in
development, I like to work in all instances of professional
presentational markup!” give yourself a big pat on the back. one document, embedding my sites: Remove your embedded
In recent years, many people, including those at the W3C styles and building out the content styles out to appropriate
and markup all in the same place. external styles after you’re
responsible for advancing markup and CSS, have advised that done working, test, and you’re
using this technique isn’t really separating presentation from good to go.

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>


5
Core CSS: Part I

Rule Order, continued
APPLICATION HIERARCHY AND SORT ORDER
If you imagine all the rules within global.css expanding out,
Of course, most working Web developers and designers are well then the local.css expanding out, then the embedded style
aware that working with CSS just can’t be that straight forward! added onto that, you get one long style sheet. If somewhere in
There are many reasons why CSS is as broad in scope as it is, the first two I had conflicting rules that styled paragraphs using
but flexibility and power are two of the most credible reasons for the Geneva font, the sort order process will see the last style in
why you can approach a given problem with numerous solutions. that long sheet as Times. Therefore, Times will be used in all
With freedom comes responsibility, and the same is true for instances of p as defined within our scope with the exception
professional Web development. of the element containing the inline style. As mentioned earlier,
In order to visualize why CSS can quickly fall from powerful inline styles are more specific, and therefore will always “trump”
friend to chaotic foe, consider Figure 7. another style in a scenario like this.
Specificity
Fine Arts There is one final deal-breaker for the rules of Cascade and
Main Uni Building
sort, and that is the specificity of a given selector. I’ve kept the
examples here simple for a reason as selectors are complicated
and actually take up about a third of the Core CSS series.
Biology Psychology
Specificity is an algorithm with a broad base that allows an
author to create very specific rules. These rules often involve
a number of selector types, and are calculated based on the
Figure 7. Imagine a global style for the University itself. Then, each selectors in use in the rule. If a rule is found to be more specific
individual department wants its own identity. This is a very common than one that comes later in the sort order the more specific
large-organization issue, and one which inevitably leads to multiple rule is applied no matter where the rule resides in the sort.
styles all over the site, poorly documented and managed when in fact
some intelligent coordination could be used to manage the site’s Consider the following rule:
presentation much more efficiently.
#content p {font-family: Garamond;}
The Cascade This is a combination of an ID selector (#content) and an element
Revisiting the browser, user, author relationship, we can take selector (p). The space between the two selectors indicates a
a look at how rules “cascade” from one style sheet type to descendent. So, let’s say I have this rule in global.css. Because
another. Here’s the general rule of thumb: it is more specific, any paragraph that descends from an element
n All explicit styles override browser style with an ID of #content will now be in Garamond, not in Times.
n A user style sheet, when properly authored, will override Specificity is one of the terribly misunderstood and under-
author style taught portions of conflict resolution within a CSS application
n An inline style overrides a conflicting embedded style hierarchy. Understanding how to calculate specificity is easier if
n An embedded style overrides a conflicting linked style you have a table available to work through a given conflict, then
count up the types of selectors that exist in your rules in the
Rule Order exact order shown in Table 6.
The order in which rules are sorted becomes critical in resolving
conflicting rules. Many readers are likely to have heard “the rule Example Count # of Count # of Count # of
ID Selectors Class Selectors Element Selectors
closest to the content wins”— which is somewhat accurate but
ul 0, 0, 1
also a bit misleading.
#content ul li 1, 0, 2
Sort order, the term that is used to describe the sorting of #content ul li ul li 1, 0, 4
multiple CSS rules, is the process by which a Web browser sorts
Table 6. Calculating Specificity
the rules it is given. If we have a scenario where there are two
linked style sheets, an embedded sheet in the document in We can now see that the most specific rule is the last one.
question, and an inline style, the browser has to sort through Therefore, any list item style that is not as specific will not apply to a
those and resolve sort conflicts. Consider this XHTML : nested list item within the document area with an ID of “content”—
regardless of where that more specific rule resides in the sort.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> There’s one specific specificity exception here. Remember that I
<html xmlns="http://www/w3/org/TR/xhtml1"> mentioned inline style has the highest specificity? Table 7 shows
<head> how inline style comes into play:
<link rel=”stylesheet” type=”text/css” src=”style/global.css” />
Example Presence of Inline Count # of Count # of Count # of
<link rel=”stylesheet” type=”text/css” src=”style/local.css” /> style in element ID Selectors Class Selectors Element Selectors
<style type=”text/css”> ul 1, 0, 0, 1
p {font-family: Times;} #content 1, 1, 0, 2
ul li
</style>
#content ul 1, 1, 0, 4
</head> li ul li
<body>
Table 7. Specificity and presence of inline style
<p style=”font-family: Arial;”>Which font will this be?</p>
<p>What about this paragraph?</p> If t here are inline styles within the element, a count of 1 goes
</body> into the first (optional) column, skyrocketing the specificity of the
</html> given element. This is why inline style is really so powerful.


6
Core CSS: Part I

FIND MORE ONLINE NEXT STEPS

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

ABOUT THE AUTHOR RECOMMENDED BOOK

Molly E. Holzschlag With Spring Into HTML and
Molly E. Holzschlag is a well-known Web standards advocate, instructor, and CSS you'll master today's best
author. She is an Invited Expert to the W3C, and has served as Group Lead practices: the real nuts and bolts,
for the Web Standards Project (WaSP). She has written more than 30 books not theory or hooey. You'll learn
covering client-side development and design for the Web. Currently, Molly through dozens of focused HTML,
works to educate designers and developers on using Web technologies in
XHTML, and CSS examples:
practical ways to create highly sustainable, maintainable, accessible, interac-
crafted for simplicity and easy to
tive and beautiful Web sites for the global community. She consults with major companies and
adapt for your own projects.
organizations such as AOL, BBC, Microsoft, Yahoo! and many others in an effort to improve
standards support, workflow, solve interoperability concerns and address the long-term
management of highly interactive, large-scale sites. A popular and colorful individual, Molly
has a particular passion for people, blogs, and the use of technology for social progress. BUY NOW
Web Site books.dzone.com/books/spring-html-css
http://www.molly.com

Get More FREE Refcardz. Visit refcardz.com now!
Upcoming Refcardz: Available:
Core Seam Essential Ruby Core CSS: Part I

Core CSS: Part III Essential MySQL Struts2
JUnit and EasyMock Core .NET
Hibernate Search
Getting Started with MyEclipse Very First Steps in Flex
FREE
Equinox Spring Annotations C#

EMF Core Java Groovy
Core CSS: Part II NetBeans IDE 6.1 Java Editor
XML
PHP RSS and Atom
JSP Expression Language Getting Started with JPA GlassFish Application Server
ALM Best Practices JavaServer Faces Silverlight 2 Design Patterns
Published June 2008
HTML and XHTML Visit refcardz.com for a complete listing of available Refcardz.

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 4 million pages each month to
919.678.0300
more than 1.7 million software developers, architects and decision
Refcardz Feedback Welcome
makers. DZone offers something for everyone, including news, refcardz@dzone.com
$7.95

tutorials, cheatsheets, blogs, feature articles, source code and more.
Sponsorship Opportunities 9 781934 238189
“DZone is a developer’s dream,” says PC Magazine. sales@dzone.com
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.

Rc019 corecss1 online

More Related Content

Similar to Rc019 corecss1 online

Recently uploaded

Rc019 corecss1 online