Grow your CSS skills. Land your dream job.

CSS is to HTML as a CMS is to… HTML

Published by Chris Coyier

From the desk of important beginner concepts:

You have a website with 100 pages on it. All 100 pages use the same style.css file. You'd like to change the background color of every single page. You make one adjustment in the CSS file, and that background color adjustment will be reflected across all 100 pages. You don't need to edit each of those pages individually. That's the core benefit behind CSS: abstracting the design away from the markup.

Now you want to make another change to those 100 pages. You'd like to include the publication date underneath the title of each of the pages. That is something you'll need to edit the HTML to do. If those 100 pages are based on a template, as they would be when using a CMS (Content Management System), you can make one adjustment to the template file and the date adjustment will be reflected across all 100 pages. That's the core benefit behind a CMS: abstracting the content away from the markup.

The point is that once a website is any more than one page, there are going to be shared resources and it's time to use a CMS. Just as the zen garden taught us that using CSS is vital to allow design freedom and make redesigns easier, the ultimate freedom comes from also using a CMS where we also aren't locked to any specific HTML. HTML isn't for content these days, it's for describing content. Databases are for content.

I have made this scientific chart to drive home the awesomeness of this all.

Comments

  1. Very interesting… Thank you!

  2. Think of HTML as the support of a Colosseum with the people being the content. CSS is just the paint.

    • Jonathan
      Permalink to comment#

      What!? CSS is the paint of the Colosseum?! Please save those comments for yourself.

  3. Permalink to comment#

    CMS = The House With Complete Furnish
    CSS = Tha paint + The wallpaper + The decorations

    Well said Chris

  4. Carmello
    Permalink to comment#

    The good’ old Hummer.

  5. I have had this concept in my head for the last month or so, but could not put it into words. You did so, beautifully ;)

  6. Thanks for putting this concept into words. As a web developer, these basic ideas are sometimes hard to get across to people :)

  7. Permalink to comment#

    very nice and mostly scientific chart :D

  8. NTK
    Permalink to comment#

    So…

    model = HTML + (database content)
    view = CSS
    controller = javascript

    I suppose you have multiple levels of abstraction. I don’t suppose you could break this down any further?

  9. Nice explanation Chris. I still can’t resist saying that a CMS could also just be a few server-side includes for common things like a header/footer. For more complex websites, databases are definitely needed for content but HTML can still easily be used for content. Think of small sites and about pages, contact, etc.

    My breakdown of it:

    CSS – Styling.
    HTML – Markup for a way to display and understand content/data.
    Server Side Stuff – A way to manage content/data and allow complex features.
    JavaScript – A nicer way to interact with that content/data.

  10. Permalink to comment#

    Well said, Chris. “Abstracting the design away from the markup” is crucial with e-commerce solutions indeed. From our extensive experience with such projects, when new features are released as a software upgrade, seamless & rapid integration with operating project is very beneficial because it saves online retailers the bill.

  11. Well said Chris and to the point, I agree anymore than 1 or 2 pages you should consider a cms, it’s inevitable that a client is going to say ‘can we add another page?’ bang going simplicity with a static site! Let them take control of their own content with a cms.

  12. Good to read.. Great article

  13. Permalink to comment#

    You can bypass a CMS by using different php pages for you header & footer and just include them.
    If something needs to be changed you can just edit it in there and voila your done for all pages.

  14. Permalink to comment#

    Excellent article. It is sometimes so difficult to explain to potential clients that a Blog or a Website full of individual articles etc. are actually the same thing; they are all a CMS. This article captures that point very well.

  15. Great chart. It really kind of explains it! No, your point is quite interesting and in my eyes makes sense. Nice article!

  16. That’s a very “scientific” chart.

  17. Some how, the Hummer just makes sense. :)

  18. if ($pages > 1) {$cms = true}

    FALSE lots of people use a CMS for just one page because:
    * Can edit it easily using a web interface
    * They can easily include extensions and plugins. (like a contact form, SM links, photo galleries)

  19. wow! great article

  20. suprsidr
    Permalink to comment#

    What’s the css to change to Goodyear tires?

  21. nice article, very interesting

  22. Permalink to comment#

    I am a self taught coder and over the past few years I have gotten pretty good. I still have plenty to learn though.

    I run quite a large site which would probably benefit from the use of a CMS. However, I cannot bring myself to go down that road. I love coding, I love everything about it. I just know if I start using a CMS coding will become less like painting and more like painting by numbers.

    For all the common elements that require frequent edits on my site I simply use a PHP include.

    I also have a bit of a mini-cms system in place that most of you are probably familiar with called Unify. It allows for in-line text and design editing on a page by page basis. To be honest I only really have it there to make life easier on my editor. I rarely use it, I rather dig into the code!

    Anyway, CMS is very logical and it definitely make sense to use it. Will I ever use it though?…. no!

    • So if you are in a position where a change needs to be made on 100 pages of the site, you’ll just manually go change all 100? And the next day, another tweak needs to be make, right back through those 100 again? Or are you just saying that never happens to you. I just can’t imagine what a working life would be like (no judgement, just saying). Do you find yourself telling clients “no, sorry, we can’t make that change”?

    • Permalink to comment#

      Well with my coding software I can simply do a text replace on all open pages. So generally speaking if I have to make 100 edits it is simply a matter of doing a text replace. It would likely only take a few minutes longer for me. I know it is a little archaic but it works.

      As for clients. I am sure if I designed for others I would be using CMS. However, I really only run my own site so as it stands I have no clients.

      I just feel that CMS takes away from the art that is web design. I am not a professional coder but over the past three years I have learned quite a bit. If I had been using a CMS, I doubt I would have learned much more than how to create a new page on whichever CMS I am using.

    • Permalink to comment#

      I’m a right brain thinker first and foremost, which means I love to create (design) in multiple ways. I respect coders and what they do. Coding for them is like painting a beautiful portrait. However, coding and designing are not the same thing. I was shocked over the fact that some successful designers know very little CSS if and any. I take pride in being able to write my own CSS, XHTML and the little bit of Actionscript I can put together. Learning PHP has not been that easy for me. I can do the include files, link it with Actionscript and that is it. For whatever reason, I am not grasping it like I did with CSS. With that being stated and for others like myself, I need the CMS like a fish needs water. Does it take away from my creativity, No! I would love to be able to do both, like yourself Mr. Nick. If that was possible, I’d be a bad M**th**F**k** (excuse my French)- But I am not. It’s not for a lack of effort, I have all of the books, vid tutorials and countless hour of listening to Kevin Skoglund while doing his exercises. I will keep at it though, quitters never win.

  23. Permalink to comment#

    Well with my coding software I can simply do a text replace on all open pages. So generally speaking if I have to make 100 edits it is simply a matter of doing a text replace. It would likely only take a few minutes longer for me. I know it is a little archaic but it works.

    As for clients. I am sure if I designed for others I would be using CMS. However, I really only run my own site so as it stands I have no clients.

    I just feel that CMS takes away from the art that is web design. I am not a professional coder but over the past three years I have learned quite a bit. If I had been using a CMS, I doubt I would have learned much more than how to create a new page on whichever CMS I am using.

    • Hey man, I think I know what your saying. That’s what I thought like 1 or 2 years ago. The point is untill you really understand a CMS you discover that a CMS is in no way shape or form limiting you to do anything. I can build every site you make exactly the same in a CMS.

      Just dig into WordPress (maybe even by digWP.com) and experience this awesome moment where you find out that a CMS has unlimited options!

      Goodluck on your journey,
      Rick

  24. Permalink to comment#

    In my opinion, unless you’re running a blog, forum or some cooperate site where users and massive storage are involved CMS is definitely the way to go. But it wont kill you to code a 5 page website and make changes to all of them at the same time….This way you will learn more and build innovative thinking.

    Most of the editors out there today have different features where you can edit a number of different pages at the same time, so in essence it’s not a big deal. I love coding HTML & CSS

  25. Permalink to comment#

    Wow. good article, agree with all.

  26. Very good analogy, CSS is styling and with HTML as the Markup to display and understand content/data, with CMS and database included if the project requires. LT

  27. I think anyone on this site should consider using http://modxcms.com/ by far and away the best and easiest CMS for beginners to experts. I’ve been using it for years now and will never turn back!

  28. Permalink to comment#

    Very good article with tips and demonstration of css. This article is obviously appreciated by me as there are a huge options with css. And web designer can tweak them to decorate and design the look of the web page. Thanks again for this good post.

  29. Hey Chris, Interesting read I always look forward to these types of posts because there’s always a really good discussion afterwards! When building a website it is pretty obvious that if it wasn’t for the powers of CSS our websites would be pretty boring. I love what XHTML and CSS do and using them with W3C standards in mind will always offer a great experience for our audience. Thanks for sharing.

  30. CSS makes life a whole lot easier :) Interesting diagram you’ve got there. Thanks for sharing :)

  31. Permalink to comment#

    Hey Chris,
    I loved this. I enjoy every one of your screencasts too.

  32. Jackie
    Permalink to comment#

    Thanks Chris

    I needed to start thinking about databases and a custom CMS earlier today and was trying to get my thoughts into line on it. You’ve just helped clear my brain out! :)

  33. Permalink to comment#

    LOL html as a CMS can barely wait for this :))

  34. Like a couple of other people who’ve commented so far, I think there’s a middle-ground in Server-Side Includes. Shared HTML like copyright notices, headers, sidebars can go into files that are included into the other pages on your site. Update the header file and all the pages are updated. All without the overhead of a CMS.

    And at the risk of sounding blasphemous, Dreamweaver’s Template feature provides a good solution to site-wide HTML updates for those who aren’t technically inclined and have no clue about SSIs or CMSes.

    That said, I love WordPress and think that anything that makes your (or your client’s) life easier is a good thing.

  35. I’d just like to point out to NickB that there are CMSs that allow you to code HTML cleanly and still have a CMS.

    Modxcms comes to mind. Use it. Love it.

  36. At first great title ;) intrigued me right away.
    Both cms and css made my life hell a lot easier ;)

  37. Permalink to comment#

    totally agree, stumbled across your website looking for css tutorials and found this. great work there!

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".