Levels of CSS knowledge

As you might have understood by now I’m very much pro web standards. The current widely accepted standards are: (X)HTML for page structure, CSS for design, and Javascript for behaviour. HTML is pretty well known by now, it has been there since the beginning of the web and there are tutorials everywhere that gets you started. CSS is starting to get a grip, large companies are switching their sites to CSS based layouts and the webdev blogosphere reaches more and more people.

When you promote web standards, like many of us do, you get to talk to a lot of people. If you promote it in a live chat room like #CSS on EFNet it gets even clearer: there are a lot of different levels of CSS knowledge out there. This article is going to list some of those levels along a rating of how this kind of developer will affect the web. Here we go:

Level 0

“CSS? Isn’t that a multiplayer game?”

These people have probably never made a webpage in their life. If they did it was pure HTML and they barely knew what they were doing. We get some of these people in #CSS, not because they want to start learning but because they think they’ve come to another channel, often looking for CS:S. No need to worry about these people, they probably won’t do many webpages in their lives so they can’t do much harm.

Level 1

“Yeah, I use it to remove underlines on links sometimes”

Different from Level 0, the people in this level do actually know basic HTML. They probably learned it at least five years ago and have made a couple of simple sites. They use very little CSS, only when they need to do simple stuff you can’t do with HTML only, like removing underlines and setting line-height (No! don’t even think about setting line-height with HTML). While these people could present us with some badly coded sites they rarely have any large and well visited ones. This means that they won’t do much harm either.

Level 2

“No, I don’t like divs; tables are much easier to work with”

Instead of just playing with HTML, like those from Level 1, some continued their quest. They mastered HTML tables and started using it to make things look just like they wanted. Somewhere around reaching HTML mastery they stopped looking at new ways of working. They heard about other people using “divs to design their pages” and even took some time one day to try to learn what the fuss was about. After a few hours of not getting it they gave up, went back to the familiar land of tabled layouts, and stayed there. Many do know CSS syntax and sometimes even some background but they believe it’s far too hard and ill-supported to use instead of tables.

Watch it! These are dangerous people, some even webmasters of big corporate websites. Since they have been in the business for a while many are leaders for their web departments. These are the people it’s most important to reach, and if we do it means a lot for the web. Concentrate on these people all you standards advocates.

Level 3

“Yes I’ve heard it’s good, but I can’t use it because of…”

While people in this group still don’t use CSS for positioning they do know some CSS and perhaps heard good things about it. They’ve tried making simple layouts and some even liked how it felt to work with. Problem here is that something is stopping them. Perhaps they have a Level 2 boss, perhaps their website needs to cater for Netscape 4 users, there might be many different reasons but something is in the way.

These people need to know that while CSS does not work everywhere that isn’t the end of the world. Old browsers will still get all your content, just pure content. Instead of them you will reach a new audience: there may be accessibility and usability benefits, newer browsers will get a richer experience and the site might even get easier to add content to (which will lead to more content). Tell this to the people in this group. If you’re unlucky they are not be the ones making decisions but in that case their influence on Level 2 Bosses will still be worth it.

Level 4

“CSS? Oh! Yes, I use divs for all my layouts”

