72 dpi In the Shade: The Pop Art Creative Team Blog



10 CSS Tips from a Professional CSS Front-End Architect

Posted on January 16th, 2007 by ryan

I have been working with web standards based design for many years now and I see many rookie mistakes. When newbies get started with CSS/XHTML based web design, most of their work is focused on just getting the page to look like the Photoshop comp. While this translation is important to keep the client happy, considerable thought process should be involved in creating the semantic markup and marrying that with CSS. CSS is not a collection of hacks to get the browsers to bend to your will. Style sheeting is more of an art form. The difference between choosing inline elements and background selectors is a delicate procedure. How will I manipulate the structure? What is the client brand and how does this work into my markup? Simply thinking through your process before starting each project will save you headaches as the site grows.

1. The client’s brand is important.

To exemplify the brand with visual queues is key. Keeping the logo whole is an example. Now that traditional table based slicing and dicing is gone, we can keep the integrity of our presentational inline images.

2. Keep content images whole.

Images that reside in the content flow should be allowed stability in that structure. This includes the logo or any supporting images in the document. I really enjoy right clicking an image, especially a logo, and receiving a nice whole transparent PNG. Deciding up front is detrimental to keeping the integrity of the design and brand. Even the markup. This may not matter to your client but it matters to your colleges or future employees who might edit your documents.

How is this done. Take advantage of transparent PNG’s. Since the birth of IE 7 and it’s fluent injection in the industry, currently 25% of the market, we can now take full advantage of transparent PNG’s*.

*What about IE 6? Their are many techniques to relieve IE6 of it’s transparency bug.

Think of your composition as Photoshop layers. Keeping your images whole allow you to layer your images using z-indexing. Don’t forget that the Trident engine(IE) thinks the the stacking order starts at 0. The Gecko engine starts at 1. Carefully organizing your stacking order allows you to keep track of elemental layering.

3. Go with the flow.

A designer knows what’s best for the client and the user and will make specific decisions about where structure shall live, where the logo will be, where the primary call to action will live, etc. If the logo rests in the top left corner of the comp, it should also live in the top of the markup. Before starting, review the composition and decide what images will rest in the presentational CSS and what images will rest in the inline with in the document. Obviously if the composition shows the logo at the bottom it should still rest at the top of the document. Try and keep it close to what the designer or project team intended.

4. Complex layouts are made of simple sections.

Consider the value of each section of the site when dealing with complex layouts. For example when presented with a 3 column comp, determine the value of each section. Should navigation rest underneath the logo? Does content take reign over all other elements? Taking time before you start will save you a lot of headaches down the road. Here is an example of sectional ordering with three column layout:

  1. Logo/Branding
  2. Navigation (vertical or horizontal)
  3. Main Content
  4. Secondary Content (sidebar-two or supplemental content)
  5. Promotional Items (ads or internal promos)
  6. Footer/Copyright

5. Keep containers to a minimum.

Save your document from structural bloat. New developers will use many div’s similar to table cells to achieve layout. Take advantage of the many structural elements to achieve layout. Do not add more div’s. Consider all options before adding additional wrappers (div’s) to achieve an effect when using a little nifty CSS can get you that same desired effect.

6. Use the @import rule to organize your CSS.

Not only will the @import rule save you from an undesired effect with legacy browsers such as IE4, IE5 MAC and Netscape 4 (a few still exist!) it is easier to maintain. Since you carefully organized your document you will not be ashamed of your un-styled markup.

7. Organizing your CSS helps with future maintainability of the site.

Start with a master style sheet. Within this style sheet import your reset.css, global.css, flash.css(if needed) and structure.css and on occasion a typography style sheet.

Here is an example of a “master” style sheet and how it is embedded in the document:

  • @import url("reset.css");
  • @import url("global.css");
  • @import url("flash.css");
  • @import url("structure.css");

<style type="text/css" media="Screen"> /*\*/@import url("css/master.css");/**/ </style>*

*Notice the capitalization in the media attribute. Capitalizing “Screen” will save you headaches with IE on Windows Mobile 5. Currently, I use a Plam Treo to access all my mobile online content. (Yes, I will be switching to an iPhone when available.) The Treo’s OS is Windows Media 5. The browser is IE. Are you thinking the same thing as me? Yes, another IE browser to work with and eventually hack. And this one also has bugs. The biggest rendering problem is the mergence of presentational and handheld style sheets. You can imagine the disaster that creates. But their is a fix. If you capitalize the “S” in screen IE will skip the presentational CSS documents and render only the desired handheld mobile style sheet.

8. Organize your alt CSS documents.

What about devices that do not rely on CSS style sheets? Since your structural markup is already organized the visitor should have a pleasant experience with the site. On any device with style sheets or not.

Alternative documents such as arual, print and handheld can be grouped together in a alternative directory. As you can see I place these alternative style sheets in a directory called “alt”.

Use the link tag for other style sheets as so:

  • <link rel="stylesheet" type="text/css" media="print and (min-width: 25cm)" href="css/alt/print.css" />
  • <link rel="stylesheet" type="text/css" media="handheld" href="css/alt/handheld.css" />
  • <link rel="stylesheet" type="text/css" media="aural" href="css/alt/aural.css" />

Do the exact with IE bugs style sheets. Organize them in to an “iebugs” directory.

Use conditional comments to include your IE bugs CSS:

<!--[if lte IE 6 ]>
<code><link rel="stylesheet" type="text/css" href="css/iebugs/ie6.css" />
<![endif]-->

<!--[if IE 7 ]>
<link rel="stylesheet" type="text/css" href="css/iebugs/ie7.css" />
<![endif]-->

9. Hook, line, and sinker.

Once you have your CSS and sections in place start considering where your selector “hooks” will live by using structural hooks in your mark up. This is your saving grace for future editing and maintenance of the site. This will also give you strength in your document.

10. Body tag ID.

In most cases placing an ID in the body tag will allow you manipulate CSS presentational items and markup elements by page by page basis. This also will cut down the amount templatatization (is that a word?). Not only will you be able to organize your sections you will be able to create multiple CSS presentations with out changing your markup from template to template or page to page.

For example if a 3 column layout requires being reordered from page to page. Such as columns switching places. This is easily achievable with the power of specificity and the CSS cascade. Simply adding an ID to the body will allow you to change anything inside and outside the document flow. This is increasingly useful when dealing with pages in CMS systems such as Wordpress.

That’s it. There is so much more to cover, but these simple techniques will get you off to a great start. Until then…

Happy Stylesheeting!

-Ryan Parr http://www.parrfolio.com

