Beginner’s guide to CSS

CSS is all about separation

One of the least followed parts of CSS is the very idea behind it, the idea of separation of content and design. The idea here is that all sites contain two major parts, the content: all your articles, text and photos and the design: rounded corners, colors and effects. Usually those two are made in different parts of a webpage’s lifetime. The design is determined at the beginning and then you start filling it with content and keep the design fixed. So if you just want to add content to your site you don’t want to be forced to mess around with the design, do you? The same thing is true the other way around, if you decide on a redesign, why should you have to mess around with the content, making sure it fits in the new layout?

In CSS you just add the nifty <link>-tag I’ve told you about to the head of your HTML document and you have created a link to your design. In the HTML document you put content only, and that link of yours makes sure it looks right. You can also use the exact same link on many of your pages, giving them all of them the same design. You want to add content? Just write a plain HTML document and think about marking things up like “header” instead of “big blue header” and use CSS to make all headers look the way you want!

This is a different way of thinking about webpages, and it’s something that took a while for me to understand. To help you I have written some examples of good and bad coding. What’s wrong with this?

<font size="3">Welcome to my page</font>

Comment: The font-tag is design and design shouldn’t be in the HTML document. All design should be in the CSS-file! Instead do this:

In the HTML:
<h1>Welcome to my page</h1>

In the CSS:
h1 { font-size: 2em; }

One more example:

<b>An error occurred</b>

Comment: This looks right doesn’t it? But if you look up what <b> stands for you quickly find bold. But bold is certainly design, so it still doesn’t belong in the HTML document. A better choice is <em> that stands for emphasis or simply “this piece of text is important”. So instead of saying “this text looks like this” you are saying “this text is important” and you let the looks be decided by the CSS. Seems like a minor change, but it illustrates how to select your tags. Use this instead:

In the HTML:
<em>An error occured</em>

