This document discusses using CSS to create layouts and designs. It begins by explaining how our experiences and browser limitations can constrain designs. It then provides examples of using CSS properties like floats, positioning, and selectors to create striped and textured page elements. The document demonstrates setting fonts using relative units and creating flexible designs. It concludes by promoting an upcoming virtual CSS conference.

1. A More Perfect
Union with CSS
Christopher Schmitt
http://twitter.com/teleject

2. Christopher Schmitt
http://twitter.com/teleject

3. how do we go about
?
solving our problems

4. we solve problems by
realizing the limitations

5. #1
Our Experience
Limits Our Designs

7. It’s Always a
Plumbing
Problem

12. #2
Our Browsers
Limit Our Design

17. part 2: applications

18. HTML+CSS
Example #1
http://www.flickr.com/photos/o2ma/186648711/

20. <p>...</p>
<p>...</p>
<blockquote>
<p>Ma quande lingues coalesce, li
grammatica del resultant
lingue es plu simplic e regulari quam
ti.</p>
</blockquote>
<p>...</p>
<p>...</p>

22. blockquote {
background-image: url(bracket_left.gif);
background-repeat: no-repeat;
padding: 10px 0 0 27px;
width: 175px;
margin: 0 0.7em 0 0;
float: left;
font-family: Georgia, Times, quot;Times New Romanquot;,
serif;
font-size: 1.2em;
font-style: italic;
color: black;
}

23. blockquote p {
background-image: url(bracket_right.gif);
background-repeat: no-repeat;
background-position: bottom right;
margin: 0;
padding: 0 22px 10px 0;
width:150px;
text-align: justify;
line-height: 1.3em;
}

24. <blockquote>
bracket_left.gif
<p>
bracket_right.gif

27. HTML+CSS
Example #2

30. Semantic
Markup

31. 91
http://www.w3.org/TR/html4/index/elements.html

34. <h1><a href=quot;http://
www.usa.gov/quot;>United States of America</
a></h1>
<ol><!-- Listing of States -->
<li><a href=quot;http://www.alabama.gov/quot;>
<strong>State of Alabama</strong><i></i>
</a></li>
<li><a href=quot;http://www.ct.gov/quot;>
<em><strong>State of Connecticut</
strong></em><i></i>
</a></li>
...
</ol>

36. Some Common
HTML Errors
• <p>&nbsp;</p>
• <p> ... <br><br><br> ... <br><br><br>...
• <h2>Subject Matter<br></h2>
• <p><h2>Subject Matter</h2></p>
• <p><img ></p>

37. Setting Up
the Easel

38. 3D View of Box Model

39. “CSS Reset”
• http://developer.yahoo.com/yui/reset/
• http://meyerweb.com/eric/thoughts/
2007/04/12/reset-styles/
• http://meyerweb.com/eric/tools/css/reset/
index.html

42. <div id=quot;easelquot;>
<h1><a href=quot;http://
www.usa.gov/quot;>United States of America</
a></h1>
<ol><!-- Listing of States -->
<li><a href=quot;http://www.alabama.gov/quot;>
<strong>State of Alabama</strong>
</a></li>
...
</ol>
</div><!-- /easel -->

43. body {
margin: 10px 0 0 0;
padding: 0;
text-align: center;
}
#easel {
width: 955px;
margin: 0 auto;
text-align: left;
position: relative;
}

45. Clearing Out
the Content

46. #easel ol {
list-style: none;
margin: 0;
padding: 0;
}
#easel strong {
display: none;
}

48. Striping

49. Normal Flow
• While normal flow is the default method of
rendering a page, the placement of the
elements can be altered
• Floats
• CSS position property
• Values: absolute, relative, fixed or static

50. Absolute Positioning
• When an element is absolutely positioned, it
is taken out of normal flow and positioned
relative to the edges of its containing box,
according to its offset properties.
• Absolutely positioned elements are ignored
by other elements within normal flow.

52. Relative Positioning
• When an element is relatively positioned, it is
initially placed within normal flow, and then
adjusted according to its offset properties.
• #positioned {
position: relative;
top: 50px;
right: 30px;
background-color: #eee;
}

54. Relative Positioning
• The browser lays out the paragraphs according
to normal flow, then offsets the positioned
paragraph 50 pixels from the top, and 30 pixels
from the right of its default position.
• And like absolute positioning, relatively
positioned elements can overlap other
elements.
• Note that if you don’t specify any offset
properties for a relatively positioned element, it
is placed according to normal flow.

55. #easel {
width: 955px;
margin: 0 auto;
text-align: left;
position: relative;
}
#easel em {
width: 955px;
height: 50px;
display: block;
background: #BF0A30;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

57. 13

58. Attribute Selectors
• a[title] { /* rules */ }
a[href] { /* rules */ }
• p[id] { /* rules */ }
p[class] { /* rules */ }
• img[alt] { /* rules */ }
img[src] { /* rules */ }
• blockquote[cite] { /* rules */ }