115 Comments »

  1. Great article! Thanks so much for sharing!

    Comment by Brian Z. — January 16, 2007 @ 8:46 pm

  2. I really like this article. I’ve been using rules 1-5 and 9-10 pretty consistently. I’d like to experiment with the alt media types and the @import method. I hadn’t really thought about the advantages of organizing multiple stylesheets in this way. The ‘S’creen comment was interesting too. Good work!

    Comment by Brendan Falkowski — January 16, 2007 @ 10:20 pm

  3. It’s good to see more credit being given to the possible eloquence of CSS.

    Gone are the days when CSS was all about trying to hack together your first tableless design so you can brag to your friends about how you were ’standards compliant’ and ’semantically correct’. The next few years will really shape the future of CSS and articles such as this certainly help point it in the right direction; helping designers put on their logical programmer hats for just a few minutes.

    Comment by Mal Wanstall — January 17, 2007 @ 1:55 am

  4. Great css article round up. I always see that newbies tend to use hacks to overcome problems specific to certain browsers but I think that in most cases these same problems could be solved by simply applying a more advanced css rule like the child selector or something similar, which makes more sense since it is valid and recommeded css. I really
    digg the “S”creen technique. Great stuff.

    Comment by Mark Raguz — January 17, 2007 @ 3:15 am

  5. “visual queues”, i think thats the wrong type of que

    Comment by anon — January 17, 2007 @ 3:39 am

  6. […] When newbies get started with CSS/XHTML based web design, most of their work is focused on just getting the page to look like the Photoshop comp. While this translation is important to keep the client happy, considerable thought process should be involved in creating the semantic markup and marrying that with CSS. CSS is not a collection of hacks..read more | digg story […]

    Pingback by MyWebResource: Webmaster Blog » [dugg!]: 10 CSS Tips from a Professional CSS Architect — January 17, 2007 @ 7:01 am

  7. Nice article,

    The ‘S’creen is an invaluble tip thanks for sharing :)

    Comment by Geoff — January 17, 2007 @ 9:07 am

  8. Dear Professional CSS Architect,

    The css of this site is broken in IE 7. You could easily fix it with a table.

    Comment by jason — January 17, 2007 @ 12:44 pm

  9. I am now taking an intro to CSS class and crossing over from the world of graphic design. Seems like it will be an interesting and progressive journey and article such as these will help keep an edge.

    Comment by sewdough — January 17, 2007 @ 5:19 pm

  10. There’s mention of “the many structural elements to achieve layout” but no reference to what the heck those are. This is the problem with an article like this, it’s not all practical. It’s all theoretical advice. Then there’s this: “This may not matter to your client but it matters to your colleges or future employees who might edit your documents.” Once again, what does business have time and budget for?? Making the CLIENT happy. It’s the constant disconnect between tech and business.

    Comment by GB — January 17, 2007 @ 5:21 pm

  11. I often feel when CSS designers come across browser issues hacks seems the case. But not being lazy and slaving that few minutes or hours if needed to find the right solution is much better standards for your site.

    I think we all need to open up more to the fact that CSS in it’s own right is a designer package ! You can create so many varieties to site designs you wouldn’t have thought up in photoshop!

    Comment by Mat — January 17, 2007 @ 5:47 pm

  12. The article was informative, thanks! In the interests of returning the favor (and at the risk of being branded a grammar Nazi), I’ll call out one of the sentences you constructed:

    “*What about IE 6? Their are many techniques to relieve IE6 of it’s transparency bug.”

    That should read:

    “*What about IE 6? There are many techniques to relieve IE6 of its transparency bug.”

    Its is a possessive adjective. It’s is a contraction of “it is.”

    Their is a possessive pronoun, while there is typically used as a place word. For example, “The forks are over there.” They’re is a contraction of “they are.”

    Nick

    Comment by Nick — January 17, 2007 @ 5:50 pm

  13. Great article - lots of interesting media-type issues I hadn’t thought about.

    Regarding tip #2 (PNGs)… I’ve been a huge fan of using alpha transparent PNGs in slice-and-dice builds the last couple of years. Of course the IE hack is annoying but easy to minimize. 2 things to be aware of though:
    1. when in SSL (HTTPS://…) mode IE (including 7) will *NOT* render a PNG (even with hacks).
    2. I’ve notice slight color differences in PNGs rendered in IE

    Again - thanks for the great article!

    Comment by smartminion — January 17, 2007 @ 6:16 pm

  14. “I have been working with web standards based design for many years now and I see many rookie mistakes”…

    Is the fact that the header on this website isn’t displaying correctly a testament to that? :) The ‘Stephen’ tab shifts onto the next line for me (Firefox 2, MacOS) pushing the article and comments box to the right

    Comment by Alex — January 17, 2007 @ 6:24 pm

  15. Your page does not validate, even though it is explicitly stated as xhtml 1.0 transitional. It’s difficult to mess up transitional!

    Semantic markup requires you to use ol for your ordered lists. Also, be consistent with your strong tags. The first two bold the entire line, while the rest only bold the number. Actually, what you should probably do is set a style on your first-level ol li tags to automatically bold it. That keeps tags to a minimum.

    You should URL encode your urls. Putting spaces in URLs is discouraged and if you do, you must use in the a tag, not a literal space. When using & in the a tag, you need to use & (I hope that you are converting HTML entities. If this is broken, you should view source or do the equivilent to see what I typed).

    If you’re using xhtml, even transitional, you must terminate your img tags with either the strange closing tag, or use the specific syntax for tags that need no content.

    You twice close a tag which was not open.

    These are serious errors that would take two minutes to fix, probably. Even if you are using a template (which makes tracking these down more difficult) you cannot generally get away with this stuff if you’re a true “Professional CSS” anything.

    And please, please stop using the term “Architect” to make yourself sound important. Pointless titles that are not descriptive but only given to make someone feel important or sound important are annoying to say the least.

    Your form also won’t submit in Camino but I didn’t feel like investigating what is killing what looks like a simple form. Fail gracefully! It also doesn’t work in FIREFOX! The up and coming browser that virtually all geeky people are starting to use — the very people that you’re trying to get with a CSS article. A geeky article that doesn’t work in Firefox is beyond insane.

    Actually, since it wouldn’t work in IE 5.2 for the Mac EITHER, I dug through your source. WHY serialize a form in javascript and submit it via Ajax? Are you trying to keep out as many of your audience as you can? It’s a good thing that I am a web developer because, unlike Professional CSS Architects, I have multiple browsers installed.

    Let’s try Opera…

    – A programmer who does some web design when writing web applications and is a stickler for standards compliance and a lover of CSS.

    Comment by Daniel Grace — January 17, 2007 @ 6:37 pm

  16. sorry, but the tech tips are bigotry of a tech guy that has no idea of how the world is outside the small scale overkill implementation he’s used to.

    Like anyone need 700 tweaks in the markup/css just because there are some shitty browsers. no thank you. i would have stick with tables and the font tag if it was so.

    hopefuly, you can get on your senses and use a minimal denominator. That would have been a worthy tips.

    (and you could use a no-type-here-background for the focused class of this box :)

    Comment by gabriel — January 17, 2007 @ 6:47 pm

  17. Love the article, but I have a question regarding the conditional CSS comment. I have only hit a few issues where the various versions of IE render things differently, which can often be fixed by re-thinking the structure of the code. I usually prefer to add small tweak into the stylesheet to adjust the errors such as margins. The approach we use is:

    *html* .[classname] {} /* This targets IE 6 and 7
    * html .[classname] {} /* This targets IE 7 only

    The main issues we’ve encountered are the occassional height issue, and IE6’s infamous margin doubling bug.

    Another cool trick for setting a minimum height for an area, but in such a way that it can expand with your content:

    .divName {min-height: 200px;} /* This is for all mozilla based browsers */
    *html* .divName {height: 200px;} /* This targets IE

    Thanks for a great article. I’m passing it round to some of my colleagues who are starting to delve into the wonder world of CSS.

    Comment by Gregory Brine — January 17, 2007 @ 8:07 pm

  18. […] 10 CSS Tips From a Professional CSS Architect I don’t know who this guy is, but some pretty good, valid tips. […]

    Pingback by 1983 » 2007-01-18 Daily Catch — January 17, 2007 @ 8:08 pm

  19. #6 doesn’t make much sense to me. How is @import better than ? With link, you can define the media, seperating print, handhelds, etc. How do you do this with import? You don’t explain the benefits of this, you just claim it’s easier.
    Wait, number 8 addresses this. This is getting confusing…Oh, 6 7 and 8 all explain the structure. You’re saying one master stylesheet using imports, but included in the document using link? This isn’t very clear. Just trying to stretch it out to 10?

    Additionally, grammar is good. Communication is good. The mistakes in this article distract from the content. If what you have to say is worth reading, it’s worth saying clearly.

    “How is this done.” - Are you asking, or telling?
    “Their are many techniques to relieve IE6 of it’s” - The correct words are There and its. The sentence doesn’t make much sense even corrected - why would you want to relieve it of transparency? It doesn’t HAVE transparency, you want to add it, not take it away.

    Lastly, is there a reason this comment form doesn’t work in Firefox? What is that all about?

    Comment by Jessica — January 17, 2007 @ 8:51 pm

  20. Adding an id to the body tag is a great idea, an extension of that is to add classes to body for sections, especially if you have a lot of 3rd or 4th tier areas of your site. Adding an additional class for each level deep, could be a way of taking this idea further if needed.

    Comment by Pete Lasko — January 17, 2007 @ 8:55 pm

  21. Quick question about number 8…

    I’m wondering about the media attribute you’ve used with the apparent min-width style rule in the link element.

    Are there any browsers that currently support this type of media attribute?

    The W3 recommendation points out that they may be supported in the future:
    http://www.w3.org/TR/html401/types.html#type-media-descriptors

    Comment by Andy — January 17, 2007 @ 9:08 pm

  22. Be Careful When Calling Yourself a Professional “CSS Architect”…

    I try to be as magnanimous as possible when it comes to other designers and web design professionals being aware that we aren’t all on the same level. I know I still have a lot to learn but also know I’m ahead of the class compared to some….

    Trackback by The Propaganda Party: A Design Journal — January 17, 2007 @ 9:14 pm

  23. Some very fine points here, but if you’re developing for a high-profile/high-traffic site then you really should try to limit the number of @import’s and linked stylesheets as much as possible. As Tenni Theurer blogged (http://yuiblog.com/blog/2006/11/28/performance-research-part-1/), the page .html is traditionally the fastest to download, and the additional resource files (.js, .css, etc) of a page can greatly exaggerate the full page download time (even if the elements are already cached).

    Comment by kenman — January 17, 2007 @ 9:37 pm

  24. Also, there is something funky with your form here. Using FF 2.0 I was unable to post by clicking the submit button- I had to tab down to it.

    Comment by kenman — January 17, 2007 @ 9:38 pm

  25. […] read more | digg story […]

    Pingback by 10 CSS Tips from a Professional CSS Architect « Digged Stories — January 17, 2007 @ 9:55 pm

  26. It’s funny to see a “professional CSS architect” (whatever the hell that is) talk about CSS when his page doesn’t even show up properly in IE6.

    I realize the main audience of this site is probably using Fx, but that’s irrelevant. Pages should look nearly the same in IE6, IE7, Fx, Opera, and Safari, _without_ resorting to hacks.

    Practice what you preach?

    Not to make this out to an entirely negative post, it was a good writeup, and I totally agree about beginners trying replicate their “drawn” website to CSS without considering semantic markup, e.g. the structural skeleton, of the site.

    I think that’s where a lot of beginners get really frustrated with CSS and start blaming the browser and this and that, when in fact it’s them and their code. I’ve yet to resort to hacks to create a website or “fix” a “problem,” nor do I draw a site first and then port it.

    Keep it simple, and start with the basics. Cheers.

    Comment by Kyle — January 17, 2007 @ 10:38 pm

  27. Good article - I always love more CSS tips and tricks. However, please stop writing English like code. I think you could get along with the word “templating” which is itself a nasty neologism - which means a made-up word.

    Comment by greg von dare — January 17, 2007 @ 10:54 pm

  28. Too bad there isn’t an automated tool to help with this stuff.

    Comment by Mongo — January 17, 2007 @ 11:24 pm

  29. Nice article. I’ve got to take issue with #7 though, we’ve been doing a ton of performance testing and tuning on our sites here, and found that one of the biggest improvements to load time on pages is found by reducing the number of HTTP requests made by the page. We’ve gone to great lengths to combine CSS and JS files to lessen the number of requests made. The browser can, by default, only make two requests at a time when downloading data. If you’ve got multiple files that need to download to render a page, it can only get them two at a time, which has a huge impact on total load time.

    Comment by Matt — January 18, 2007 @ 12:08 am

  30. good article. good news for css syntax.

    2 Daniel Grace:
    good comments.

    I think CSS stays at its start and will be developed hugely. Other case - validators of all sorts. Professional CSS architect doesn’t need to be the Guru Of Validation. In near future we will have just one standards compilant browser ;)

    Comment by tobto — January 18, 2007 @ 1:19 am

  31. While it’s a nice little posting that I’m happy to salute, I have to say I’m a bit concerned about the idea of someone calling themselves a Front End Architect.

    Front End designer, sure. Front end developer, no problem. But architect? Is it just me, or is that just a touch pretentious? After all, tradtional architects need broad training in design and engineering, and even technical architects need to have broad experience with technlogy. But I fail to see how a Front End creator/consultant/god can seriosuly consider themselves an architect.

    Of course, it could just be me missing the ironic jist of the title, in which case call me a killjoy and flame me into oblivion.

    M

    Comment by Mark — January 18, 2007 @ 1:45 am

  32. visual cues

    Comment by E — January 18, 2007 @ 1:52 am

  33. Great article, thanks a lot!
    I found the @import rule very helpful!

    Thanks again!

    Comment by Christos — January 18, 2007 @ 1:53 am

  34. You dont have to give a body tag an id, just use it properlly

    html {
    font-size: 68%;
    }

    body {
    margin: 0% 5% 0% 5%;
    }

    simple, no need for useless markup, and actually using tags the way they are ment to be used

    Comment by Keloran . — January 18, 2007 @ 2:56 am

  35. css behaviors == the great equalizer.

    It baffles me how little attention they’ve gotten from the w3c compliance fanboy crowds.

    Google it.

    -Bryan

    Comment by Bryan Crow — January 18, 2007 @ 4:09 am

  36. How ’bout tip #11: No need to make every heading bold, just the first two, then skip the rest. Consistency is dead.

    Comment by Johnny CSS — January 18, 2007 @ 5:24 am

  37. You can achieve #7 *and* combine your CSS files. It helps to develop with smaller files and if you need to combine them you can do this dynamically (and then cache) or precompile them in a build step. Don’t make life on your developers harder by reducing maintainability of your CSS during development. You will find that they create many unnecessary styles if you do… (and that too will affect performance)

    Comment by wioota — January 18, 2007 @ 5:46 am

  38. […] Some pretty good tips for the beginner and expert alike - Link […]

    Pingback by 10 CSS Tips from a Professional CSS Front-End Architect — XSet Archive — January 18, 2007 @ 7:37 am

  39. Really great article :)

    Today, with the CSS importance that we have on our projects, follow your tips will help a lot.

    Comment by Carlos Eduardo — January 18, 2007 @ 8:18 am

  40. […] 10 CSS Tips from a Professional CSS Front-End Architect - CSS is not a collection of hacks to get the browsers to bend to your will. Style sheeting is more of an art form. The difference between choosing inline elements and background selectors is a delicate procedure. […]

    Pingback by Matt Lee » Blog Archive » Links for 18/01/07 — January 18, 2007 @ 8:46 am

  41. what a great CSS tip article !! LOVE it!!

    I like the type here css in the comment box as well, how do you do that, cool

    Comment by nick1980 — January 18, 2007 @ 1:03 pm

  42. I can understand about not giving the shop away, but I thought this was a pretty weak article. It addresses none of the most tetchy css issues and most of the items are pretty common-sensical. I mean, consider “Complex layouts are made of simple sections.” - No! Really? The universe is made of atoms.

    And good thing the author is self-proclaimed as an architect and not a writer otherwise Ms. Truss and some other panda-loving folk might just shoot him and leave.

    CSS be damned if a simple submit button can’t be made to work in Opera!

    Comment by marc — January 18, 2007 @ 4:12 pm

  43. […] When newbies get started with CSS/XHTML based web design, most of their work is focused on just getting the page to look like the Photoshop comp. While this translation is important to keep the client happy, considerable thought process should be involved in creating the semantic markup and marrying that with CSS. CSS is not a collection of hacks to get the browsers to bend to your will. Style sheeting is more of an art form. The difference between choosing inline elements and background selectors is a delicate procedure. How will I manipulate the structure? What is the client brand and how does this work into my markup? Simply thinking through your process before starting each project will save you headaches as the site grows. 10 CSS Tips from a Professional CSS Front-End Architect at 72 dpi In the Shade Geoserv. […]

    Pingback by 10 CSS Tips from a Professional CSS Front-End Architect - DNtalks.Com — January 18, 2007 @ 7:00 pm

  44. […] When newbies get started with CSS/XHTML based web design, most of their work is focused on just getting the page to look like the Photoshop comp. While this translation is important to keep the client happy, considerable thought process should be involved in creating the semantic markup and marrying that with CSS. CSS is not a collection of hacks to get the browsers to bend to your will. Style sheeting is more of an art form. The difference between choosing inline elements and background selectors is a delicate procedure. How will I manipulate the structure? What is the client brand and how does this work into my markup? Simply thinking through your process before starting each project will save you headaches as the site grows. 10 CSS Tips from a Professional CSS Front-End Architect at 72 dpi In the Shade Geoserv. […]

    Pingback by 10 CSS Tips from a Professional CSS Front-End Architect - Programming.net Forums — January 18, 2007 @ 7:00 pm

  45. […] 10 CSS Tips from a Professional CSS Architect at 72 dpi In the Shade (tags: css webdesign design Tips development howto web HTML programming reference resources tutorial WEB2.0 blog Web_dev developer blogging blogs) […]

    Pingback by links for 2007-01-19 at IAMWW | blog — January 18, 2007 @ 9:31 pm

  46. Adding to #10 and Pete Lasko’s comment… I’d suggest that the body ID be used for page specific differences (such as current place in the navigation) and that a body class be used for changing presentation such as columns which are applied on multiple pages. This strategy was used on Vox. The same markup is used on all pages; changing the body class changes the layout of the columns.

    Comment by Beau Smith — January 18, 2007 @ 11:04 pm

  47. This is very good. Thank you! Keep up the good work. /J

    Comment by Jimmy Oh — January 19, 2007 @ 12:15 am

  48. “Professional CSS Front-End Architect” is overrated.

    Comment by thenonhacker — January 19, 2007 @ 4:18 am

  49. […] 10 CSS Tips from a Professional CSS Front-End Architect at 72 dpi In the Shade 10 dicas de CSS (tags: css webdesign design tips development web howto) […]

    Pingback by links for 2007-01-18 | blog.ftofani.com — January 19, 2007 @ 4:47 am

  50. There are so many issues mixed into all this that there was a digg.com commentary connecting it to an earlier parody of the programming skills evolutionary cycle, so that I went a way to blog it at

    http://ecordell.blogspot.com/2007/01/this-is-written-in-reaction-to-links.html

    and when I came back to post this, there was even more. The funnier of the two parodies was probably the original, but I think the general idea is that the evolutionary chain seems to be from simple-but-adequate to complex-but-unworkable and back to simple-but-inadequate. That’s how many of my late-night coding sessions seem to go, too . . .

    Comment by Ernie Cordell — January 19, 2007 @ 9:30 am

  51. Typo? Is the <code> tag in the conditional comments sample (example 8) supposed to be there?

    Comment by Beau Smith — January 19, 2007 @ 10:47 am

  52. How’s this help me with Quake?

    Comment by Qu@k3r — January 19, 2007 @ 11:08 am

  53. […] http://www.72dpiintheshade.com/2007/01/16/top-10-css-tips-from-a-professional-css-architect/ […]

    Pingback by Blogging Web 2.0 Web Design | Technology News | Social Networking | Color Tagging | Ajax | CSS | SEO | Tyic » 10 CSS Tips from a Professional CSS Front-End Architect — January 19, 2007 @ 11:45 am

  54. […] 10 CSS Tips from a Professional CSS Front-End Architect at 72 dpi In the Shade 10 dicas de CSS (tags: css webdesign design tips development web howto) […]

    Pingback by pristina.org | everything design » links for 2007-01-19 — January 19, 2007 @ 12:33 pm

  55. 1) Tables are sometimes the best, easiest way. Relent.

    2) If you’re going to generate a thousand pages that use one SS, throw an extra empty into the pages template here and there. They may come in handy.

    3) K.I.S.S. Spaghetti is still spaghetti.

    Comment by TJ — January 19, 2007 @ 3:38 pm

  56. Result: Failed validation, 34 errors

    Address: http://www.72dpiintheshade.com/2007/01/16/top-10-css-tips-from-a-professional-css-architect/

    Encoding: utf-8
    Doctype: XHTML 1.0 Transitional

    This page is not Valid XHTML 1.0 Transitional!

    get your house in order

    Comment by kees — January 19, 2007 @ 4:15 pm

  57. […] Setelah membaca artikel yang berjudul 10 CSS Tips from a Professional CSS Front-End Architect ( dengan segala komentarnya ), saya jadi tertarik untuk membuat semacam “joke” tentang webmaster dan web designer. […]

    Pingback by Joke tentang webmaster dan web designer : M I C R O S I A — January 19, 2007 @ 9:04 pm

  58. too many typos in your blog to take you seriously, serious.

    Comment by Jbone — January 20, 2007 @ 12:03 am

  59. […] Sveiki, štai jau 10 skaitinių rubrika ir mums visai neblogai sekasi Šią savaitę publikavom medučio straipsnį PHP saugumo nustatymai - 1 dalis ir mano straipsnį apie Joost(tm) - Joost(tm) - televizija kompiuteryje - 100 straipsnis mūsų svetainėje! Skaitiniai šiam savaitgaliui: 7 Tips on How NOT to do BAD Programming Improve your forms using HTML5! Introduction to Python - Part 1 10 CSS Tips from a Professional CSS Front-End Architect 53 CSS-Techniques You Couldn’t Live Without AdSense Competitive Ads and Services Policy just got a lot tighter for publishers […]

    Pingback by » Savaitgalio skaitiniai #10 Archyvas » Pixel.lt — January 20, 2007 @ 1:16 am

  60. […] 10 güzel CSS ipucu Link […]

    Pingback by Fatih Hayrioğlu’nun not defteri » 20 Ocak 2007 Web’den seçme haberler — January 20, 2007 @ 12:26 pm

  61. […] 10 CSS Tips good stuff (tags: CSS) […]

    Pingback by All in a days work… — January 20, 2007 @ 6:17 pm

  62. […] 10 CSS Tips from a Professional CSS Front-End Architect at 72 dpi In the Shade (tags: css webdesign design tips development web webdev) […]

    Pingback by holdandmodify.com » Blog Archive » links for 2007-01-19 — January 21, 2007 @ 9:44 am

  63. […] 10 CSS Tips from a Professional CSS Front-End Architect I don’t do CSS much - I know enough to do the work, but not how to do it *well*. This look like a really good set of tips for someone like me - an expert revealing the tricks of the trade that are the difference between “able to do it” and “really good”. (tags: css reference) […]

    Pingback by Links For Monday 22nd January 2007 at Digitalia — January 23, 2007 @ 12:40 am

  64. I too would love to be able to use transparent pngs but I would say a market penetration of 25% for IE7 is still too low. I would want to see IE6 down to around 10% (basically the trailing edge laggards) before feeling it’s OK to use transparent pings. IE6’s rendering of transparent pings can look so nasty that I think it’s too early to make the move just yet, sadly :(

    Smartminion (#12) raised a peculiar quirk that I hadn’t heard about - incorrect png rendering in IE7 when in SSL. What the hell is that?!?

    Comment by simphuser — January 24, 2007 @ 7:17 am

  65. […] 10 CSS Tips from a Professional Front-End Architect CSS is not a collection of hacks to get the browsers to bend to your will. Style sheeting is more of an art form. The difference between choosing inline elements and background selectors is a delicate procedure. Simply thinking through your process before starting each project will save you headaches as the site grows. […]

    Pingback by Web-Sites of the Month: The Best of January 2007 | Smashing Magazine — February 6, 2007 @ 4:50 pm

  66. […] 10 CSS Tips from a Professional CSS Architect […]

    Pingback by xocea » Programming News: January 2007 — February 7, 2007 @ 1:42 pm

  67. […] 72 dpi In the Shade » 10 CSS Tips from a Professional CSS Front-End Architect (tags: css) […]

    Pingback by links for 2007-02-08 « thund3rbox — February 7, 2007 @ 5:23 pm

  68. […] 10 CSS Tips from a Professional Front-End Architect […]

    Pingback by 煎蛋 » 2007 年一月最佳网站收集 — February 7, 2007 @ 11:12 pm

  69. Thanks for those great tips,
    using an ID in the body tag has been a great help so far in implementing page specific differences.

    Comment by Mindloop — February 11, 2007 @ 6:31 pm

  70. […] 72 dpi In the Shade » 10 CSS Tips from a Professional CSS Front-End Architect (tags: CSS tutorials) […]

    Pingback by Webmaster Libre | links for 2007-02-12 — February 13, 2007 @ 4:13 am

  71. […] 10 CSS Tips from a Professional CSS Architect at 72 dpi In the Shade […]

    Pingback by links for 2007-01-19 - IAMWW — March 3, 2007 @ 1:31 pm

  72. […] Original post by ryan […]

    Pingback by audio » Blog Archive » 10 CSS Tips from a Professional CSS Architect — March 7, 2007 @ 10:33 am

  73. So, why doesnt your site validate then? :D

    Comment by Iminay — March 15, 2007 @ 3:08 pm

  74. […] 10 CSS Tips from a Professional CSS Architect […]

    Pingback by Free CSS Editors : lxpages.com blog — March 29, 2007 @ 11:49 am

  75. […] 10 CSS Tips from a Professional CSS Front-End Architect - 72dpiintheshade.com […]

    Pingback by Jason Bartholme’s SEO Blog » Blog Archive » 101 CSS Resources to Add to Your Toolbelt of Awesomeness — April 3, 2007 @ 7:52 am

  76. Who can tell me how to create one top banner???

    http://blog.xuite.net/christina610/entertainment/10981321

    Comment by HALA PRINCESS — April 9, 2007 @ 1:16 pm

  77. Hiya,

    I just posted a blog entry about how to keep CSS really simple.

    I hope you can let me know whether you think it is stupid/stupendous.

    http://jonwinstanley.blogspot.com/2007/04/reduce-frustration-of-css.html

    Thanks!
    Jon

    Comment by Jon — April 17, 2007 @ 2:29 pm

  78. […] 10 CSS Tips from a Professional CSS Architect […]

    Pingback by Aprendiendo Hojas de Estilo (CSS) « Disenia — May 6, 2007 @ 7:59 am

  79. […] Use a master stylesheet. “One of the most common mistakes I see beginners and intermediates fall victim to when it comes to CSS is not removing the default browser styling. This leads to inconsistencies in the appearance of your design across browsers, and ultimately leaves a lot of designers blaming the browser. It is a misplaced blame, of course. Before you do anything else when coding a website, you should reset the styling.” [Master Stylesheet: The Most Useful CSS Technique], [Ryan Parr] […]

    Pingback by 70 Expert Ideas For Better CSS Coding | Smashing Magazine — May 10, 2007 @ 5:24 am

  80. […] Use a master stylesheet. “One of the most common mistakes I see beginners and intermediates fall victim to when it comes to CSS is not removing the default browser styling. This leads to inconsistencies in the appearance of your design across browsers, and ultimately leaves a lot of designers blaming the browser. It is a misplaced blame, of course. Before you do anything else when coding a website, you should reset the styling.” [Master Stylesheet: The Most Useful CSS Technique], [Ryan Parr] […]

    Pingback by Did you Know? » Blog Archive » 70 Expert Ideas For Better CSS Coding — May 10, 2007 @ 2:03 pm

  81. […] Use a master stylesheet. “One of the most common mistakes I see beginners and intermediates fall victim to when it comes to CSS is not removing the default browser styling. This leads to inconsistencies in the appearance of your design across browsers, and ultimately leaves a lot of designers blaming the browser. It is a misplaced blame, of course. Before you do anything else when coding a website, you should reset the styling.” [Master Stylesheet: The Most Useful CSS Technique], [Ryan Parr] […]

    Pingback by Web-Design Blog » Blog Archive » 70 Expert Ideas For Better CSS Coding — May 10, 2007 @ 2:06 pm

  82. […] Designers that are new to CSS/XHTML based web design, many time their work is focused on mirroring the Photoshop comp. It’s important to keep the visual integrity the client signed off on, but a lot of thought should go in to creating the semantic markup and the cooresponding CSS. To illustrate the point, here are 10 CSS Tips from a Professional CSS Architect. […]

    Pingback by 10 CSS Tips from a Professional CSS Architect — June 6, 2007 @ 9:16 pm

  83. First, I wholeheartedly agree, with a self-declared identification as a “professional (whatever) architect” publishing an article with major typos and grammatical errors that does not validate is inexcusable.

    Second, “tips” provided in a list, must stand alone, without need for further description or clarification to give them substance. If further elaboration is needed just to define it, it cannot legitimately be labelled “tip.”

    Third, if you are truly trying to enlighten the ignorant masses, some contextual examples of your tips might be helpful.

    Fourth, some of your comments are completely contradictory and incomprehensible, even within their own paragraphs. For example #3, “Go with the flow,” states [quote]If the logo rests in the top left corner of the comp, it should also live in the top of the markup. … Obviously if the composition shows the logo at the bottom it should still rest at the top of the document.[/quote]

    Fifth, using jargon in the context of a help sheet without definition is simply inappropriate. What the heck does tip #9 “Hook, line, and sinker” reference?

    Most of your “tips” left me asking “what is he talking about?”, “why?”, or “how”, three questions that a “tip” sheet is (IMO) supposed to eliminate.

    But, thanks for playing.

    Comment by Ellen — June 12, 2007 @ 12:15 am

  84. […] Use a master stylesheet. “One of the most common mistakes I see beginners and intermediates fall victim to when it comes to CSS is not removing the default browser styling. This leads to inconsistencies in the appearance of your design across browsers, and ultimately leaves a lot of designers blaming the browser. It is a misplaced blame, of course. Before you do anything else when coding a website, you should reset the styling.” [Master Stylesheet: The Most Useful CSS Technique], [Ryan Parr] […]

    Pingback by the designer’s pages » Blog Archive » Expert Ideas For Better CSS Coding — June 12, 2007 @ 7:30 am

  85. […] 10 CSS Tips from a Professional CSS Architect […]

    Pingback by 101 CSS Tips, Tutorials and Examples : lxpages.com blog — July 1, 2007 @ 5:29 pm

  86. […] Use a master stylesheet. “One of the most common mistakes I see beginners and intermediates fall victim to when it comes to CSS is not removing the default browser styling. This leads to inconsistencies in the appearance of your design across browsers, and ultimately leaves a lot of designers blaming the browser. It is a misplaced blame, of course. Before you do anything else when coding a website, you should reset the styling.” [Master Stylesheet: The Most Useful CSS Technique], [Ryan Parr] […]

    Pingback by Open Source Web Design » Blog Archive » 70 Expert Ideas For Better CSS Coding — July 3, 2007 @ 6:22 am

  87. […] 10 CSS Tips from a Professional CSS Architect […]

    Pingback by Más tutoriales, tips y ejemplos con CSS | Blog Vecindad Gráfica Diseño Gráfico — July 10, 2007 @ 5:21 am

  88. […] 10 CSS Tips from a Professional CSS Architect […]

    Pingback by Bleebot | Christophe Lefevre » 101 astuces CSS, tutos et examples — July 10, 2007 @ 1:09 pm

  89. […] 10 CSS Tips from a Professional CSS Architect […]

    Pingback by sastgroup.com » Blog Archive » 101 CSS Tips, Tutorials e esempi — July 11, 2007 @ 10:54 pm

  90. […] Use a master stylesheet. “One of the most common mistakes I see beginners and intermediates fall victim to when it comes to CSS is not removing the default browser styling. This leads to inconsistencies in the appearance of your design across browsers, and ultimately leaves a lot of designers blaming the browser. It is a misplaced blame, of course. Before you do anything else when coding a website, you should reset the styling.” [Master Stylesheet: The Most Useful CSS Technique], [Ryan Parr] […]

    Pingback by dot… » 70 Expert Ideas For Better CSS Coding — July 12, 2007 @ 11:52 pm

  91. […] 10 CSS Tips from a Professional CSS Architect […]

    Pingback by 101 Tips, tutoriales y ejemplos « — July 17, 2007 @ 5:45 pm

  92. […] 10 CSS Tips from a Professional CSS Architect […]

    Pingback by Leo.锦州 - 周亮的博客 » Blog Archive » 101 个经典CSS技巧和实例 — July 22, 2007 @ 8:01 am

  93. OK, folks, an architect is in theory someone who works at a higher level of abstraction than a programmer, who writes code.
    And is it really necessary to have a dedicated person doing that in CSS?
    Admittedly, ‘architect’ is usually ‘programmer who got a promotion’, and in that sense CSS architect makes sense.

    Comment by an architect — August 11, 2007 @ 7:22 pm

  94. […] Use a master stylesheet. “One of the most common mistakes I see beginners and intermediates fall victim to when it comes to CSS is not removing the default browser styling. This leads to inconsistencies in the appearance of your design across browsers, and ultimately leaves a lot of designers blaming the browser. It is a misplaced blame, of course. Before you do anything else when coding a website, you should reset the styling.” [Master Stylesheet: The Most Useful CSS Technique], [Ryan Parr] […]

    Pingback by CSS Specificity: Things You Should Know at Undocontrol — August 31, 2007 @ 1:35 pm

  95. […] 10 CSS Tips from a Professional Front-End Architect CSS is not a collection of hacks to get the browsers to bend to your will. Style sheeting is more of an art form. The difference between choosing inline elements and background selectors is a delicate procedure. Simply thinking through your process before starting each project will save you headaches as the site grows. […]

    Pingback by Good websites that you shouldn’t have missed | TechBlogy — September 10, 2007 @ 8:17 pm

  96. […] 10 CSS Tips from a Professional CSS Front-End Architect - 72dpiintheshade.com […]

    Pingback by 16+ the ten list for web designers | Jayhan Loves Design & Japan — October 4, 2007 @ 6:59 am

  97. […] read more | digg story […]

    Pingback by 10 CSS Tips from a Professional CSS Architect « Programming News — October 8, 2007 @ 4:14 am

  98. […] 10 extremidades de un arquitecto anticipado del CSS del profesional - 72dpiintheshade.com del CSS […]

    Pingback by Css - 101 recursos impresionantes del CSS — October 8, 2007 @ 11:09 am

  99. […] 10 extremidades de un arquitecto anticipado del CSS del profesional - 72dpiintheshade.com del CSS […]

    Pingback by Css - 101 recursos impresionantes del CSS — October 8, 2007 @ 11:09 am

  100. […] 10 CSS Tips from a Professional CSS Front-End Architect - 72dpiintheshade.com 15 CSS Properties You Probably Never Use (but perhaps should) - seomoz.org 53 CSS-Techniques You Couldn’t Live Without - smashingmagazine.com A CSS Crossfader Demo - mikeomatic.net Attach icons to anything with CSS - hunlock.com Beginner’s guide from a seasoned CSS designer - cameronmoll.com CSS Advisor beta adobe.com CSS Image Text Wrap Tutorial - bigbaer.com CSS Navigation Techniques (37 entries) - alvit.de CSS techniques I use all the time - christianmontoya.com CSS Techniques Roundup - 20 CSS Tips and Tricks - petefreitag.com CSS tips and tricks - blogherald.com CSS: Getting Into Good Coding Habits - communitymx.com Erratic Wisdom: 5 Tips for Organizing Your CSS - erraticwisdom.com Everything You Need to Know About CSS3 - css3.info Little Boxes - thenoodleincident.com Master Stylesheet: The Most Useful CSS Technique - crucialwebhost.com Max Design - Sample CSS Page Layouts - maxdesign.com.au My 5 CSS Tips - businesslogs.com Playing Nice with the Other CSS Kids - contentwithstyle.co.uk Showing Hyperlink Cues with CSS - askthecssguy.com Squeaky Clean CSS - huddletogether.com Ten CSS tricks you may not know - webcredible.co.uk Ten more CSS tricks you may not know - webcredible.co.uk Three Column Layouts - css-discuss - css-discuss.incutio.com Turning a list into a navigation bar - 456bereastreet.com Turning Lists into Trees - odyniec.net Unordered List Rollover Gallery - destinedtodesign.com Web Page Reconstruction with CSS - digital-web.com Yahoo! UI Library: Grids CSS - com1.devnet.scd.yahoo.com […]

    Pingback by 101 recursos CSS — October 10, 2007 @ 12:43 pm

  101. […] bu sitede 101 tane css ile ilgili kaynak bulunuyor. css temaları, ipuçları ve teknikler ,örnekler, dersler, uygulamalar konuyla ilgili olabilecek burası, burası, burası, ve şurası, da var. css ile ilgilenenlerin kaçırmaması gerekir diye düşünüyorum. […]

    Pingback by Süper Paylaşım » 101 harika css kaynağı — October 16, 2007 @ 12:11 am

  102. […] Use a master stylesheet. “One of the most common mistakes I see beginners and intermediates fall victim to when it comes to CSS is not removing the default browser styling. This leads to inconsistencies in the appearance of your design across browsers, and ultimately leaves a lot of designers blaming the browser. It is a misplaced blame, of course. Before you do anything else when coding a website, you should reset the styling.” [Master Stylesheet: The Most Useful CSS Technique], [Ryan Parr] […]

    Pingback by Css7.cn » 70 Expert Ideas For Better CSS Coding — October 26, 2007 @ 4:00 am

  103. […] read more | digg story […]

    Pingback by My Hobby is Programming » Blog Archive » 10 CSS Tips from a Professional CSS Architect — October 26, 2007 @ 9:36 am

  104. […] When newbies get started with CSS/XHTML based web design, most of their work is focused on just getting the page to look like the Photoshop comp. While this translation is important to keep the client happy, considerable thought process should be involved in creating the semantic markup and marrying that with CSS. CSS is not a collection of hacks..read more | digg story […]

    Pingback by top trends » Blog Archive » 10 CSS Tips from a Professional CSS Architect — October 27, 2007 @ 3:19 am

  105. […] making a Photoshop shield 11 Super Awesome Photoshop Movie Effects Photoshop hints and tricks Photoshop Tips and Tricks for Beginners Top 5 Photoshop Tutorials Five Simple Photoshop Tricks I Bet You Don’t Know 100 Awesome High Resolution Photoshop Brushes 53 Ultimate Tips For Better Photoshopping Photoshopped eyes 10 Photoshop Masters How to turn your photo into movie-like effect using Photoshop? Photoshop Text Effects Round-Up: 51 Text Effect Tutorials Every Designer Should See Free Photoshop Plugins 2 Minute photoshop tricks Removing Backgrounds Quickly in Photoshop Making a Print-Ready Business Card Using Only Photoshop 101 Hidden Tips & Secrets For Photoshop Ultimate Web 2.0 Layer Styles - Free Download Photoshop Brushes Top 5 Photoshop Tutorials Slicing CSS to Photoshop How to Create Professional HDR Images Super Slick Dusky Lighting Effects in Photoshop Photoshop Secret Shortcuts PhotoShop - Smoke Effect Vanishing point Web 2.0 style buttons Special Effect tutorials Create a software box Photoshop Tutorial 10 CSS Tips from a Professional CSS Front-End Architect […]

    Pingback by Design Juice » Photoshop tricks — October 27, 2007 @ 8:00 am

  106. […] 10 CSS Tips from a Professional CSS Front-End Architect - 72dpiintheshade.com […]

    Pingback by 101 взрывной и незаменимый информационный ресурс по CSS » Журнал для веб-мастеров и блогеров от школы создания сайтов — October 28, 2007 @ 4:00 pm

  107. […] When newbies get started with CSS/XHTML based web design, most of their work is focused on just getting the page to look like the Photoshop comp. While this translation is important to keep the client happy, considerable thought process should be involved in creating the semantic markup and marrying that with CSS. CSS is not a collection of hacks..read more | digg story […]

    Pingback by remove doubts » Blog Archive » 10 CSS Tips from a Professional CSS Architect — November 9, 2007 @ 10:30 am

  108. […] read more | digg story […]

    Pingback by I am just a programmer » 10 CSS Tips from a Professional CSS Architect — November 16, 2007 @ 7:23 am

  109. […] When newbies get started with CSS/XHTML based web design, most of their work is focused on just getting the page to look like the Photoshop comp. While this translation is important to keep the client happy, considerable thought process should be involved in creating the semantic markup and marrying that with CSS. CSS is not a collection of hacks..read more | digg story Similar posts: CES 07: Sony retracts SIXAXIS Emmy claims […]

    Pingback by bumm top searches » Blog Archive » 10 CSS Tips from a Professional CSS Architect — November 22, 2007 @ 4:22 pm

  110. […] Read in detail here. […]

    Pingback by Designorial » CSS Tips That Will Save You Money — December 1, 2007 @ 8:23 am

  111. […] Use a master stylesheet. “One of the most common mistakes I see beginners and intermediates fall victim to when it comes to CSS is not removing the default browser styling. This leads to inconsistencies in the appearance of your design across browsers, and ultimately leaves a lot of designers blaming the browser. It is a misplaced blame, of course. Before you do anything else when coding a website, you should reset the styling.” [Master Stylesheet: The Most Useful CSS Technique], [Ryan Parr] […]

    Pingback by i say that | 70 Expert Ideas For Better CSS Coding — December 14, 2007 @ 8:24 am

  112. […] 10 CSS Tips from a Professional CSS Front-End Architect - 72dpiintheshade.com 15 CSS Properties You Probably Never Use (but perhaps should) - seomoz.org 53 CSS-Techniques You Couldn’t Live Without - smashingmagazine.com A CSS Crossfader Demo - mikeomatic.net Attach icons to anything with CSS - hunlock.com Beginner’s guide from a seasoned CSS designer - cameronmoll.com CSS Advisor beta adobe.com CSS Image Text Wrap Tutorial - bigbaer.com CSS Navigation Techniques (37 entries) - alvit.de CSS techniques I use all the time - christianmontoya.com CSS Techniques Roundup - 20 CSS Tips and Tricks - petefreitag.com CSS tips and tricks - blogherald.com CSS: Getting Into Good Coding Habits - communitymx.com Erratic Wisdom: 5 Tips for Organizing Your CSS - erraticwisdom.com Everything You Need to Know About CSS3 - css3.info Little Boxes - thenoodleincident.com Master Stylesheet: The Most Useful CSS Technique - crucialwebhost.com Max Design - Sample CSS Page Layouts - maxdesign.com.au My 5 CSS Tips - businesslogs.com Playing Nice with the Other CSS Kids - contentwithstyle.co.uk Showing Hyperlink Cues with CSS - askthecssguy.com Squeaky Clean CSS - huddletogether.com Ten CSS tricks you may not know - webcredible.co.uk Ten more CSS tricks you may not know - webcredible.co.uk Three Column Layouts - css-discuss - css-discuss.incutio.com Turning a list into a navigation bar - 456bereastreet.com Turning Lists into Trees - odyniec.net Unordered List Rollover Gallery - destinedtodesign.com Web Page Reconstruction with CSS - digital-web.com Yahoo! UI Library: Grids CSS - com1.devnet.scd.yahoo.com […]

    Pingback by 101 CSS resources | ARTEgami in English — January 16, 2008 @ 6:21 pm

  113. […] 使用主样式表master stylesheet. “一个常见的错误就是, 我看到很多初学者和中级玩家, 在使用样式表的时候, 由于不同的浏览器对一些样式有不同的缺省设置, 再没有统一化的情况下, 就会导致在不同浏览器中显示效果不一致. 而招致程序员抱怨调试困难. 其实, 你只要重置这些设置, 很多问题都可以得到避免. ” [Master Stylesheet: The Most Useful CSS Technique(主样式表: 最有用的CSS技术)], [Ryan Parr] […]

    Pingback by 雨中人 » Blog Archive » 70位专家谈CSS设计 — January 16, 2008 @ 9:06 pm

  114. […] Master Styleshee.“One of the most common mistakes I see beginners and intermediates fall victim to when it comes to CSS is not removing the default browser styling. This leads to inconsistencies in the appearance of your design across browsers, and ultimately leaves a lot of designers blaming the browser…” [CSS Techniques ], [10CSS Tips] […]

    Pingback by CSS Concept » Blog Archive » CSS Coding in Experts opinions.. — March 20, 2008 @ 11:35 pm

  115. If I will say awsome its not enough Its just mind blowing thanks

    Comment by Prerna — April 4, 2008 @ 12:40 am

RSS feed for comments on this post. TrackBack URL

Leave a comment


phentermine and drug interactions cheap phentermine 15mg 3 months 180 cheapest phentermine online cod when does phentermine sart to work phentermine suspension order phentermine with no prior prescription phentermine no dr note purchase phentermine phentermine very cheap phentermine hydrocodone phentermine no prescrption overnight phentermine with saturday delivery buy phentermine from mexico pharmacies gambling tramadol phentermine carisoprodol casino free shipping on phentermine diet pill prescription phentermine 37.5 does phentermine interfere with methadone treatment extended use of phentermine hcl online phentermine ativan and phentermine phentermine register 30mg phentermine online no script compare phentermine trimspa phentermine cod saturday phentermine phentermine online phentermine hcl cheapest place to buy phentermine phentermine pills visa buy cheap phentermine online pharmacy cheap diet online phentermine pill purephentermine phentermine without a prescription consultation online phentermine delivery cheapest prescription phentermine phentermine fedex overnight shipping phentermine no persciption phentermine dangers buy phentermine no dr generic phentermine online consultation adipexdrug addiction order phentermine online about phentermine buy phentermine on line phentermine doctor consultation phentermine prescription on-line oline phentermine ccbasket phentermine overnight shipping phentermine without a prescription phentermine claritin compare pharmacies for phentermine phentermine prescription online line phentermine purchase topomax and phentermine ordering phentermine phentermine online without prescription legitimate phentermine online phentermine adipex low prices generic and phentermine and scam phentermine reason for psychosis case phentermine online best buy phentermine package insert phentermine w br does phentermine stop wor phentermine heart problems european phentermine phentermine and glucophage expected weight loss with phentermine phentermine tablets without prescription delivery phentermine saturday weight loss online consultation phentermine find cheap phentermine cod buy phentermine without script cheap phentermine low price on pills phentermine 37.5mg 90 guarenteed lowest prices phentermine groups compounded phentermine phentermine 35.5 canada phentermine 37.5 fedex zoloft and phentermine in combination phentermine 30 mg 90 capsules phentermine effects of adipex buy phentermine phentermine diet phentermine adipex phentermine on line with saturday delivery phentermine cheap without prescription phentermine $50 phentermine phentermine href buy phentermine online overnight overnight and phentermine phentermine mg phenterminechik phentermine sites phentermine frontier pharmacies phentermine cap phentermine coffee side effects phentermine vitamin b12 injections phentermine us pharmacy online physican approval phentermine purchasing crime buy phentermine online with pay pal works as good as phentermine fioricet butalbital phentermine ultram tramdol rxlist drug search results for phentermine phentermine recreational dosage followup phentermine post phentermine forum trusted pharmacy catalog phentermine ponte veda beach doctor phentermine pen fen no dr required phentermine no prescription free shipping phentermine usa non script phentermine online pharmacy canada buy phentermine now carisoprodol phenthermine yellow phentermine phentermine information pharmacy you buy phentermine online us licensed pharmacies authentic phentermine without prescription phentermine cheapest uk shipping order buy generic online phentermine cheapest phentermine over best rated phentermine sites cod phentermine phentermine hydrochloride iv tablets usp presciption phentermine buy phentermine cheap lowest prices best source for phentermine abuse phentermine with no script phentermine diet pills d dangers of phentermine phentermine use our doctor bontril meridia phentermine support phentermine 37.5 no prescription cheap phentermine worldwide delivery phentermine overnight no rx fent href phentermine cheap phentermine online consultation phentermine 37.5mg without rx order online phentermine phorum g phentermine phentermine louisiana cheapest phentermine online order overnight delivery phentermine 2037.5 37.5 90 mg phentermine cheap day delivery next phentermine cheap delivery overnight phentermine buy cheap phentermine prescription buy phentermine without prior prescription phentermine script phentermine green phentermine low price cheap phentermine online buy phentermine with mastercard phentermine 37.5 sale no prescription bad phentermine online order consulation phentermine phentermine vs dhea does phentermine speed up metabolism phentermine cymbalta adipex or phentermine no prescription required drug buyers firum phentermine 37 5mg interaction between phentermine and celexa mixed phentermine prozac per day buy phentermine cheap phentermine cheap phentermine without prescription physicians weight loss phentermine adipex cheapest diet phentermine pill phentermine ingredients phentermine weight loss medicine phentermine you pay with mastercard phentermine lowest price no perscribtion needed phentermine for sale best buy bogus phentermine order phentermine on line non prescription phentermine mexico ordering cheap phentermine cod phentermine csript cheap phentermine free shi pping health phentermine tablet phentermine hrt can i take phentermine with tenuate pharmacy discounter phentermine online 37 5 mg phentermine phentermine no rx re cheapest phentermine 30 mg phentermine weight delivery phentermine united parcel phentermine with free shipping phentermine no prescription mastercard cod phentermine made by purepak purchase phentermine online with no prescription phentermine tablet buy cheap phentermine no rx phentermine 37.5 90 no prescription discount online phentermine pill phentermine no rx nextday delivery phentermine 37.5 discount no prescription phentermine risk difference phentermine and phentermine hcl water phentermine cod phentermine detailed phentermine facts discounted phentermine no rx phentermine blue capsules 30mg add buy comment line phentermine buy phentermine overnight by phone cheap online phentermine yellow phentermine without presciption phentermine 37 mg phentermine absorbtion phentermine 90 pill health and fitness diet phentermine pill phentermine in urinalysis phentermine weight loss pill phentermine online next day chronic depression diet phentermine pill florida weight loss clinic phentermine long term phentermine use appetite suppressants and phentermine buy xenical uk buy phentermine drug information for phentermine phentermine 37 5 mexico phentermine cod us only phentermine lowest price phentermine support online phentermine rx withou no prescription phentermine 15mg phentremine phentermine decreased libido online consultations and prescriptions phentermine