In the CSS:
em {
   font-weight: bold;
   color: Red;

One last example:

<tr><td><a href="">first link</a></td></tr>
<tr><td><a href="">second link</a></td></tr>

Comment: Lots of people format their navigation menu like the above example. But is a navigation menu really a table? If you look up the definition of a table you see that it’s made for tabular data, the same kind of data you would put in an Excel sheet. The example has only one column of data, and no headers… Some people state that they use tables because that means that they can get borders and a background color on their navigation, but that’s exactly what your CSS file is for (not the HTML document). So what should we do? Look deep in the list of HTML elements at w3schools and you’ll find something called an unordered list, <ul>. Have a look at this:

In the HTML:
   <li><a href="">first link</a></li>
   <li><a href="">second link</a></li>

In the CSS:
li {
   border: 1px solid;

This is probably a different way of thinking about HTML than you’re used to but trust me, when you’ve worked with it for a while you’ll see the power of it. Not only does this way of coding give you a more logical structure, there is also proof that this improves your ranking in search engines and makes it easier for accessibility devices to read your site. This way of designing is great.

Next we will build a simple HTML template to use as a start when building a new page. Like to see it?

241 responses to “Beginner’s guide to CSS

  1. Pingback: CSS Learning Reference at TADSpot
  2. Pingback: Ronald Yau » Blog Archive » Beginners guide to CSS and standards
  3. Pingback: Metropolis » Begginer’s Guide to CSS
  4. Emil,

    Thanks so much for providing such a friendly tutorial for those of us still learning CSS!

    I’m a technical writer by trade, and I really appreciate the tone and organization of your writing. It’s helped me to understand CSS a little better in the time I’ve taken to read it.

  5. This is a great article for a beginner of HTML.If you could write more CSS properties and where can we find such a list of them then we can get a direction towards the next level in CSS designing.

  6. Hey,
    This is the best website I’ve ever seen on the introductory course for style sheets and html. It is very useful and simple and effiecient. I just liked it so much.

  7. I put content into a div that is down the page from the header but put the code just after the body start to help the search engines get to it easier. As I work in CSS, is this still feasible?

  8. @Bill: Sorry, but I don’t understand what you mean. Please ask support questions in the IRC channel #CSS on EFNet, not in comments.

  9. Thanks,
    right help at the right time.
    I was on the verge of going back to tables frustrated with the explainations I found for CSS.
    This tutorial saved my site from that. I anticipate this summer being able to convert my site from badly coded tables to style separated from content pages.

  10. @Ron: Good to hear! Don’t give up and go back to tables, it’s not worth it I promise.

  11. It’s all good… but there are still things that you can’t do with CSS but can with tables… it works the otherway aroud to, some times the best way is to combine the two.

  12. Nice writeup regarding CSS and HTML. I’m really glad to find that you’re using HTML 4.01 (Strict) instead of XHTML 1.0, and that’s good.

    Actually I think a site is made up of 3 parts: content, presentation, and behavior. I could be wrong, just what I thought!

    Just curious, does all other browsers (except MSIE) have quirks mode rendering? (Besides the fact that they’re all great tag soup parsers.)

    And while I was scanning through, I was wondering why you suggested against the use of


    and yet demonstrated the right usage of


    instead. How about


    ? With that we can really do away with

    font-weight: bold;

    ! Well, at least to me it doesn’t matter if


    is a level more emphasis’d than


    . Just some thoughts about this. I’m sure you have your reasons to do so. :)

    I’m not doubting you, and this is an article I’m sure alot newcomers can learn from. This comment is just me some 2 cents. Hope I’m not being too offensive.

    Good job.

  13. @draco: A site is made up of as many parts as you want it to be, I could easiliy tell you 10 parts if you wanted. For this beginners guide 2 is enough.

    All modern browsers have quirks mode/standards mode rendering, some even have a “almost standard” mode.

    I used em because that’s what I think most people mean when they use the b element. Strong is another level of emphasis, something that I don’t think makes it as good to start out with.

    Thanks for you comments! :)

  14. Hi!
    How to position divs using CSS position:relative? When I try to position elements in this way it behaves like position:absolute.
    For example:
    this should position the element with id=something 50 pixels down and left from the previous element, yet in my case it behaves like absolute and places the element 50px down and left from the starting coordinates of a document. :(

  15. @Martin: you are better off just setting margin-top: 50px; and margin-right: 50px; on #something if you just want to move it down.

  16. Thank you, it has been many years since I have needed to use html. I want to build a professional looking site for a new venture I am undertaking. I downloaded a few templates that I thought would make this easier. Of course I had never used CSS, I fell flat on my face. This tut will help, has helped a lot. I will create a link to your site for sure, it is in direct interest to my targeted users.

  17. Emil, nice work. Others have already commented on the usefulness, so I will simply add that you did a fantastic job of zeroing in on some very basic yet powerful concepts. You explained them very well, and your writing style is very pleasant.

    Your article is helpful, informative, direct, and a joy to read. I look forward to reading more of your work in the future!

  18. Hi Emil,

    Thanks for a great tutorial. This is the first tutorial I have read about CSS that is straightforward enough to understand.

  19. The tutorial is excellent but would like a print option so I could print out all four pages at once with the text of the article. But thanks!

  20. Hello Emil,
    I’ve had a very little understanding to what CSS really is, even though I had a rough idea about what you can do with it. Then my Sister found a bunch of CSS sites while browsing and she shared the links with me. I clicked on yours first and I must say it is extremely helpful to my first attempts at getting a homepage based upon CSS done. Thanks a lot and keep up the good work!
    Andrea (from Hungary)

  21. Your article is fantastic,could you help me out can we create round curve box through CSS class.If we can do it through this,it will be better for me.
    Kindly give me more suggestion if you have


  22. @vandana: Yes, it is possible to add rounded corners by using an image together with CSS. I have an article about that planned, stay tuned.

  23. I am finally finishing up my college education (started in the fall of ’65) all online, and one of my courses this semester requires us to submit three papers on topics of our choice, within limits of the course, but they must be formatted with HTML, and the paper due next week must also use CSS and Meta tags. My discovery of your article(s) couldn’t have come at a better time. And the info is simple enough that us older newbies can understand and use it.

    Many, many thanks.

  24. Add ons Add-ons addons
    Why not simply write a language that allows one to write pages? All these bits & pieces html, xhtml,(yhtml), php,java,css,uncle Tom Cobbly and all. They always said that a camel was a horse designed by a committee.

  25. PLEASE do NOT use color alone to convey information, RE: the red stars, as color-blind people and screen readers do NOT know what color red is. Please convey the info in a more constructive way. THANKS

  26. name*: What stars are you talking about? I don’t use any stars on my page.

  27. The red stars on this form. I can see, whilst hovering over the asterix (star) that you have used the title attr. BUT those people WITHOUT browsers aware of title attr. AND users who MAY be color-blind do NOT know what red is or that the title attr. says ‘Required’. It’s just a small point, and I know it MAY seem nitpicking BUT one of the basic rules is do NOT use color alone to convey information, etc. Perhaps you could use the label or span attr. as well, and put in brackets next to the asterix (star) that the field is required.

    Sorry if I came across as rude, wasn’t meant to be.

  28. name*: I don’t use color alone! Using an asterix is a well spread way to indicate that a field is required. As you say I could aviod using the word “red” but I don’t think that matters. The asterix itself conveys the same information.

    [change: I’ve changed the word star to asterix to make the text a little clearer]

  29. cool..been trying to learn this stuff on my own for a while now.I just learned more in 5 minutes,than i’ve learned in the past month…and i’m only on like the third page.I’m excited,thanks

  30. Thank you very much!
    I have read numerous books trying to grasp the basic concepts and understanding of CSS and it has been difficult.

    Your tutorial is Excellent!

    It makes so much sense and Easy to grasp. Also, thank you for the additional resource links!

  31. Excellent Article.
    It has changed a lot the way i was Creating web pages.

  32. I greatly enjoyed reading your article. I’ve been searching for a clean-cut explanation of CSS, as I am building more sites and want to move into a more portable way to code them.

  33. Your guide has confirmed where we were heading … to the re-design of our web pages about gardening. We’ve just removed 53 pages from the site and have been trying to figure out how to reconstruct for future posting. Thanks!

  34. on your begginers guide to css you state… “do this by adding this line:”

    What line? i’m viewing this on a MAC and there is no line of code visible to add. I might be being a complete numpety but I can’t seem to find it. Thanks

  35. I am a java developer and always been a little wary of divs and css. That guide makes perfect sense and is concise. Excellent and thanks.

  36. @Matt Knight: there should be a green box below with a line of code. What browser are you using? I’m not supporting IE on Mac. I’m guessing that might be the problem.

  37. Thanks for this excellent article. A few of my online friends have been asking me how to move from tables based layouts to designs built with css and standards, and being fairly new to css myself, it has been difficult to take them through it step by step. Now I shall just point them towards this article!

  38. Great article! I would like to suggest that you put a printable version of your articles for easy reading offline without having to save all the web pages.

  39. like another commenter said, I’ve learnt more in this one tute than in all the rest I’ve been breaking my head over. Thanks for taking the time : )

  40. What is the deal with Netscape and I.E.? I can get everything looking great in I.E. but when I look at my hard work in Netscape the margins are all over the place! Netscape doesn’t seem to handle the FLOAT property well at all.


  41. Great tutorial, enjoyed reading and trying out new things. Noticed with your website though the background is different in IE to Firefox. In Firefox its looking great with the gradient contrast, but in IE you see 2 colour strips.

  42. This article is so cool! I’m just getting to know css and for me your examples are very handy!

  43. hi sir
    iam new to html and css concepts but when i looked at ur site it was pretty interesting and i am able to learn a lot about css so keep up the good work for the sake of beginners

  44. This article is really of great help to the people who want to make a quick start with designing with CSS.

    The way it has been presented is fabulous.

    Keep up the good work

  45. Thanx for the article!I have been hating table-based html for a long time, and just recently started to discover the amazing css-world.Ur explanation helped me a lot!

  46. Pingback: Anonymous
  47. Emil, I am impressed! To take something that is as “complicated” as CSS and put it across so well, is very well done. (I say complicated because some tutorials make you feel you should have a degree to work with css)Your level of communication is perfect for the level of reader you are dealing with. Thank you and keep up the good work and look forward to reading more.
    kind regards

  48. Great guide. I found it very helpfull. It was simple to follow and explained everything very clearly.

  49. Pingback: Vientos de Libertad » Blog Archive » Cada cosa en su lugar
  50. What’s your take on CSS Layer tags? I find them very easy to work with in the Dreavweaver environment, but I am getting W3C validator errors us the yin/yang. I have heard that there may be some compatibily issues with different brousers, particularly Netscape.
    Anyway, thanx for the CSS tutorial. Now that I have read your four page tutorial, at least I have a basic understand how the CSS DIV tag works.

  51. @James Thomas: I must say I kinda dislike them. Dreamweaver is a good code editor but when it comes to “click and play” design it fails. Those layers you speak are not needed at all – CSS lets you position any element anywhere, just as if it was a div or anything else. Layers in Dreamweaver hides that and makes people think that layers are something special while they are just something the Dreamweaver folks made up. I would recommend coding by hand instead. Thanks for commenting!

  52. Great Site. I saved your page locally and removed just the stylesheet link. The difference between the Before and After stylesheet application is startling. Good demonstration of the power of CSS

  53. your tutorial gives an excellent introduction to me., it is very usefull to me


  54. This site rocks! Thanks so much for the easy to understand guide to CSS, made me understand what that was all about. Used it on my site and still do :)

  55. Great site, great articles but get rid of the “So trust me”s They detract from your excellent writing.


  56. Hi
    I want to know how can Find Downloadable CSS manual?

    Please tell me by email!

    Good Luke

  57. Very cool tutorial and a good fun reading. It is clear and simple and it shows that you care about the readers.
    I’m learning from your materials – thanks! Will tell others.

  58. Wow, this was much better than the W3C tutorial. I kept falling asleep reading that and never really understood it.


  59. The only thing I can think of to improve this guide is to add a “show example” link after each section of coding, so that people who are more visual in their learning, can see the progress as it goes along.

  60. nice to see an up to date beginner’s site. you could mention that page-authors are the least tolerant of befuddled beginner’s questions. One thing about using css (I first used css for a project last year), is that I get ideas for how I’d like something to work, and have to try some dead-end and experiments before I get good results – or before realize i cannot have the idea I’d conceived.

  61. Great pages You have compiled. Will definetly come back to learn more .

  62. Hey, I am a newbie. There is a learning curve to html and css. But that’s OK. You can either spend a lot of money on shortcuts or simply learn how to code for free. Thanks for your erudite commentary and more than helpful website. To those visitors who require more, PLEASE, do not ask him for more than he’s already giving us…

  63. Wonderful article. Thanks so much. I’ll have my students reference this next winter

  64. I have tried to center my webpage in any given window, no luck, sorry I am still beginning. Tried a lot of css. No luck. Suggestions? Thanks

  65. To all of you, thanks for the great comments, it’s these that gives me the motivation to keep going on :)

    @Rich: Good suggestion! If I only had the time :/ I’ll see what I can do. That and a print version of all the pages is on my ToDo.

    @Anil: I havn’t read any CSS Books, all the info I know if from the net and trying stuff out myself. I’ve hear good things about Zeldman’s book though, you’ll find it with a google search.

    @Quin: Bahhh, let them ask what they want :) If I don’t like it I’ll give my motivation.

    @Jerry Scripps: Good to hear. Looking at my referers it seems it’s used as a getting started tutorial all over the world.

    @monika wulfers: First, make sure you’re in standards mode. Then just give your page a width and set it’s left and right margins to auto.

    #content { width: 760px; margin: 0 auto; }
  66. Hi

    Your website is magnificient, but what I suggest to give more attention to the quality of tutorial of the CSS. The beginning was OK, but not the end. I wish you success in Sweden


  67. This is a phenomenal. I have cleared almost all the doubts i had in my mind about css. Coooooool !!!

  68. Would be nicer is you have a “printer friendly” link/button so that we can print it out and read it….

  69. copied most of it to Word, now going back to read it. A printable version would be nice. I’ll let you know what I think, when I get done. :-)

  70. Hello, this book is very helpful us,this is very simply and also very useful.

  71. Ah, yes, 2 small things I forgot to add. :)
    1) Got here from WTG :)
    2) For anyone having trouble doing things with css described here, just look at the css-es of this page ;)

  72. @Ilya Surdin: I’m not sure this site’s CSS is such a good place to learn, I use a lot of little tricks that would take me hours to explain…

  73. I think I’ve just gained a CSS knowledge level… Now I’ve got to find some time to rebuild my city and trest all this stuff…
    Many thanks for this tutorial. Made me look at HTML+CSS combo in a diffirent way.

  74. im really sorry but i dont really understand what you mean… how do you put the images? i dont get it… sorry…

  75. Hi!
    Wow,the moment i read this, i undertstood it. I have visited and read their a few tutorial sites but this site is great. And i also like the idea that you highlight the important words. It is like im reading a book then marking the important ideas. Thanks a lot and more power! :)

  76. thanks a lot for the tutorial, i found it really helpful compared to some other tutorials i have been trying to study. i do have one suggestion, it would be nice to have more examples to experiment with, if you could set up a little quiz at the end of the tutorial, that would be nice

    thakns a lot, chai

  77. Dude, this is pretty good tutorial, its a really good starter tutorial. I thinks it explains well the chracterisrics of CSS.

  78. Thanks, for the tutorial…
    You’ve provided me with a clear understanding of CSS..I enjoyed the idea of “separation of content and design” two part of website.
    My life has new meaning : )
    Have a great Day

  79. Well, OK. I’m old (67) and have perhaps a different feeling about how to describe something. It looks to me like CSS is an add-on to web formatting tools, something that enhances HTML. CSS has a syntax, HTML has a syntax, and they’re not the same syntax. I have no problem with that (it makes sense that theyd be different), but what I’d like to see is at least a brief mention of itsyntax and syntax elements. For instance, it’s unclear to me which syntax elements of HTML work within a .css file. If I want to specify an image for the header in the CSS file is it exactly the same as the HTML syntax or is it different?

    I’m sure that, as I keep looking, I’ll find the answer, but seeing a statement about what HTML syntax is vlaid within a .css file and what is not would (I think) improve understanding. This is only my second day of trying to learn CSS.


  80. @Brad: The syntax you use in the CSS file is completely different from HTML. In CSS you use: background: url(image.jpg); and in HTML you use <img src=”image.jpg”>. CSS is a new language, specially made to work better for design.

  81. I’m in Brad’s age-group so I relate! First step for me was to change my thinking… think design of the website first, like you would design it on paper, this is the CSS page (you can include all your notes in this style sheet, i.e. from building the skeleton, column layout, color & size, to color, size & style of fonts, alignment of Images & Text). Than I had to buy a book for reference, once you get it, than you really appreciate it (but I’m still learning)!

  82. Forgot to add this (old age) for my comment to Brad. I had to buy a reference book to learn all the ‘CSS syntax’ from design to attributes, values, and tags.

  83. Nice tutorial. Hope next added will be a full lenght css file for especiall Ajax implementaion, like borderless input text boxes with some valuable styles. Thanks.

  84. Thanks alot for the tutorial!!! cuz it helps me realize all the stuff that I’ve done wrong while coding HTML. Thanks to this tut, I know how to fix my probs!!! ^_^

  85. I am a java developer and always been a little wary of divs and css. That guide makes perfect sense and is concise. Excellent and thanks.
    Keep up the good work. Greetings

  86. got a good idea of CSS after going through the tutorial.
    thanks for keeping it simple

  87. Typing error in my previous comment (#120), I was trying to ask if it is posible to use “a href” with target attribute inside a div in CSS to obtain the same result (loading a file in other div keeping untouched the rest)as using “a href” with the target attribute in frames.

    Sorry for the mistake, I am not native english speaker, and my HTML is very basic.

  88. @Mario Castillo: Hi Mario! I removed the previous comment, no problem.

    It’s not possible to load a page into a div like that. What people use is some kind of server-side language like PHP, ASP or something. With those languages you can add content to your pages before sending them to the user.

  89. Thanks Emil, what about using @import ‘stylesheet.css’
    inside the style tag instead of using the most common “link rel…” to tell HTML code where to look for the CSS?
    Is this a good practice when thinking about usability in different browsers?

  90. @Mario Castillo: The only reason to use @import is that older version of browsers, like Netscape 4, does not support that command. That means that you will get no stylesheet at all in those browsers instead of a broken one.

  91. This is pretty good tutorial, its a really good starter tutorial. I thinks it explains well the chracterisrics of CSS.

  92. I love your article. I’ve just start learning CSS a few minutes ago, and i found your article is very easy to understand.

  93. Hi Emil, I just found your tutorial via google. Seems to be very usefull, but I still don`t understand why no one try to develop an easy language that makes it possible to write pages without that knowledge. But till this happens, we all are happy about your tutorial ;-))

  94. What a tutorial! Thanks! a lot… I hope that I could customize the appearance of the web page I’m working on.

  95. Thank you for this site.

    I need to re-do my site and because it’s very large have decided to learn CSS. Also, more of the advanced browsers only recognise CSS.

    A little hard getting my head around it, but hopefully your site will go a along way to helping me with this.

    Once again, thanks for a very informative site.

  96. The only reason to use @import is that older version of browsers, like Netscape 4, does not support that command. That means that you will get no stylesheet at all in those browsers instead of a broken one.

  97. I published my first web page in 1994. Reading your CSS tutorial sends me back to the first grade. I have gotten lazy over the years and been using frontpage not worrying much about code. I want to be a better page builder so I will stick with this and learn it. Thank you for your article and the baby steps you took me through. CSS looks very powerful.

  98. Hey thanks for the straightforward explanation … CSS is still a mystery to me but I’m figuring it out :)

  99. Fantastic article covering some points I really needed some good usability info for. Thanks

  100. People use CSS2 all the time, and they even already use parts of WHATWG HTML5 (like the CANVAS element, or contentEditable).
    I do not believe that the W3C HTML WG will complete recommendation status by 2008; and neither do I believe that that WG shall be disbanded late 2010.
    Specification are usable before being finished but not before those parts are incorporated into User Agents, e.g., browsers. Safari, Mozilla and Opera (since they’re the copyright holders) may be the first to include HTML5 elements and attributes once they become stable, Right?

  101. this was a great help. the only thing I would ask is to add some trouble shooting tips based on common problems.

  102. This is a really great article and a great site. I am a big fan of web standards. I linked to this article from (which is a site I could call “beginning web page design for dummies,” but I would not want to insult my sister and friends who are the people I am doing it for. Thanks for your site, I will be coming back many times!

  103. The sites shown here are visually appealing. The use of css to handle the layout, graphics, backgrounds, links is very well handled. The only issue is the css over takes the message and clouds the content. Sometimes simplicity can speak volumes. Our initial designs for our firms site looked very similar to all the ones shown here. Is that a coincidence. I don’t think so. The web-designer was referencing these sites for layout ideas. I think that is common amongst many designers these days. There is so much out there that looks fantastic, that one feels the urge to do it themself. Most web 2.0 sites look the same. I think we can all agree on that.

  104. Pingback: Web Site Design, Internet Marketing, Ecommerce - ryanj - From the Web Developer’s Wiki - CSS
  105. Is there any way to download the complete beginner’s Guide to CSS in a pdf format? I tried to print it page by page but it seems to pprint 28 pages for each part (4 parts times 28!!!!). Clearly some of us are not interested to print comments of users.


  106. @JAY TANNA: It’s not yet available and I’m sorry I have not made a better print stylesheet. My best recommendation right now is to print but make sure you only do it with the first X pages that contain the article. I’ll make a print-version on the next version of the site, I promise.

  107. Hello Emil,
    Many thanks for the tutorial on css. I have been trying to develop a new website for my biz and have not made much progress until I came across your link at w3c. The tutorials are well written and self explanatory. I have started work on the site since two days now using css. I am very impressed with the coding method of css, and more grateful to you for putting the tutorial on the net for all to learn from.
    One question though: how do I define image properties, , say I want to place a transparent image of size h=140 w=200 on the right side of the screen, or inside a table with texts b4 and after.
    Thanks and keep up the good work.

  108. @Vicky Affluence: Start with your content in the HTML. Two paragraphs of text and an image: <p>text</p><img src=”” width=”100″ height=”200″><p>text</p>. Image size are set directly in the HTML since image do no make sense without a size (and browsers are very bad at resizing… Good luck!

  109. Pingback: Extensive CSS List: 134 Top CSS Resources << Vandelay Website Design
  110. Good to hear! Don’t give up and go back to tables, it’s not worth it I promise.

  111. Is there any way to download the complete beginner’s Guide to CSS in a pdf format? I tried to print it page by page but it seems to pprint 28 pages for each part (4 parts times 28!!!!). Clearly some of us are not interested to print comments of users.


  112. @guzel sozler: sorry, but there’s currently no way to print articles without comments. I will tend to that in the next version of the site, but that’s a couple of weeks away.

  113. Pingback: GC 362 Class Blog » Blog Archive » CSS for Beginners
  114. This is terrific. I haven’t seen a better explanation of the fundamentals.

  115. Thank you for providing us of this user-friendly guide, it really helped me out. I just started using CSS, and I find it much easier after this. Thanks

  116. Hej! Your site is great. Well I have a question that I hope you can help me with. I have three different id’s (header, middle and footer). They all have different links and I need the links to be in different colors. Example: the header can have the color red, the middle blue and footer purple. How do I do that in CSS? Thanks again for a great site.

  117. @Kajuju:

    #header a { color: blue; }


    #middle a { color: red; }

    and so on. That will only match the links inside those ids. Hope you get it to work!

  118. Thank you ever so much for your words of wisdom. Just getting into the insanity of Web Design and CSS. Your explanations are simple enough, even for me, to understand!! Thanks again!

  119. Pingback: Custom CSS on — WP Assist
  120. Awesome tutorial on css, Ive used this as a reference a bunch of times, keep the great articles coming.

  121. Hej! Ville bara säga att denna sida hjälp mig mkt i kursen Webbdesign, tack!

  122. Great information! You make it sound almost doable but I am old school html and have not ventured into the world of CSS. I will try it out though.


  123. Nice. I am currently planning a re-design for my site and this helps develop my understanding for when I talk to web designers.


  124. I am finally finishing up my college education (started in the fall of ‘65) all online, and one of my courses this semester requires us to submit three papers on topics of our choice, within limits of the course, but they must be formatted with HTML, and the paper due next week must also use CSS and Meta tags. My discovery of your article(s) couldn’t have come at a better time. And the info is simple enough that us older newbies can understand and use it.

  125. Hi,
    It’s one of the most neat article I have ever read. It’s a great article on CSS, the concepts were very clear. It was also fun reading them. Thank you for a wonderful articles on CSS for beginners.

  126. Pingback: eyelearn » Blog Archive » 8/5/08 :: week 2
  127. Pingback: Web Tasar?m Tasar?m Kaynaklar? | Osman ERDO?AN
  128. Big thank you!

    I’m a print designer and complete niewbe in website world. Your explanations helped me to understand the basics of CSS, therefore i kept going and finished my website! Hurray!

  129. Pingback: Cascading Style Sheets |
  130. I agree with Tobias as he said :
    “But there are still things that you can’t do with CSS but can with tables…”.

    well the best way is to combine the two types of html structures, but it is also a pity that IE and Firefox (most used) and other web browsers are not 100% compatible with CSS in meantime.

    I hope this will be fixed because it is always extra work to be done to re-write all the CSS for IE and firefox seperately. Though there are some “fix codes” in CSS it is still a problem to make a website view the same in all browsers.

  131. Actually I think a site is made up of 3 parts: content, presentation, and behavior…

    Just curious, does all other browsers (except MSIE) have quirks mode rendering? Besides the fact that they’re all great tag soup parsers.

  132. Pingback: eyelearn » Blog Archive » 9/4/09 :: week 2
  133. @Jim Westergren: Nice to hear that you like it! I’m considering writing a second one aimed at higher level learners. We’ll see how that goes :)

  134. Great, I am looking forward to it. :) I’ve been reading a lot from Roger Johansson from 456 Berea Street lately – he has some great articles about CSS. Perhaps I will even write something myself, let’s see about that.

  135. Hey thanks for the CSS Beginners Post. This gave some new work flow ideas on some of the CSS elements. That would be awesome if you post one for a intermediate level! I’ll have to watch for it.

  136. Pingback: SEO CSS | PosicionaPro
  137. Thanks Emil, Great article/tutorial. It is very helpful. I put your link in my discussion post for my Web design class at University of Phoenix online. Hope they check it out.

  138. Pingback: Css...?
  139. Pingback: Recursos para aprender más sobre CSS
  140. Pingback: Free Resources to Help You Become a CSS Expert Designer, |
  141. Pingback: CSS Tips and Tricks -
  142. Pingback: Recursos para aprender más sobre CSS « Code Impludt
  143. Pingback: 250+?????????CSS?? - ????????
  144. Hej Emil…

    Jättebra sida om Css. Jag har tenta på Torsdag den 7 januari och nu känner jag att jag kommer att klara av tentan!

    Tack så mycket

  145. Pingback: Info Situs Triks Pakai CSS « Vulkanisir Ban Blog
  146. Pingback: Recursos para aprender más sobre CSS · BBBlog
  147. No wonder why this post has got 222 comments. I found it this tutorial to be the most easily understandable. I really liked it the way it was described. CSS here I come.

  148. Pingback: Recursos para Css básico, intermedio y avanzado | DinamicLearning
  149. Thanks for the basic css guide which is must for bloggers like us.

  150. These really helped me to build my homepage, I can really appreciated if people take some time and write a usefull tutorial.

  151. Awesome guide for css newbies also a good resource if you want to refresh your css skills. Out of the game 4 weeks and I need to refresh my css knowledge as well. Insane, its not like riding a bike. :) Good luck everyone

  152. Pingback: Vad är CSS och varför bör jag använda det istället för tabeller? | Kriga Designs blogg
  153. I’m just learning about css and have found it quite difficult to pick up, but actually found your post quite easy to follow. Much thanks :-)

  154. Thanks for this. As an artist I find the amalgamation of coding and designing to be shit. I have been trying to design using tables since taking an interest in web design because I feel more at home with the visual interface, but it doesn’t work and it seems to offend people who consider themselves web designers (I see them more as web programmers). I am surprised that there isn’t a company or a group that has been established to support the development of tables as a visual layout device (has there?). I think it’s unbelievable that artists should be forced to learn programming in order to create and that the web ‘design’ community (that I’ve run into) are so full of indignation when I’ve suggested that the basic ‘standards’ of creating in this medium are just wrong. I have a very clear idea of what it should look like: you open something with an interface like illustrator or photoshop, you create a page, you upload it to a server and it works – all of the programming is done for you behind the scenes, like driving a car – I don’t have to build the engine to drive it, right? Artists are becoming programmers and losing valuable time, inspiration and focus in the creative process, so is it any wonder that 99% of websites out there make you feel nothing at all? The internet, like life, should be full of strangeness, like a rich painting. But it gets older day by day.

  155. @Bucko: Maybe that’s where we will land, time will tell. I’m not so sure though. To build a car, you need more than just the image of the car. The same with websites, the structure of a page is not always apparent in the design…

  156. Hi Emil:
    Excellent job!! and you have made me a Design-Content believer. So I guess I’ll have to go back and clean up some code. I’m using Dieter Schneider’s template and I have noticed some quirks. I design on apache (from easyPHP install) and run our site on Linux, thought that was the problem? Maybe it’s here?



  157. Oops I pasted the HTML tag in the last post…what was I thinking? Doh!!

  158. Pingback: Web Design » Blog Archive » WebSource Presentation
Comments are closed.