59. a[href=quot;http://delaware.gov/quot;] em {
background: white;
top: 50px;
left: 0;
}
a[href=quot;http://www.georgia.gov/quot;] em {
top: 100px;
left: 0;
}
...

61. Pooling the Stars

64. h1 a {
position: absolute;
width: 440px;
height: 350px;
background: #002868;
text-indent: -9999em;
margin: 0;
padding: 0;
z-index: 20;
}

65. Getting Rid of Text
• sIFR (Scalable Inman Flash Replacement):
http://wiki.novemberborn.net/sifr3
• Image Replacement Rundown:
http://mezzoblue.com/tests/revised-image-
replacement/

67. Stars

68. Block Level - <h2>
Inline - <strong>

69. a[href=quot;http://www.alabama.gov/quot;] i {
background-image: url(stars.gif);
display: block;
position: absolute;
top: 13px;
left: 13px;
z-index: 50;
width: 24px;
height: 23px;
}

72. Texture

73. Alpha Transparency (PNGs)
http://christopherschmitt.com/2007/10/30/png-transparency-
for-internet-explorer-ie6-and-beyond/

74. Alpha Transparency (PNGs)

75. Adding PNGs
• First, download the .htc script at TwinHelix
Designs.
• http://www.twinhelix.com/css/iepngfix/

76. Adding PNGs
• First, download the .htc script at TwinHelix
Designs.
• http://www.twinhelix.com/css/iepngfix/
• After downloading the script, upload the
script to your Web server.

77. Adding PNGs
• Then, create a blank gif file.
• This image file is 1×1 pixel with the color
set as transparent. Within the .htc script,
change the line that references the
blank.gif file so that it points to your gif’s
location on the server.

78. Adding PNGs
• Create a separate CSS file (we’ll name it
ie.css), and include within in the following
single line, referencing the location of
the .htc file:
• img {
behavior: url(iepngfix.htc);
}

79. Adding PNGs
• But, we only want to load this CSS file when
the page is viewed in IE6-.
• Use conditional comments:
<!--[if lte IE 6]>
<link rel=quot;stylesheetquot; type=quot;text/cssquot;
media=quot;screenquot; href=quot;ie.cssquot; />
<![endif]-->

80. #easel em {
width: 955px;
height: 50px;
display: block;
background: #BF0A30;
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-image: url(flag_bkgd.png);
background-position: 50%;
background-attachment: fixed;
}

82. #easel h1 a {
position: absolute;
width: 440px;
height: 350px;
background: #002868;
text-indent: -9999em;
margin: 0;
padding: 0;
z-index: 20;
background-image: url(flag_bkgd.png);
background-position: 50%;
background-repeat: no-repeat;
background-attachment: fixed;
}

84. a[href=quot;http://delaware.gov/quot;] em {
background: white;
top: 50px;
left: 0;
background-image: url(flag_bkgd.png);
background-position: 50%;
background-attachment: fixed;
}

89. Stretching

93. Setting Fonts with Ems
• “Default size in all browsers is 16 pixels”
• Multiply default size by 62.5%, you get 10px
• http://clagnut.com/blog/348/
• http://www.alistapart.com/articles/
howtosizetextincss/

94. body {
font-size: 62.5%;
margin: 10px 0 0 0;
padding: 0;
text-align: center;
}

95. Design
Fixed Flexible
Element
Flag Width 955px 95.5em
Stripe Height 50px 5em
Star Top 13px 1.3em
Star Left 90px 9em

96. Design
Fixed Flexible
Element
Union Height 440px 44em
Union Width 350px 35em

98. Design
X
Fixed Flexible
Element
Union Height 440px 44em
Union Width 350px 35em

99. #easel h1 a {
position: absolute;
width: 21.5em;
height: 17.5em;
background: #002868;
text-indent: -9999em;
margin: 0;
padding: 0;
z-index: 20;
background-image: url(flag_bkgd3.png);
background-position: 50%;
background-attachment: fixed;
}

103. OMG! Stars

104. i:after {
content: quot;Mquot;;
color: white;
font-size: 2em;
}

107. i:after {
content: quot;48quot;; // unicode
font-family: quot;Zapf Dingbatsquot;;
color: white;
font-size: 2.5em;
font-style: normal;
}

111. #1
Our Experience
Limits Our Designs
#2
Our Browsers
Limit Our Design

112. The CSS Summit
• Eight CSS experts:
• Molly Holzschlag, Stephanie Sullivan,
Kimberly Blessing, Dave McFarland, more
• Virtual conference
• CSS + Web fonts, IE6, jQuery, Flexible
Layouts, etc.
• July 18th, 9-5pm ET
• http://CSSSummit.com/

113. THANK YOU!
Christopher Schmitt
schmitt@heatvision.com
http://twitter.com/teleject
ChristopherSchmitt.com