1. Writing Professional CSS
Manage presentation better on today’s web pages
Subramanyan Murali
Yahoo!
Frontend Engineer, YDN Evangelist
2. Overview
• The Web's Fall from Grace
• CSS to the Rescue
– Rich styling
• Ease of use
– Basic Rules
– Grouping
• Class and ID Selectors
• Attribute Selectors
• Using Document Structure
• Pseudo-Classes and Pseudo-Elements
Technical Presentation 2
3. Overview …
• Structure and the Cascade
– Inheritance
– Specificity
– Cascade
• Visual Formatting model
– Floating and Positioning
• Managing your CSS
– Markup and Page design
• References
Technical Presentation 3
5. Some Perspective
• HTML was a fairly lean language
– It was originally intended to be a structural markup
language, used to describe the various parts of a
document
• Very little was said about how those parts should be
displayed.
– The language wasn't concerned with appearance—it was
just a clean little markup scheme.
• Gradually, presentational aspects of the web were
explored in HTML
6. Some Perspective …
• As a result of these pressures, markup began to adapt
with presentational aspects
• Elements like <FONT> and <BIG> started to creep into
the language.
• Suddenly, a structural language started to become
presentational
• For this reason, CSS was invented.
Technical Presentation 6
8. Cascading style sheets
• The problem of polluting HTML with presentational
markup was not lost on the World Wide Web Consortium
(W3C)
• CSS was W3Cs quick solution to this growing problem
– In 1995, the consortium started publicizing a work-in-
progress called CSS
– By 1996, it had become a full Recommendation, with the
same weight as HTML itself
9. Cascading style sheets …
• CSS allows for much richer document appearances than
HTML ever allowed
• CSS allows for rich styling
– Set colors
– Background colors, images and transparency
– Creation of borders, increase or decrease of the space
around them
– Text decorations
– Formatting and display
Technical Presentation 9
11. Basic Rules
• Any HTML element on the page can be reached and
styled
• Properly written style sheets can can drastically reduce
a web author's workload
– centralize all of the style information for a page in one
place
• CSS also makes provisions for conflicting rules; these
provisions are collectively referred to as the cascade
• CSS is markup independent, element can be changed
but the style applied can remain
Technical Presentation 11
12. Basic Rules …
• Presentational attributes can be inherited from parent
• CSS made some presentational markup un-necessary
– <font>, <basefont>, <u>, <strike>, <s>, and <center>
• Separate CSS files for display and print media aid better
organization and presentation
• The CSS language is human readable and writable, and
expresses style in common desktop publishing
terminology
Technical Presentation 12
13. Grouping
• Each style property can be individually specified as
style attributes, or multiple style attributes can be
grouped
• Grouping can reduce the size of the style sheet, while
making it concise and some times more readable
• Grouped styles can be individually over-ridden
• CSS selectors can be grouped as well
h1, h2, h3 { color: #000;}
#someid, .someclass { margin:2px 4px; }
body { font: 18px Helvetica; }
Technical 13
Presentation
14. Lets dive in to details
Technical
14
Presentation
15. Selectors
• Primary advantages of CSS is its ability to easily apply a
set of styles to all elements of the same type identified
by a selector
• Document elements can be directly referenced in CSS
• Classes (.) are HTML attributes that can be used to
apply styles
– Classes can be duplicated
• IDs ( # ) are unique identifiers to the HTML element
– IDs have higher specificity value
16. Selectors …
• Document elements, Class and ID selectors can be used
together
• The period helps keep the class selector separate from
anything with which it might be combined an element
selector
• Classes can be nested in HTML
<div class=‘item warning’>some text</div>
.item { padding:5px; }
.warning { color: red; }
.item.warning{ font-weight:bold; }
Technical 16
Presentation
17. Attribute Selectors
• The syntax used in the previous two sections is
particular to HTML, SVG, and MathML documents
– In other markup languages, these class and ID selectors
may not be available
• To address this situation, CSS2 introduced attribute
selectors, which can be used to select elements based
on their attributes and the values of those attributes
– Simple Attribute Selection
– Selection Based on Exact Attribute Value
– Selection Based on Partial Attribute Values
– A Particular Attribute Selection Type
Technical 17
Presentation
18. Attribute Selectors …
• Attribute selectors are supported by
– Safari
– Opera
– Gecko-based browsers
– Not by Internet Explorer up through IE5/Mac and IE6/Win
– IE7 fully supports all CSS2.1 attribute selectors, as well as
a few CSS3 attribute selectors
• YUI 3 Node utility uses selector paradigm
Technical 18
Presentation
19. Simple Attribute Selectors
• h1[class] {color: silver;}
– will set style to all elements with a class attribute
• img[alt] { border: 3px solid red; }
• This strategy is very useful in XML documents, as XML
languages tend to have element and attribute names
that are very specific to their purpose
• planet[moons] {font-weight: bold;}
Technical 19
Presentation
20. Exact Attribute Value selectors
• In addition to selecting elements with attributes, you can
further narrow the selection process to encompass only
those elements whose attributes are a certain value
• form [name=‘testForm’] input { border: 1px solid; }
• Useful in XML as well
• planet[type=‘barren rocky’] {font-weight: bold;}
Technical 20
Presentation
21. Partial Attribute Values Selectors
• For any attribute that accepts a space-separated list of
words, it is possible to select based on the presence of
any one of those words
• The classic example in HTML is the class attribute,
which can accept one or more words as its value
• div [class ~= ‘warning’ ] { font-weight: bold; }
• span[class *= ‘yahoo_’] {font-style: italic;}
• span[class ^= ‘bar’] {background: silver;}
• span[class $= ‘y’] {font-weight: bold;}
Technical 21
Presentation
22. Particular Attribute Selection Type
• *[lang |= ‘en’] {color: white;}
• This rule will select any element whose lang attribute is
equal to en or begins with en-
• In general, the form [att |= ‘val’ ] can be used for any
attribute and its values.
• You can match all of these images with file name with
figure using the following selector:
img[src |= ‘figure’] {border: 1px solid gray;}
Technical 22
Presentation
23. Pseudo-Classes and Pseudo-Elements
• These selectors let you assign styles to structures that
don't necessarily exist in the document
– To phantom classes that are inferred by the state of
certain elements, or even by the state of the document
itself
• The styles are applied to pieces of a document based on
something other than the structure of the document
• Applying styles based on somewhat ephemeral
conditions that can't be predicted in advance
Technical 23
Presentation
24. Pseudo-Classes
• a:visited {color: red;}
• a#footer-copyright:link {font-weight: bold;}
• a#footer-copyright:visited {font-weight: normal;}
• Dynamic pseudo-classes
– CSS2.1 defines three pseudo-classes that can change a
document's appearance as a result of user behavior
– These dynamic pseudo-classes can be more widely
applied
• a:hover {color: red;}
• a:active {color: yellow;}
• input:focus { font-weight: bold; }
• body *:hover {background: yellow;}
Technical 24
Presentation
25. Pseudo-Classes …
• Dynamic pseudo-classes can cause some issues on the
page
• Consider
– a:link, a:visited {font-size: 13px;}
– a:hover {font-size: 20px;}
• A user agent that supports this behavior must redraw
the document while an anchor is in hover state
– This causes reflow which is not supported as per CSS
specification
Technical 25
Presentation
26. Pseudo-Classes …
• Static pseudo-class, :first-child, is used to select
elements that are the first children of other elements
• p:first-child {font-weight: bold;}
• li:first-child {text-transform: uppercase;}
Technical 26
Presentation
27. Pseudo-Elements
• Pseudo-elements insert fictional elements into a
document in order to achieve certain effects
• Four pseudo-elements are defined in CSS2.1
– styling the first letter
– styling the first line
– styling before elements
– styling after elements
• h2:first-letter {font-size: 200%;}
• p:first-line {color: purple;}
Technical 27
Presentation
28. Pseudo-Elements …
• In CSS2, the :first-letter and :first-line pseudo-elements
can be applied only to block-level elements
– In CSS2.1, :first-letter applies to all elements
• Using CSS, we can place arbitrary content before or
after a given element
– h2:before {content: ”>>quot;; color: #c0c0c0;}
– body:after {content: quot; The End.quot;;}
• This forms part of what is called generated content,
which adds presentation to the content in the DOM
• :after is heavily used to fix the wrapping of container
boxes to 2 floated elements
Technical 28
Presentation
30. Document Structure
body
div [class=‘nv’] div [class=‘bd’] div [class=‘ft’]
ul p [id=‘main’] cite
li li li h1
text text text text text text
31. Inheritance
• Inheritance is the mechanism by which styles are
body
applied not only to a specified element, but also to its
descendants
body {font-size: 13px; }
div [class=‘nv’] div [class=‘bd’] div [class=‘ft’]
div.bd #main h1 { font-size: 1.2em; }
div.nv ul li a:hover { font-size: 1.05em; color:#efefef; }
ul p [id=‘main’] cite
• Certain style attributes are not inherited like border
– Can be deduced based on common sense
li li h1
• Somelibrowsers have inheritance bugs
text text text text text text
Technical 31
Presentation
32. Cascade
• CSS is based on a method of causing styles to cascade
body
together
• As a thumb rule, we can say that the CSS style that is at
the closest to the HTML element will take precedence
div [class=‘nv’] div [class=‘bd’] div [class=‘ft’]
• Inline styles take maximum precedence
– !important can help styles to over write inline styles, but
its not recommended
ul p [id=‘main’] cite
• Cascade can be decided based on Specificity and
Inheritance of styles as well
li li li h1
text text text text text text
Technical 32
Presentation
33. Cascade …
• Understanding the CSS cascade along with Specificity
body
can be very important when code bases mix
• The style applied to a given element will be a computed
based on cascade, inheritance, nesting div [class=‘ft’]
div [class=‘nv’] div [class=‘bd’] and specificity
– It’s a union of various styles
– This is Style conflict resolution
ul p [id=‘main’] cite
li li li h1
text text text text text text
Technical 33
Presentation
34. Specificity
• Specificity : It is a process used to determine which
body
rules take precedence in CSS when several rules could
be applied to the same element in markup
• In simple terms means which style is more specific to
div [class=‘nv’] div [class=‘bd’] div [class=‘ft’]
the element under question
• Specificity calculations aid
ul p [id=‘main’] cite
Class,
Inline Style ID Pseudo-Class, Element
Selectors Selectors Attributes Selectors
Selectors
li li li h1
1000 100 10 1
text text text text text text
Technical 34
Presentation
35. Specificity …
• .nv ul li { … } body
• body > div.nv ul li { … }
• div.bd p { … }
• div.bd p#main h1 { … } div [class=‘bd’]
div [class=‘nv’] div [class=‘ft’]
• body div.ft cite { … }
ul p [id=‘main’] cite
li li li h1
text text text text text text
Technical 35
Presentation
37. Box Model
• CSS assumes that every element generates one or more
rectangular boxes, called element boxes
• Element box has a content area at its core
• The content area is surrounded by optional amounts of
padding, borders, and margins
– These are all considered optional as they all can be zero
• Every element is laid out with respect to its containing
block
– In a very real way, the containing block is the ‘layout
context’ for an element
38. Box Model …
<body>
<div>
<p>This is a paragraph</p>
</div>
</body> Containing Block
Margins
Border
Padding
Content area
• The layout of the ‘p’ is dependent on the layout of the ‘div’, which is
in turn dependent on the layout of the ‘body’
Technical 38
Presentation
39. Box Model …
• Normal flow
– The left-to-right, top-to-bottom rendering of text in
– The only way for an element to leave it is to be floated or
positioned
• Block Level Elements
• Inline Elements
• Non-Replaced Element
• Replaced Element
– Img is a example of replaced element as the images from
server replaces the HTML element
Technical 39
Presentation
40. Box model …
• Any padding, borders, or margins you specify are added
to the width value
– <p style=“width: 200px; padding: 10px; margin:
20px;”>wideness?</p>
• The total width now is 260px
• The Box model calculations across various user agents
causes lot of rendering issues
• Negative Margins will force the box to creep into the
neighboring box
Technical 40
Presentation
41. Flows
• Normal Flow
– Includes normal positioning and relative positioning for
block and inline boxes
• Float Model
– In the float model, a box is first laid out according to the
normal flow, then taken out of the flow and shifted to the
left or right as far as possible. Content may flow along the
side of a float
• Absolute Positioning
– In the absolute positioning model, a box is removed from
the normal flow entirely and assigned a position with
respect to a containing block. This has no impact on later
siblings.
Technical 41
Presentation
42. Positioning and Floating
• The idea behind positioning is to allows you to define
exactly where element boxes will appear relative to
where they would ordinarily be, or relative to a parent
element, another element, or even to the browser
window itself
• Positioning models will alter the normal flow of the
element under question
– Absolute
– Relative
– Fixed
– Static
Technical 42
Presentation
43. Positioning and Floating …
• A floated element is removed from the normal flow of
the document, although it still affects the layout
– Other content “flows around” it
• Floating replaced elements with just margins will ensure
that the space will be occupied as much as the margins/
border specified
– A image with Margin 20px will occupy 40px of space even
if the image is not loaded
• Floating a nonreplaced element must have a width
attribute
– Else the element's width will tend toward zero
Technical 43
Presentation
44. Positioning and Floating …
• If there are 2 floated elements, then the containing block
will assume that it does not contain any element, and
hence the Height will result to Zero
– Clearing the floats will result in proper height calculation
Technical 44
Presentation
45. Managing your CSS
Separation of Markup and Presentation
Technical
45
Presentation
46. Problems with CSS and Web 2.0
• Layouts are very complex, hence calculating margins,
padding etc need to be done correctly
• Giving length measurements in % or ems are better for
changing screen and font sizes. Layouts need to change
accordingly
• Strict web development standards and accessibility
guidelines enforce use of complex CSS for layouts
• Browser differences in CSS implementations cause
differences in presentations
• Hacks and other tricks make the code messy and
difficult to understand
47. Problems with CSS and Web 2.0 …
• Box model differences cause change in appearance of
layouts in different browsers
• During Dynamic page interactions, calculations of floats
and positioning can cause presentation issues
Technical 47
Presentation
48. Markup and CSS
• The cascade can be very powerful but sometimes there
is a temptation to use the same generic class name in
many places
– Put your class name on the outer-most element. The child
elements can be targeted with the parent elements class
name or ID
<!--Its common to see things like--> <!--Its far better to write (Semantic)-->
<div class=quot;headertitlequot;>...</div> <div id=quot;headerquot;>
<div class=quot;headerdescriptionquot;>...</div> <h3>...</h3>
<div class=quot;headerlinksquot;>...</div> <p>...</p>
<ul>
<li>...</li>
<ul>
</div>
Technical 48
Presentation
49. Markup and CSS …
• Markup is purely to represent structure of the data.
– Never mix structural elements and presentational
elements
– Good clean semantic markup is essential for good page
design
• Do not use inline styles, as you are mixing presentation
with markup
– Inline styles will also not allow you to over ride the styles,
and will force you to use !important
• Clean markup can also mean that you have complete
control over the presentation, which can be changed by
just swapping the CSS include
Technical 49
Presentation
50. Things to remember
• Using class nesting can be useful, but over using it can
be confusing
• Tracking which style actually applies to the element can
be tough
– Understanding of Specificity, Inheritance, cascade and
visual formatting is paramount
• Don't use too many #id on the page
• Try to create classes which are generic, and that can be
applied to more than one element
• Be sure of the positioning model you are using
Technical 50
Presentation
51. Things to remember …
• Use class nesting, cascading styles and other powers of
CSS
• Try not to manipulate individual CSS via Javascript,
instead, couple sets of style changes into a class
• Use document structure to your advantage
• For complex column based layouts, use standard CSS
preferably YUI grids
Technical 51
Presentation
52. Things to remember …
• CSS Class names should be descriptive of the feature
not what they are doing
.nav { Describes feature .bluebold { Describes style
border:1px solid; font-weight : bold;
width : 10em; color : blue;
background-color: grey; }
}
Technical 52
Presentation
53. Things to remember …
• Try to split presentational styles across different style
blocks ( or class names ) so that they can be nested to
make it more readable and efficient
<div class=“section”> .section {
<h3>Section Header</h3> padding:1px 2px;
… background-color: black;
</div> color: white;
<div class=“section selected“> }
<h3>Section Header</h3> .selected {
… border:1px dashed white;
</div> font-style:italic;
<div class=“warning selected”> color:green;
<em>Something wrong</em> }
</div> .warning {
background-color:red;
}
Technical 53
Presentation
54. Things to remember …
• CSS is always closer to the <head>
• Always minify your CSS and deliver it off a content
delivery network
– Saves from unwanted headers sent
• When your CSS is minimal, place all your CSS part of
your page in the <style> tag inside the <head> tag
• Use CSS hacks only if necessary
– Commonly for Box model differences and IE PNG
transparency issues
– Try to keep all the hacks in one place for better
management
Technical 54
Presentation
56. Also look at
• CSS: The Definitive Guide, 3rd Edition
– by Eric A. Meyer
– Available on Safari Online Books
• http://developer.yahoo.com/yui/grids/
• http://www.positioniseverything.net/articles/
onetruelayout/
• http://www.alistapart.com/articles/negativemargins/