It’s not unusual that these people use only divs on their sites. Each part of their page gets a div, often with a carefully crafted id (#toprightredline or even #r5_c7 with r standing for row and c for column), and then they position their divs with absolute positioning by the pixel. The result looks good, hey, it even validates as XHTML 1.1(!) but what they have missed is that most of the benefits of CSS has been lost. These pages are terrible when it comes to a screen reader interpreting it. Same with older non-CSS browsers, they won’t get the content… they will get one big block of text. When using bad class names and ids you loose the possibility to change the layout: if that red line needs to be changed to black you’ll need to change all your HTML documents too (can be hundreds). Don’t fall into the trap of telling them they are stupid or make them google “css”, they know they are smart people and they did learn about CSS from google in the first place. Tell them exactly what could be improved on their sites. Tell them what the benefits are. Keep your cool and tell them why.

People of Level 4 produce sites that are rather bad. The damage is reduced though by them often being open to new ideas. After all, not to long ago they did manage to learn and start to use CSS.

Some of the reasons for people thinking this way is because of what WYSIWYG editors are doing. Most such editors produce terrible div-only code but I’m hearing that there are gradual improvements in this field. This is a good thing and hopefully this will help people move from Level 4 to the higher levels.

Level 5

“I use CSS for design, it’s better than tables because of…”

After a lot of reading, talking to people and thinking most people arrive at Level 5. This is where you both can use CSS and know why it’s better. Some people in this level have minor problems on the sites they produce but it’s nothing serious. When asked they can argue why separating structure and design is a good thing and they have worked with CSS long enough to know the common pitfalls. I’m guessing many of the readers of this article are on this level and I feel I am. But this is not the best we can do…

Level 6

“What version of CSS? Yes, I do. Did you read my book about…”

For some people knowing how and why isn’t enough. These people strive to improve how CSS is used and are publishing great articles on new ways of using it. They constantly go back to the basic needs CSS is filling and attack problems from new angles, often resulting in more great articles. Some have actually read the whole W3C specification on CSS (sic) and they certainly know which parts are supported by which browsers. They function as role models for beginners and do great things for the web with their influence. Many work with the Web Standards Project. If you ever find an error on their site there is a reason for it. Ask them and they’ll tell you why.

 

That’s it. I hope this article gave you some inspiration to keep pushing the web to new victories. At which level are you? Do you have examples of people in last level?

229 responses to “Levels of CSS knowledge

  1. Level 4 seems to be the most common misunderstanding about web standards. People assume that replacing tables with divs is the right answer. About 10 mins of helping usually turns them away from that though and start seeing the benefits :)

  2. Great article! I think i’am at level 5 but it took it’s time. To answer you’re question about trend setters, the first person how comes to mind is Roger Johansson over at 456bereastreet.com.

  3. Nice little post, might even help those who are afraid of CSS understand how to make the links between what knowledge they do and don’t know. And why it takes time to piece it together.

  4. I hate when people call CSS design ‘using divs’ — divisions are unsemantic and should be carefully used. A bunch of nested divisions really isn’t much better than a layout using tables.

  5. I classify the first four groups all into one and then weed out the talkers from the professionals. I would be more interested to know how their cross-browser strategies of CSS come into play or what kind (if any) architecture’s they use to maintain their style sheets. What are their thoughts on hack management? What’s the benefit (or drawbacks) of conditional comments?

    Btw, did you read my book on…

  6. @Dustin: Jokes aside, those are great topics for later articles! :) I’ll see what I can do.

  7. I like the classifications you propose. However, one thing that most CSS zealots won’t readily acknowledge is that complex flexible or “liquid” layouts are still either impossible (if you want to support IE) or very fragile without adding a table as a placeholder for overall layout. (Visit any 3-column pure-CSS site and resize the window to watch the content squeeze out the bottom.)

    This isn’t the fault of CSS2. IE6 is unfortunately still the majority browser, and we still have to support it. Until we can use min-width reliably to keep things from collapsing too far, pure CSS layouts will be restricted to two columns or fixed-width. (I‘m a big fan of ems personally, but some clients still want those 3 columns that “fill the screen.” I’ve done a lot of complex fixed-width work using semantic markup and CSS, but I’m still waiting for a robust flexible CSS layout that can match what could be done using the basic old-school 3-column table.

  8. @Andrew: did you try zooming the layout on this page? It’s a three-column thing and it resizes to really, really small sizes just fine. It’s perhaps not fluid though, more elastic, so I’m not sure we’re talking about the same thing.

    I think CSS works just fine to do 3 col layouts with and I don’t see the problem with it.

  9. Emil, I would still consider your layout to be fixed-width, even though it uses ems. Whether you use ems or pixels, the width of your page is independent of the widht of the window. This is my preferred method too, since it scales nicely with the font size on the user’s browser and gives predictable results. What I was talking about are the kinds of very common table-based layouts where you have a 200px column on the left and right, and the middle stretches to fill the window when it’s resized.
    A few months ago I had really high hopes for the One True Layout, but after working with it I found it has limitations in this area too. Its author simply brushes off the fact that it can’t mix 2 fixed and 1 liquid columns by saying “I don’t have any use for that kind of layout.”
    Recently I read Apple’s article on Web Development Best Practices and found that I agree with much of what they say. Yes, the table is an unsemantic wrapper to hold the overall layout, but in many cases I have found this method necessary. I would like to see more opinions on these “best practices.”

  10. Pingback: Left Unspoken » Thursday Thirteen
  11. I think that I’m in some place between level 4 and level 5. I’m trying to improve my knowledge about accessibility and semantic markup, it’s a long way but at the same time it’s a lot of fun!

  12. @Andrew: Perhaps you just do more web development work than I do. I have never had to resort to using tables for layout, and to be honest I’d rather rethink my design than doing so. I understand clients might have problem with that.

    Thanks for that Apple link, always interesting to see what big corprations are doing.

  13. The best part of this article was the fact that I remember being at each step, all the way up to where i am at now :) It was fun to read and made me realize how far I’ve come

  14. Maybe that’s why you put a (!) there, but there’s really no strict dtd in XHTML 1.1.

    And to me, a div only site is way better than a tablefull site in all senses. At least they give screen readers an easier job.

    I could be wrong. lol.

  15. @draco: Thanks, I see now that XHTML 1.1 is just an “extension” of XHTML 1.0 Strict. Removed the word strict from the text above.

  16. I would say I’m a level five, however I’m not really at the implementation stage – I understand why I should be using it but I don’t have the experience behind me to really utilise it – I’m currently looking at a website I frequent and have offered to upgrade their site from basic HTML to CSS. They were using the XHTML Standard and had over 290 errors, simply by switching to HTML Strict I reduced to the error count by 110.

  17. Interesting post. I’m a software engineer who is still learning the proper methods of web development, and I am in the process of trying to learn to get to level 5 at the moment, though in the site I’ve been building lately, I still have some stray HTML inserted for layout reasons and my CSS is pretty poorly organized and includes too many one-off classes and id-level styles. This definitely inspired me to try to work harder to clean things up and learn how to do it right. Thanks.

  18. Pingback: Beyond Caffeine » What’s Your CSS Level?
  19. You missed one – Level 10
    ‘Yes, I will have that done today.’
    They use everything available to make things work, can tell you why and why not, and don’t worry about whether or not its ‘right’ by some arbitrary standard. Also, they are too busy to write self-congratulatory posts on a random site about how people who don’t use CSS properly write bad code. Congrats on your vacuous story.

  20. @Jeff: I see what you mean. Good code and getting things done are different things and from what I hear it’s not often possible to combine them. I don’t look down on the people that are not experts, this is a list that I myself have climbed, from one to five where I think I am now. My intent is not to insult anyone :) (Hope that’s clear enough)

  21. I think I’m part Level 3, Level 4 and Level 5. I’m still learning. I know the benefits. But it’s not coming to me as easily as it might have to others.

    (P.S I’m working on a web standards version of my site at present).

  22. Nice post. I’d say I’m somewhere between a 4 and 5 myself, and I’m actually finding that clients requirements (SEO, accessibility) are pushing me to put more of my CSS knowledge into practice. My boyfriend just made the jump from a level 2 to a level 4 with a little help from a nice job offer. I’m happy to see he’s finally making some progress and learning how capable CSS is.

  23. Pingback: thedeplorableword | Archive | Levels of CSS
  24. Pingback: AllThingsDev.com » Levels of CSS knowledge
  25. Good points. Although, I will say that it seems a little pretentious to me. As if being level 4 or 5 is REALLY that bad? I consider myself a level 5, but do I want to be level 6? As much as I’d like to be the new innovative and progressive CSS god where CSS isn’t just a “programming language”, but an art form that one knows how to shape and mold to their desires. I guess as a level 5er I think of it as a “tool that I can use to make my site pretty, and do other cool and useful things with”

  26. @Jeff: I guess that leaves rooms for level 11, then. Those people who can say: “Yes, I will have that done today,” AND do it correctly.

    Standards are arbitrary? It’s somewhat sad that you think so; HTML/CSS standards are certainly _not_ arbitrary. They were carefully considered and thought out by very smart people for reasons that aren’t bloated by commercial considerations. It’s science, not “who can make the worst web site the fastest.”

    And true professionals always _make_ time to advocate for the correct way of doing things. Just because you think it’s all a waste of time, does not mean that you are righteous in posting condescending comments in response to a well written post–vacuous indeed.

    This blog is title “Friendly Bit”. If you’re not going to attempt to be friendly, please try another venue to outlet your frustration :)

  27. Its a well written article. I think im on level 4, although I make sure that I dont use table less layouts just for the heck of it. There is this design which is complete of images with an internal scroll of text along with navigation. After creating a css based layout, realised that it was more confusing and tedious than the table one. The code was running real long too. Hence used a table for the basic layout and divs for the scroll and other text elements. There is this one site I have created which is completely in CSS last year. Would like to know your review on it..mistakes,improvements,etc. its http://www.ishanya.com

  28. Pingback: Jeriko One » Blog Archive » Level of CSS Knowledge
  29. Pingback: Usabilità
  30. Pingback: Ukens nettips uke 10 | FWW Web
  31. Level 5, thats about me. Mind you, I quite enjoy a good game of CS:S aswell.

  32. I liked this article, but I think there is a stage between stages 4 and 5. I consider myself, by your standards, to be a stage 4.5-4.75.

    I am not yet confident that I could solve any CSS problem that comes my way, I still have trouble figuring out how to separate my css documents (as done in ALA) but I’m also not using fireworks DIV slicing or anything. I do my best to create semantic code, with resonable tagging, avoiding “divitis” as best I can, and I also take SEO into consideration while doing the front end coding for my company. I think that level of complexity perhaps warrants another level of development.

  33. I think I am at Level 5 but I never design within my limitations of CSS so some designs maybe too complex and I need to fall back to using a table for part of the frame design.

  34. I work at university and help maintain 4 department and 3 audience based sites which all share the same code base. Recently we decided to go from a left aligned layout to a centered layout. It took 2 lines of code added to one wrapper to change hundreds of pages instantly. Do that with your stupid tables.

  35. Very good article. I do feel noe i can improve and with the list you provided I can have an idea about what needs to be done. Think I am somewhere between level 4 and 5…

    Thanks fot the article.

  36. Pingback: steve.ganz.blog
  37. {Hi, my name is Mark, and I’m a Level 3. Hi Mark!!}

    Great article. Through my own development, I can relate to each level somewhat. I’m currently at L3 but want desperately to get to L5. I’m trying to learn divs, but for some reason, I keep hitting a wall. I do see the value and want to end my dependency on tables. {Hence, my intro.}

  38. What a terribly pompous, condescending article!

    I really like css as a tool, but you people who write about it are perhaps as annnoying and self-righteous bunch as I’ve ever come across.

    More importantly, there are lots of people I’ve met who don’t want to learn css largely because of the obnoxious, quasi-messianic bent of its proponents, and the raft of books, blogs and articles with the thinly veiled subtext of “everything YOU do is wrong”.

    Users who don’t know as much as you about something or (gasp) disagree with you are “dangerous”?

    You design webpages.
    No one starves if you fail. No one’s immortal soul is involved.

    Get a freakin grip!

  39. @Tommy: See my comment to Jeff above. These are the steps I myself have climbed. I’ve also seen others move from step to step in this list. The purpose is not to be condescending, it’s to show that there is more to learn for anyone.

  40. I know quite a few designers who are at ‘Gold’ Level 1. How inconvenient for someone to come along and insert another level into your carefully constructed heirarchy.

    Yeh, the guys I know work for a ‘market-leading’ company; they have not only removed underlines from links, but have progressed to font size (using pts of course), font family, font colors and so on. So, it’s fonts and colors basically. If they want padding (they don’t know they want it, but they do), they’ll opt for a spacer.gif.
    Sod it – I’m going to demote them to Level 1.

  41. Pingback: Idea Grapes » ???????CSS?????
  42. horrendously stuck at Level 4…reading and playing like mad to get to Level 5 or 6…

    any help is always appreciated.

  43. I think it’s a mistake to assume that it’s possible to master html without mastering css.

    I mean, ever tried to hand code a table based layout? 99,9% of all the table based layouts are probably created using a wysiwyg editor. And let’s face it : Dreamweaver’s design view makes it easy to twist and merge table cells to your liking, but it doesn’t make you think about writing semantically appropriate html.

    So there :

    html level 0 = css level 0
    html level 1 = css levels 1 through 3 (wysiwyg editor players)
    html level 2 = css level 4
    html level 3 = css levels 5 through 6 (“Yes, I can make a doctype decision and I know what <dl> stands for”).
    html level 4 = css levels 5 through 6 (anything between “I actually read the W3C specs” and “I actually wrote the w3c specs”)

  44. Pingback: Elliot Swan » Levels of CSS knowledge
  45. I agree, there should be a Level 4.5, or maybe 5.25 — it’s not enough to know and understand XHTML and CSS; the downfall is that you must know hacks, bugs, fixes and workarounds for a variety of browsers. I can code just fine, but there’s another level of knowledge you have to get to in order for your work to actually present itself as intended on certain browsers/platforms. That’s what keeps me from really being thrilled about CSS as it stands today. Tables aren’t semantic at all for design but at least they translate well.

  46. Pingback: Blog: timdream » Blog Archive » ???????CSS?????
  47. <Tommy, Mar 10> You design webpages.
    No one starves if you fail. No one’s immortal soul is involved.

    No, but hundreds of man-hours are lost. Wasted. Frittered away by having to comb through some horrific malformed table-based monstrosity. It damages productivity, and that is dangerous.

    Take my word for it. I am a web developer, and I’ve had to fix other people’s table-based work before. It’s not just a figurative headache, I assure you.

  48. Pingback: Tip(z) » CSS-nivåer
  49. Great post.
    How about some suggestions on how to get to increase your current level?
    Website recommendations?
    Book recommendations?

  50. There is one more level that I seem to run into often. These are the graphic/ad designers, that design a site in PhotoShop, slice the big picture into a lot of small pictures, throw it into GoLive, publish it to a server and call it a website. I have explained, argued, taught and berated some of them to no avail. They seem to believe what they are doing is web design/best practices/professional sites. I don’t know how to get through to these people.

  51. Excellent breakdown. Most people would have tried to break it into 3 levels, but I think all 6 of yours are necessary and distinct.

    Thanks.

  52. @Matt Williams: The only way I’ve found works is a combination of reading and trying things out yourself. I listen to people talking about CSS daily and I think that helps to. You’ll be Level 6 if you just keep pushing.

    @Dewey Williams: I know exactly what kind of people you are talking about :) I wouls call them graphic artists, not web designers. In fact, building a whole site in flash is very similar, you don’t use the features of the web, so how it that web development?

    @Brad Fults: Good to hear you like it!

  53. You people are way too impressed with your ability to deal with crappy browsers and somewhat implemented standards to produce a layout. You do the same thing as magazine layout designers, except they dont have to worry about people stretching their magazine page or switching the font sizes on them.

    I can’t believe anyone would feel snooty or talk down on people that make web pages that aren’t all produced from xml/xslt/css/dom/give it a rest, technology is supposed to make your life easier – as a software designer I fail to see why web designers are so masochistic and get pleasure from having to use convoluted hacks to make something “standards compliant”, or work with the .0001% of blind people that may look at their site.

  54. @Dirk Diggler: As I have previously stated I’m not trying to talk down people. These are steps that exist, I’ve heard many people say “I’ve been a level 2 guy”. I have full respect for people that have other reasons for not using web standards.

    I promote using HTML and CSS to produce good websites (not any XML/XSLT) instead of just HTML, is that such a big step? You seem to think this standards stuff is hard so let me tell you this: it’s not.

  55. Pingback: Pig Pen - Web Standards Compliant Web Design Blog » Blog Archive » Levels Of CSS Knowledge
  56. Pingback: Wisiwip » Blog Archive »
  57. Another naive CSS evangelist fulfilling his obligation to shamelessly spread the CSS Gospel. To be honest, this article stinks of elitism. Who could imagined that such an evangelist would put qualities that spread the ‘good CSS news’ in the highest category. Yes DIV’s are better than TABLES, but you don’t have to be a dick about it.

  58. @Bjorn: If you had read the comments I’ve made eariler to similar comments like yours you would see that these are steps I have myself been at. How is that a bad thing?

  59. Re: the comment about table-based sites not being coded by hand, I actually did that one: a table-and-frame monstrosity with JS, all in Notepad. And I was proud of it at the time.

    That’s the point this article is trying to get across, it seems: everyone who’s learning web development goes through these steps, including the best.

  60. Great article. It’s a shame about the negativity of some of the posts. There’s nothing pompous about identifying bad practice and doing your bit to promote best use of standards. (And this from someone who knows very little about the power of CSS, but knows they have a lot to learn from people like yourself, and why they should bother to do so – not sure if I’m covered in your list though!)

  61. You sound so pontific way up there on your soap box. You know what Level 6 is: Humbly to understand that there are millions of people who do this and because the w3c says “its the correct standard” that really means nothing. Heck the most popular browser in the world doesnt even follow w3c rules. Me personally, I like to incorporate at once 7-10 different languages in the LEAST into one of my web(worlds)- So if that means it is STILL going to work across the scope of web browsers and I have to go ouside the w3c “rules” to create a way to loop, hook, attach something the rules of the w3c are usless to me –just as long as it works and –continues to still work in the browser(s) – THEN , my little lernt friend- so be it. Lastly- If you love CSS so very much, learn something new, because if your a level five ( whatever that means) – and your not going to level six — your wasting away at least 3 layers….

  62. Anonymous (silly): It’s always nice with comments like yours from people that read one post and then assume that they know everything about you. I currently know Java, C#, C++, Php, Javascript and a few more at a basic level so I fully understand that the world is larger than just CSS. But that doesn’t matter in an article about “the levels of CSS” does it? Feel free to write your own list!

  63. I try to follow the CSS rules on my site but your article has given me a nudge to remove more design from my HTML code (mainly image alignment). I will put a link to your site from my web design page. Thanks

  64. I appreciate this article. I was a front end coder for 5 years and was laid-off in 2001, 3 months before my company finally evaporated along with its ping pong table and fully stocked kitchen. I’ve been doing other fun things for the past 5 years since there were no jobs for quite a while. I miss the industry and I am on my way back. I am very aware that things have changed drastically and what I was an expert in back then, is basic knowledge now. I have a lot to learn to catch up to my colleagues who stuck it out. This article has been a great help in my awareness of where I am at, and where I need to be. Thanks very much for writing it.:)

  65. @getting back: Thanks for commenting, it’s always nice to hear that my writing helps someone. Surfing around you’ll find a lot of good resources to help you get back on track. I’ll meet you at your next ping pong table! :)

  66. “CSS? Isn’t that a multiplayer game?” :) I love it. I would have to say that I am at level five. I understand why CSS is a good thing and I use it though I would be pants at talking about it in conversations. It would be nice to be a bit more gifted with CSS when it comes down to it.

  67. To be true, I do not remember the last time I used “table”s, not more then 2 years though.
    I think strong Level-5 is for me, but thanks a lot to those from Level-6 who make it possible for others to know something new. The reason I make post here is to show for beginers: there are planty developers who made it professional with CSS, so JOIN! :)
    Thank you,Emil.
    Sorry for my English…

  68. think at at level 1 :((
    just trying to learn now… and so am here… will see after i trying making one site atleast…

  69. Hi, I just found out that I am level 5 at CSS, which is quite surprising. I make website layouts as a hobby and your site is very useful. =]

    Best wishes, Ruby

  70. Pingback: Human Engineer » Archive du blog » Ingénieur Architecte logiciel
  71. Pingback: Tip(z) » Vilken CSS-nivå befinner du dig på?
  72. Pingback: christoph-hoerl.de | Weblog und Homepage von Christoph Hörl | Levels of HTML knowledge
  73. I get very frustrated with people in level 0, 1 and 2. Anyway looks like I’m at level 5.

  74. Pingback: Deep Codes » Knowing CSS
  75. Pingback: Los niveles del saber de HTML » EfektoMagazine
  76. @syzygy: As you might notice I don’t mention myself here at all. These are the steps I’ve heard more people than myself climb, how does that make it an egoist site? You’re also one of the first person to say the layout sucks, good to know.

    @jay: Those that don’t want to learn never will, so I don’t even try to convince people on the lower levels of why web standards should be used.

  77. Pingback: Internal Arts » Blog Archive » Levels of HTML and CSS knowledge… and Guitar Hero
  78. GREAT ARTICLE, found you through del.icio.us. Made me laugh though as it means I am a Level 4 or 5 in CSS Knowledge and I also am a level 12 Paladin. *GROAN* Thank you anyway!

  79. Pingback: HTML- und CSS-Level at Aarakast
  80. I’d say Level 6 but I haven’t found any reasons for using CSS3 (or, the other half of CSS2). So, I guess that would – Actually – be 5. I guess I could Malarkey two different sites, i.e., Two Tone and Mod, but IE 7 ruined that.

  81. Pingback: Point studios
  82. Pingback: ???? » 2006-06-04 Information Flow
  83. Pingback: -TMA-1- » Blog Archive » links for 2006-06-05
  84. Pingback: YELLOW BOY FOR ECONOMICS » Levels of HTML knowledge
  85. Pingback: ????? ?… » Blog Archive » Levels of knowledge
  86. Pingback: Techies blog » Blog Archive » HTML és CSS tudásszintek
  87. Pingback: Crastinate » Blog Archive » Levels of Knowledge
  88. I liked this article. I am just a beginner. I got started by taking a html class and thought it was fun. I got pretty good with tables, but I have hit some dead ends with them. I started to learn css for blogging and I am starting to like it. I would say that this puts me at a level three.

  89. u r som pros :D *shake* diz is senseless.. the fact that ur rating does not go further shows ur incompetence, sry

  90. I’m at a level 2 or two, and I can use all the help that I can get.
    There’s times that I use a table to position two more images on a web page.
    I know there some CSS to do that, but old habits are hard to break.
    I usually just use CSS on each web page instead of one external CSS page.
    Because I want to keep control of each web page.
    Thanks for all your information.
    It lets us know that there still hope

    Semper Fidelis
    Ricardo

  91. @Stacy: I don’t see what you mean (probably my fault). What you show is one of the good parts about CSS, any page can have several layers of design that you can let the user pick from. It’s a nice feature.

  92. Exactly my point. CSS is about presentation. Presentation can take on many flavors and if needed or useful an author should provide that. The http://www.w3.org/TR/REC-CSS1 example shows (you have to scroll a bit) that an author can offer up two vews of the same content to provide different prospectives of the data. errata verses the current status. This is all accomplished through concurrent (alternat) style sheets. A user can choose per se to see the change bars or not. Seperation of content vs presentation. An idea I think under appriciated.

  93. Sure wish you had a preview and/or spellcheck option for comments. I butchered that last one :)

  94. I guess what I’m saying is your site for one (out of many) could provide an alternate css that provided the following

    .item_contents {
    display: none;
    }

    or something similar… It’s late and I don’t feel like sifting through the css/tags/elements/whatever, but it would be nice to be able to turn off all comments via an alternat style sheet.

  95. Neat. CSS is plainly a very good thing and reminds me of a style sheet which I used for my magazines in Adobe’s Pagemaker.
    So I use it to control type sizes and colors and what have you.
    Where CSS totally fails – in my opinion – is getting across to people like me that it can be used for far, far more than just type definitions.
    I am really not stupid and a relatively fast study but I cannot get to grips with it. My feeling is that perhaps people who DO understand CSS do not understand communication.
    And so potential users of the full scope of CSS – and I am one of them – stop half way simply because no one is giving and intelligent, intelligible, interesting, explanation complete with snazzy samples.

    Gareth in Sussex where it is warm and wonderful. This week.

  96. @Stacy: I’m well aware of the possibility of adding separate stylesheets but I don’t feel the need to add it. If an individual user wants to customize something they can use a custom stylesheet and apply it.

  97. Pingback: Soho Cascade » Blog Archive » Levels of knowledge
  98. This seems like an inherently odd system. Usually, a higher level will include greater levels of skill. To me, it would make more sense to say a level 2 uses only the most basic CSS tags. The higher level would use perhaps more complex ones. Instead, this one focuses on attitudes toward CSS. So it’s not levels of knowledge with a gradual progression toward sophistication. It’s just a bunch of attitudes, some of which you say yourself not really “better” or “worse” than other, higher levels. You ought to reformat this whole “levels of learning” table into some other semantic structure.

  99. If claim “I’m very much pro web standards. The current widely accepted standards are: (X)HTML” why does this page read “” as it’s first line?

    :-)

  100. The HTML line in my previous post was just cut out instead of converted to display HTML. Just right click the page and “View Page Source”. Then read the first line.

  101. @Carla Pendergraft: I believe that CSS is an entirely different mindset from table based design. To grasp that new mindset there are several things you need to understand and I believe those things are in the list above.

    @Roman: Note the paranthesis around the X. I continuosly recommend that you use either HTML or XHTML (doesn’t matter which) as long as you use the strict versions. Feel free to look through the sourcecode of this site, I have nothing to hide.

  102. I’m a class 5 mutant, and I love to play CS:S but more of a 1,3,5 level CSSer. I like CSS, it is very cool. Not the total final solution for all things. I would have to agree that a lot of articles about CSS and web standards sound very elitist and annoying, this one is partially included, although not too mean. (A side note, whether you intended it to or not doesn’t matter, it still sounds that way :)) It would be ok to just admit it, or say sorry, but that wouldn’t be very CSS-Elitist like. Still an interesting read. Thanks :) -Nightcrawler

  103. A very informative article – thank you. Mix of level 2 and 3 now inspired to achieve 5…

  104. Word!
    There is another interesting .class of people: The postbubblers. they learned the craft without knowing what IE5 or Netscape 4 was. Many of them use different techniques, tool etc, but don’t know or care about standards. However, with their fast learning curve, they probably could make a significant contribution to web standards use. I know I’ve met a few, but didn,t have the time, knowledge or patience to convince them at the time.

  105. You don’t have to have written a book about css to be at level 6, really ;); at least that’s what I think, and perhaps some people above have said so, too. The problem with level 6 in your article is that it assumes that if you know css very well, you automatically start to write about it and tell people how to use it. That’s not the case for me. It’s very seldom I stumble upon something that I don’t know in CSS, for example.

    Although I have actually started to write a very long tutorial on how to start with CSS, it just takes too much time. What I would love to do would be to be a web design teacher – and not only html and css, but also c#/ASP.net, n-tier, javascript, graphical design (photoshop/flash/illustrator).

    That would be great fun!

  106. @Henrik: I belive the differece between 5 and 6 is to reach out and teach other people what you know. A 5:er and 6:er might even know as much about the language. Teaching would be fun!

  107. While these are funny at times. I wonder what are you doing to help change the situation? To help people understand what YOU see in CSS!! It’s like laughing at the kid whose fly is undone without telling him it’s undone … immature and doesn’t move you forward.
    Step up. Be bigger than you are.

  108. @Spanky: This whole site is my way of helping people “get” CSS and modern web development. I’ve heard several people that has been motivated by reading this article. Feel free to give suggestions on other ways to help people, I’d love to hear them.

  109. @Spanky: You bitter about something? This article’s tone was professional and friendly, and has helped me better gauge where I’m at with CSS and where I’m going. I don’t feel laughed at. Why do you?

  110. Pingback: SGTweb css » Blog Archive » CSS knowledge: attaining the highest level
  111. Pingback: Keith Krieger at lab 188
  112. I’m level 3.5 with the skills of Level 5! By that I mean produce good CSS but some elements of page are better done with tables in my view. For example, position something 50 pixels from the right margin sound sgreat but if someone has a very low resolution or very high, then this just won’t work and causes the section positioned to cover another part of the page.

  113. At this moment I start a new mirrorwebsite (access still via my old website, I’m still busy with searching on the web) and I use since a short time a first css file.

    I’m glad reading this at this moment knowing and I hope remembering some traps. Great article, I saw a lot familiar items, I hope I don’t make these failures and will keep clean work in my future css.

    Dutch (webs nickname)

  114. Very nice article; and the comments — looks like some people worked hard at learning to flame and, by golly…
    A friend emailed me a link to this and laughed at my level 2 stripes. There is fun in working through issues, learning, and solving problems. If we didn’t enjoy this aspect of the work, we would probably have a miserable time being sand-rakers in BoraBora golf courses too.
    Here’s the wrinkle (from my twisted level-2 view) — I don’t get why tables, with CSS bits, are worse than div(ot)s — it all looks pretty sloppy to me.
    Feel free to rub my nose in it ’till I get it — I’m a big boy.

  115. Hey Emil! I just found your website today and it is excellent. It has inspired me to rebuild my page and maybe even add some tech/CSS/XHTML articles!

    I’m from Russia but currently live in NYC doing WebDesign/Development for a firm.

    I will be redesigning their website to eventually implement CSS/XHTML (right now its just HTML/PHP).

    Thanks again!

  116. @JesterBlue: I’m working on an article on why you shouldn’t use tables for layout, stay tuned ;)

    @Leon: That’s fantastic to hear! :) Keep up with the good work.

  117. Sounds a little bit elitarinist. And I hate pages that can’t be saved to harddisk just because they use some feature that are incompatible with the dirty browsers were forced to live with – at least as long as I get a more than 50% guarantee I will find a broken link instead of interesting content if I bookmark or link instead of saving to disk.
    People profiting from incoming links for their google rankings while not caring for the webmasters that have to check broken links all the time instead of creating new content are the REAL web problem today, not levels of (technical) design purity.

  118. @Mark: Agreed, a lot of other aspects of the web are more important than the technical knowledge one posess. What matters here is that knowledge about CSS does not hurt the other areas, in terms of accessibility it might even help.

    Claiming that the above list was all that was needed would be elitist, that’s why I don’t.

  119. Pingback: Virtuality in Black » Blog Archive » Una traducción: CSS cross-browsing
  120. Nice article, but you already knew that since it is the most popular on your site. I would just like to point out a slight typo in the level 0 paragraph. In the first sentence “These people have probably never made a webpage in their life. If they did it was pure HTML and they barely knew what they where doing.” it appears that you use the word where, when I believe you meant to type the word were. Again, thanks for the informative article. Oh and feel free to delete or not to publish this comment, it is just meant for the web admin.

  121. i’m a 2!
    hahaha

    Tables rock. Using 100% CSS takes way to long to get looking right on all browsers, and is also stupid. There are plenty of other plain HTML tags out there that get the job done very easily, rather than spending the agonizing time trying position everything solely with CSS. What are we doing here? Are we trying to abolish html? Are tables “of the devil”? I say design how you want. If you’re comfortable with nothing but CSS and divs, then heck, use it. If tables work for you and it makes you proficient in web design, use them. Not trying to argue with anyone, i just don’t see the point and saying one is better than the other… I think some people stop realizing the reason for CSS. Heck, i saw a website that a guy created a table completely out of CSS… The code was insane!! Why bother… Anyway, funny article. I like the way you broke them down, I can recall getting to each of those levels (except for the book one). It’s obvious you’ve “been there”. :)

  122. @brian: Thanks for your comment! CSS is really about separating the content from the design. If you don’t agree with that design goal, then use tables all you want. After learning CSS and now getting employed because of it, I really feel it’s the best way of constructing a good website.

  123. I appreciated your article and didn’t find it condescending at all, Emil. Several commenters seem (perhaps rightfully) insecure about their own code fu with CSS.

    However, I can’t help but wonder if I would have a similar reaction if I were a bit lower on your hierarchy. I’m not a 6 yet, but I’d definitely like to get there at some point.

    I personally know people in each level you describe, and I think I’m now better equipped to help them out where they are. Good perspective.

  124. I’m at level green, or maybe z. Consider this: Instead of just two categories, content and styles, there are three: content, styles, and layout. In the beginning people used tables for layout because there was a need for layout. Then people found they could use css for layout. In both cases you’re using a tool to do something it wasn’t really intended for. What’s needed is a true layout tool. Until we have that the fact is that tables for layout is easy and css for layout is hard. There are reasons to prefer one over the other, but it is mostly a personal preference.

  125. Pingback: Neatly Sliced » Friendly Bit [dotcom]
  126. Excellent breakdown. I can categorize myself at level 3. I might have gone higher, but I made the transition to backend developer and no time was left to take css through mastery. I’m glad you highlighted the difference between someone who claims mastery and someone who actually is; I believe the distinction is very important.

  127. I enjoyed the comments rather more than I did the article, which has naive overtones. I can understand why so many people were put off, and conversely, why so many others found the urge to rate themselves somewhere in the 5-6 range so compelling. So maybe that makes it a successful article :)

    While the rating system is flawed, it is important to emphasize the places where graphic design ends and web design begins.

    What chaps my ass are the graphic designers who couldn’t code their way out of a paper bag in any language, least of all CSS or HTML. Such “web designers” try to place themselves above the “coders,” and sometimes I get the same vibe from designers who know CSS as well, that they hide their lack of understanding of programming underneath an assumed arrogance. Whatever. The web won’t wait for them either.

    I don’t care if a designer uses HTML or CSS as long as the thing works. And if I have the misfortune of having to work with someone’s super-messy HTML code I’ll write a script to clean it up.

    However, I don’t find your argument so convincing. I my experience, CSS – OTHER people’s 1000+ line CSS convolutions – has been at times as more difficult to work with than tables. At least with HTML, it’s all there in front of you, and if you know HTML, you know the few browser discrepancies. But with CSS, the separation of content and presentation only magnifies the problem when the CSS is convoluted and poorly designed.

    Your Level Six CSS Guru could also be a real pain to work with, and so I think your system is not completely accurate. Just because you “found a job” because of your CSS does not mean that CSS is the cat’s meow for every situation.

    I still use HTML tables at times, because it’s easier for me to know EXACTLY where things will go when a database is spitting out the content through a loop. It’s not worth my time or my client’s money for me to code in a way that is as of today only marginally advantageous (at least to my clients), unless if I aim to please the CSS pundits, which I don’t.

    And since I generate most of my resulting output programatically anyway, it’s much easier to call a php function that spits out a clear gif dot at my desired dimensions rather than coding a div just for that purpose.

    For me, CSS is useful for page layout, but HTML also has its place for its granularity and guaranteed rendering. It is possible to rock out with both.

    Thanks for the article.

  128. @Fwitz: As you probably know I don’t agree with your that using tables for layout is OK. I doubt I’d be able to convince you in these comments though so I won’t even try :)

    The level system is not a scale of how easy people are to work with, just how good they are at CSS. Don’t confuse it with anything else…

    Thanks for your comment and perhaps stay a while? I just might convince you in a couple of articles :)

  129. nah, I’m not looking to be conviced of anything. I know what I’m doing. Good luck.

  130. Pingback: ???CSS????(??) at UIWEB
  131. Pingback: Levels of CSS knowledge at UIWEB
  132. I had to read this to find out where I stand in your rating system. I’m probably almost a 4. I’d really like to get competent at CSS because I think it will help me maintain and update the two sites I take care of.
    I’ve successfully done a couple of pages with more than a basic layout, but really getting my head around it is kicking my ass.
    I’ve purchased a couple of books, which sometimes give conflicting advice which doesn’t help. And the pages I’ve done, don’t degrade “gracefully” in old browsers and I’m not sure why.
    Anyway, I enjoyed the article, and will continue to try to “get” CSS.

  133. Thanks for the article. I’m wondering if you have a post/article somewhere that goes into depth about proper use of divs? :)

  134. Pingback: BlueSparc | the science of web design » Blog Archive » Learn Your Level of CSS & HTML Knowledge
  135. Thanks for this great article. I build websites with CSS since 2004 and i think I´m on level 5. i love it. CSS changed my way of designing and programming web projects.

  136. I’d say Level 6 but I haven’t found any reasons for using CSS3 (or, the other half of CSS2). So, I guess that would – Actually – be 5. I guess I could Malarkey two different sites, i.e., Two Tone and Mod, but IE 7 ruined that.

  137. @One night in paris,
    The new features in the CSS3 specification isn’t supported by any browser yet so you can’t use it yet.

  138. Excellent breakdown. I can categorize myself at level 3. I might have gone higher, but I made the transition to backend developer and no time was left to take css through mastery. I’m glad you highlighted the difference between someone who claims mastery and someone who actually is; I believe the distinction is very important.

  139. Someone once said using CSS is like skiing down a mountain safe in the knowledge that, while the bridge at the bottom may be out, repairs are scheduled for next Tuesday. Still think accessibility’s a waste of time. No CSS? javascript turned off? images turned off? Are you sure your computer’s not still in the box?

  140. Pingback: OPC Toolbox » Blog Archive » Levels of CSS knowledge
  141. I wish to gosh the Level 2 designation were true and CSS didn’t have a collection of browser-only hacks. People who know the pitfalls of div-only layouts and revert to a CSS/tables mix obviously know what they’re doing. Swap Level 5 and level 2. Show me a div-only site that uses relative positioning successfully. Youre site doesn’t.

  142. @Dave Spreefelt: That article says: “You can have tables and still be accessible”. At the same way you can drink poison and not die, seems logical to me…

  143. @Dave Spreefelt
    It’s easier to do layout with tables certainly.
    No hassles with absolutely positioning elements in relatively positioned ancestors while floating your div to the left in both compliant and non-compliant browsers, blah blah, blah… man, I thought CSS was meant to increase clarity!? ;)
    Seriously though I love CSS and having tried both table and css methods I’d have to say CSS is, on the whole, better. If there are people out there who aren’t using relative positioning properly it’s just poor design, not an issue with CSS.
    Table-based designs have been around longer and any idiot can use tables to layout content but that apparent simplicity comes at a cost. Next to modern, well-formed CSS designs they look amateurish and restricted. Css is actually not unreliable or obscure, and once you’ve made the effort to really learn it everything does become clear and simpler and a whole lot easier to maintain and change.

  144. Pingback: Web Design - Learn CSS for web design and development …
  145. Pingback: Web Design - Showcasing top quality sites for designers and developers
  146. Pingback: links for 2008-01-13 | betohayasida.net
  147. Wonderful… the discussion generated combined with the article is what makes it all a positive experience. My level is a wannabe 5, yet I am forced to stagnate at 4 because I am too busy on rush jobs. It would be nice if some one could kick me in by showing me where I can find a sample CSS layout(as follows): Left navigation pane with a percent width and a right display pane to take up the rest of the screen, a bottom pane(footer) about one to 2 lines high that never leaves the screen. I am able to do that with frames quite easily. The left pane is programmatically populated from DB with image thumbnails links that trigger a full size image in the right pane. The bottom pane(full screen width)is reserved for controls the user interacts with. The left pane of course scrolls up/down without interfering with the bottom pane. I can also programmatically negate the left pane so that the right pane takes the full width of the screen, again the bottom pane is still visible and unaffected. Finally I can hide and show a 4th pane(frame), that is the same width as the right pane and 3 to 5 lines high to display some description and allow some interaction with controls. All functions via javascript except the left pane which requires a redraw when reloaded. I am able to control the size of the frames via javascript or by simply grabbing the invisible borders of the frames so the thumbnails can be made larger automatically, and scrollbars appear/disappear as needed on the proper verticals or horizontals. I stress again, the bottom pane NEVER is affected, it is always on the screen with its controls in their various states, and it is FULL SCREEN width… Will I be able to match this layout and functionlality with CSS? If so, will the different sections be DIVs? will I be able to get and set the width/height and height of the different sections as I now do with the frames via javascript? Also, when I display an object that is larger than the available space(pane), will the object oveflow BEHIND the other panes leaving them completely unaffected? I am most appreciative.

  148. @NicMartel: This is not the right place to get help coding a full CSS layout. Try googling for “layout gala”, you might find something there.

  149. Emil, thank you for the pointer… I had looked and looked and found nothing… hopefully this will do the trick. I actually do not need help, as I have since coded my first layout to match the above description… was just trying get some up-front information to save me from finding out the hard way that CSS may not meet my requirement. Thank you.

  150. Skimmed over. One problem I have is the statement that CSS is better. I am sure you meant it for the layout purposes. One must never forget though, tables are designed for tabular data, no amount of css will replace formatting of tabular data in tables. Very humorous article otherwise.

  151. @Dmitri Farkov: If you had followed the site more closely you shouldn’t have to point out silly things like that. Of course tabular data should be in tables.

  152. Excellent breakdown. Most people would have tried to break it into 3 levels, but I think all 6 of yours are necessary and distinct.

  153. Pingback: CSS Bilgi Seviyeleri | Jnbn - evliya-i web
  154. Interesting. And fun to read. Although i wonder what level i’d be :)
    I’m a software developer since more than 30 years now. I got hands on computers before the mouse was invented, and so i’m used to use console and extremely simple text editors for all. As i see it, this has some advantages in understanding what’s going on.
    Web coding is not my profession, it is more a hobby. So i’m not bothered with pressure to blow out half-done sites and have every time to tinker with the features and possibilities of the web. I really do understand people not having the time to produce perfect pages.
    The separation of different parts is bare basics in software development and is called modularization. So separating content (and its semantics) from presentation and behaviour for me was quite logical. Although it took some time to actually do this consequently (more or less :) ). I think it’s worth every second of learning it. And in fact, if you do it really consequently you do not need more time to produce sites, you need less time. But if you stick to combining all three parts into the html, and then just pro forma pull out the css into a separate file you have a hard time.
    So consequently i do not agree with one of the statements found at the w3c. There it says, that the main purpose of class and id attributes is to provide a handle to css (presentation). That could not be true. Those classes and attributes are part of the html and as this part of the semantic. So consequently classes and ids are to be used to add semantics to a content. In cases of div and span this means setting the only semantics this content has, since these 2 do not have own semantics. For other elements class and id attributes are to make the semantics of their content more precise. This adding to semantic has absolutely nothing to do with presentation. These classes _can_ be used as css handles, but their main purpose is pure semantics, nothing else. If you are able to separate that consequently, you actually do not style words, you style semantics. And if you do so, you have a much easier way then afterwards. And, as a nice benefit, you get a much easier maintenance for sites then. The only drawback is that you have to master a long and sometimes painful learning curve. And this is the longer, the more experienced you are with html 3.2.

  155. @Dmitri Farkov: Yes, sorry. Got a little annoyed with the “skimmed over your article and think you’ve fundamentally misunderstood CSS”. I see now that you didn’t mean it like that.

  156. Level-wise, I think I am somewhere in L4 but scratching hard to climb up to L5.
    I do web sites for non-profit organisations as a volunteer, having developed my interest over the last couple of years in my retirement. I believe that standards should be followed and it is so frustrating when I (and thousands of others)discover that IE does not do as expected.
    For the second time to-day I find myself in awe at the ease in which layout problems can be solved so easily, particularly, those relating to IE6 using code from this site.
    Thanks again!!!

  157. Pingback: HTML?CSS ????CSS?????? - MSNET Team Blog
  158. You know, I just think it has to relate back to your goals. If your goal is purity, go for pure CSS. If your goal is to rapidly produce websites that use tried and true methods (and for me, that’s a combination of tables and CSS), then a hybrid approach is best. I look for the way I can get a properly working, stable website up and running without fuss. Once the browsers are better at implementing CSS in a consistent way, I’ll make the switch to the “pure” system.

    And my complaint against CSS is that every time I use some clever new technique (example: opacity), it breaks in Safari or whatever. It wastes my time because of the inconsistent rendering. You know, we used to have font tags peppered all over our pages. In some ways, things haven’t improved. I have seen style sheets that were so ridiculously long, I can’t imagine anyone could have understood them. We’ve separate the replacement for our old font tags from the actual content, but sometimes it doesn’t look like the greatest improvement to me, if one is in favor of simplicity.

  159. @Carla Pendergraft: You know, CSS is a tried technology. I’ve used it professionally for two years now, and about two more on private sites. There is really no need for tables. Really. I also work in a highly agile environment where things change often, and I thank CSS for me being able to change that quickly.

    Opacity is a CSS3 feature, so it’s hardly working anywhere. Floats do work, have worked for a long while, and replace tables nicely.

    You can write bad CSS, but you don’t have to, do you? If YOU know what’s good and bad, there’s no reason to repeat what others did.

  160. Pingback: Manda Webs»Archivo del blog » Tutorial de HTML semántico y CSS
  161. Pingback: ???? ? CSS ???? « Alexander's blog
  162. Pingback: Cross-Browser Compatibility Tips | innisfree studio
Comments are closed.