Beginner’s guide to CSS

Building a standards based HTML template

We have talked a lot about the theory behind CSS and HTML working together to form a site with good structure that is separated from the design. But the first parts of building pages are always the same, you type ... and so on. So why not make a template that you just copy to get started on a new site? Now, what requirements do we have?

It should:

  1. Contain: header, navigation, content, footer
  2. Use well-structured HTML
  3. Be error-free and encourage good coding

Let’s start with number one there. We want our HTML document split up in four parts all with different meaning. For this I will use the

-tag. Div is short for “division” and isn’t header, navigation and so on just “divisions” of our site? I think so. So let’s start:






Your own page title



Ok, there might be some new stuff there so let’s go through the lines one by one. First we state this document’s doctype: what language we use. You might have heard of XHTML, another similar web language, but for a first page we don’t need the features that gives us access to, keep it simple, just go with HTML. Also, the above sets the document to use Strict HTML. To understand that you need to know that there are two kinds of rendering in a browser. One that follows the standards set up by the W3C, “standards mode”, and one for older pages, called “quirks mode”. Standards mode is what we want to use. It makes the pages render (almost) the same in modern browsers and it frees us from being dependent on a specific browser, we’ll just follow the standard. Quirks mode is something of a bug mode. It’s there to keep old pages looking the same as they did before browsers started trying to follow the standards and is therefore intentionally filled with strange bugs. A browser determines which rendering mode to use based on what doctype we use, so make sure you use the right one!

Ok. That’s a lot of explaining for a single line of code, I’ll be swifter now, next line. You have probably written before in the beginning of your documents. My line is almost like that except that I have added lang="en" there. That line tells the browser which language we will use. Why does it matter what language we use? you ask… Well, there is assistive technology that read webpages to people out loud called screen readers. Those have to know what language it is to be able to pronounce the words. It’s so easy for you to add those few characters so why not do it? If you don’t plan on making an English page you can find your own language code by visiting WAIs Language Codes and check out the two-letter names there (Note: language codes are in lowercase).

Next we have the head of the document. The head contains a some of meta-information about the page, like character encoding, title and what stylesheet (CSS file) to use. The charset there is the trickiest one so let’s take that first. There are a lot of different letters in a language. When computers where first constructed the engineers only thought about the American/English language, they didn’t even think about the swedish letters å, ä, ö or the deutsch umlaut ü or what about the &-sign? There are a lot of characters and at first there was no general consensus on how to handle them. Then someone came up with the smart idea of grouping them into sets, groups of characters that are used in certain parts of the world. So, what the meta-tag does is simply to state: “This person wants to input western characters (latin-1 characters)”, and this tells the browser what character set to use. A more genaral approach is to use the utf-8 character set but that quickly gets tricky. Finally we have a text/html there that simply tells the server to send the document as a HTML, not like an image or something like that. The </code> and <code lang="html4strict" inline="true"><link></code> you should be familiar with, if not, google it :)</p> <p>That was a lot of info on just a few lines of code, I hope I didn’t give the impression that this stuff is hard, because it’s not. To use the stuff above you just copy and paste it and start filling it with content.</p> <p>The body of the document consists of a bunch of divisions, let’s add some content to them:</p> <p><code lang="html4strict" id="semantics"><br /> ...</p> <div id="header"> <h1>The name of this page</h1> </div> <div id="navigation"> <h2>Navigation</h2> <ul> <li><a href="first.html">First</a></li> <li><a href="second.html">Second</a></li> <li><a href="third.html">Third</a></li> </ul> </div> <div id="content"> <h2>Content</h2> <p>Some sample content, add your own here</p> </div> <div id="footer"> <p>This page is written by [Your name] and builds on a <a href="http://friendlybit.com">Friendlybit template</a>.</p> </div> <p>...<br /> </code></p> <p>What have we done here? First you should note that a quick overview of the document tells you quite much about the content. You can easily see that some stuff are headers (h1, h2) and some are just a list of links (ul, li, a). Let’s go through the code quickly:</p> <p>First we have a header. A header is something that’s most often a big image and some text. Some pages don’t have the header in the HTML at all, they just link to an image and have the text in that image. Problem with that is that neither search engines nor screen readers can get the title text. With the title text being the most important piece of description a visitor has to what page they have come to, you do have a problem. So trust me, keep that text there.</p> <p>Next up we have the navigation. Navigation should almost always be marked up as an unordered list of links. I’ve seen the strangest variants of this with tables, nested tables, <code lang="html4strict" inline="true"><br /></code>-tags after each line and so on but the only content there is a list of links, why make it something it isn’t? Using a list doesn’t mean it will have to look a certain way, remember that all design is handled in the CSS later on, this is just HTML we are dealing with here. Note: you can easily remove the bullet marks with <code lang="css" inline="true">list-style: none;</code>, that’s not a reason to use some other HTML.</p> <p>The most important part of your HTML document is the content. This is the reason people will visit your page and this is where you should put most of your effort. Mark your headers with appropriate header-tags and make sure they look different from the ordinary text, this makes it easier quickly get a grip of what you’re are trying to say. Use paragraph tags around your paragraphs to make is easier to style your text. The CSS <code lang="css" inline="true">text-indent: 2em;</code> adds some space before only the first word in each paragraph, just to name one simple thing you can do with CSS when you’ve used good markup.</p> <p>Lastly, it could be a good idea to add a footer to your page. Make sure you have some kind of contact information here or somewhere else on your site, who knows what people will want to ask you? If you want to help me you could add a link to this site somewhere on your site too. If you do, thanks alot!</p> <p>On the next (and last) page of this short beginners guide we will wrap everything up and add some sample CSS to the mix. All is free for you to copy and use on your page. Ready?</p> </div> </div> <footer> <nav class="page-nav"><p>Pages: <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/">1</a> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/2/">2</a> 3 <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/4/">4</a></p></nav> </footer> <section id="comments" class="comments"> <h2>241 responses to “<span>Beginner’s guide to CSS</span>”</h2> <ol class="comment-list"> <li id="comment-55" class="pingback even thread-even depth-1"> <div class="comment-body"> Pingback: CSS Learning Reference at TADSpot </div> </li><!-- #comment-## --> <li id="comment-56" class="pingback odd alt thread-odd thread-alt depth-1"> <div class="comment-body"> Pingback: Ronald Yau » Blog Archive » Beginners guide to CSS and standards </div> </li><!-- #comment-## --> <li id="comment-59" class="pingback even thread-even depth-1"> <div class="comment-body"> Pingback: Metropolis » Begginer’s Guide to CSS </div> </li><!-- #comment-## --> <li id="comment-71" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-71" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/6f6fd3123798e04bd977e5bdb62cfd0b?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/6f6fd3123798e04bd977e5bdb62cfd0b?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Jim Berger</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-71"> <time datetime="2006-01-23T06:45:37+00:00"> 23 Jan, 2006 at 6:45 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Thanks.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-75" class="comment even thread-even depth-1"> <article id="div-comment-75" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/1f977c728baad0653ad423cb6433ba6c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/1f977c728baad0653ad423cb6433ba6c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Michael Gernes</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-75"> <time datetime="2006-01-24T05:34:00+00:00"> 24 Jan, 2006 at 5:34 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Emil,</p> <p>Thanks so much for providing such a friendly tutorial for those of us still learning CSS!</p> <p>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.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-78" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-78" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/4adcca49b3b1e5a08ac202f5d5a9e688?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/4adcca49b3b1e5a08ac202f5d5a9e688?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">bikhod</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-78"> <time datetime="2006-01-24T15:29:37+00:00"> 24 Jan, 2006 at 15:29 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Hi</p> <p>Excellent and informative introduction. I particularly like the template page that you provided.</p> <p>I think a mention of <a href="http://www.csszengarden.com" rel="nofollow">http://www.csszengarden.com</a> would be good too.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-79" class="comment even thread-even depth-1"> <article id="div-comment-79" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/c989725efcbebc24357a039ef16b237c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/c989725efcbebc24357a039ef16b237c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">arnab</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-79"> <time datetime="2006-01-24T19:00:58+00:00"> 24 Jan, 2006 at 19:00 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-80" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-80" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/a53e665ffda0b867c985683efd065a6d?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/a53e665ffda0b867c985683efd065a6d?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">leela kolluri</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-80"> <time datetime="2006-01-24T19:39:46+00:00"> 24 Jan, 2006 at 19:39 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Hey,<br /> 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.<br /> regards,<br /> Leela</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-84" class="pingback even thread-even depth-1"> <div class="comment-body"> Pingback: <a href='http://friendlybit.com/html/google-statistics-over-html-usage/' rel='external nofollow' class='url'>Friendly Bit » Google statistics over HTML usage</a> </div> </li><!-- #comment-## --> <li id="comment-86" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-86" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/d2b8b759d0ec5f91e5721ffcf2aeffd0?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/d2b8b759d0ec5f91e5721ffcf2aeffd0?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Shan</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-86"> <time datetime="2006-01-26T03:14:22+00:00"> 26 Jan, 2006 at 3:14 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>A very nice tutorial. Thanks.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-90" class="comment even thread-even depth-1"> <article id="div-comment-90" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/8ae0f1c9b48c9f6cbb73ee5c1362a12e?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/8ae0f1c9b48c9f6cbb73ee5c1362a12e?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://www.shesmylittle.com/' rel='external nofollow' class='url'>Bill</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-90"> <time datetime="2006-01-27T05:43:08+00:00"> 27 Jan, 2006 at 5:43 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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?</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-91" class="comment byuser comment-author-administrator bypostauthor odd alt thread-odd thread-alt depth-1"> <article id="div-comment-91" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Emil Stenström</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-91"> <time datetime="2006-01-27T10:30:15+00:00"> 27 Jan, 2006 at 10:30 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>@Bill: Sorry, but I don’t understand what you mean. Please ask support questions in the IRC channel #CSS on EFNet, not in comments.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-96" class="comment even thread-even depth-1"> <article id="div-comment-96" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/53d733bbc61f570961465194faa86dcd?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/53d733bbc61f570961465194faa86dcd?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://www.kolegraff.com' rel='external nofollow' class='url'>Ron Kolegraff</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-96"> <time datetime="2006-01-28T14:13:04+00:00"> 28 Jan, 2006 at 14:13 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Thanks,<br /> right help at the right time.<br /> I was on the verge of going back to tables frustrated with the explainations I found for CSS.<br /> 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.<br /> RJK</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-97" class="comment byuser comment-author-administrator bypostauthor odd alt thread-odd thread-alt depth-1"> <article id="div-comment-97" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Emil Stenström</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-97"> <time datetime="2006-01-28T18:22:31+00:00"> 28 Jan, 2006 at 18:22 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>@Ron: Good to hear! Don’t give up and go back to tables, it’s not worth it I promise.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-106" class="comment even thread-even depth-1"> <article id="div-comment-106" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/4a23ea9b561f1536cb0e6affaf102845?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/4a23ea9b561f1536cb0e6affaf102845?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Tobias</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-106"> <time datetime="2006-01-31T12:41:40+00:00"> 31 Jan, 2006 at 12:41 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-107" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-107" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/10e36cdc9fa8b745852fb9e3df961658?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/10e36cdc9fa8b745852fb9e3df961658?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Shyam</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-107"> <time datetime="2006-01-31T20:28:57+00:00"> 31 Jan, 2006 at 20:28 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>hi sir,</p> <p>this is good to learn CSS., i m a student from Sweden,</p> <p>thanking you,</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-111" class="comment even thread-even depth-1"> <article id="div-comment-111" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/8fa60cc81a4f2aabd0d68da131d7443a?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/8fa60cc81a4f2aabd0d68da131d7443a?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">draco</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-111"> <time datetime="2006-01-31T22:23:16+00:00"> 31 Jan, 2006 at 22:23 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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.</p> <p>Actually I think a site is made up of 3 parts: content, presentation, and behavior. I could be wrong, just what I thought!</p> <p>Just curious, does all other browsers (except <abbr>MSIE</abbr>) have quirks mode rendering? (Besides the fact that they’re all great tag soup parsers.)</p> <p>And while I was scanning through, I was wondering why you suggested against the use of <code>b</code> and yet demonstrated the right usage of <code>em</code> instead. How about <code>strong</code>? With that we can really do away with <code>font-weight: bold;</code>! Well, at least to me it doesn’t matter if <code>strong</code> is a level more emphasis’d than <code>em</code>. Just some thoughts about this. I’m sure you have your reasons to do so. :)</p> <p>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.</p> <p>Good job.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-120" class="comment byuser comment-author-administrator bypostauthor odd alt thread-odd thread-alt depth-1"> <article id="div-comment-120" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Emil Stenström</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-120"> <time datetime="2006-02-02T23:47:43+00:00"> 2 Feb, 2006 at 23:47 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>@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.</p> <p>All modern browsers have quirks mode/standards mode rendering, some even have a “almost standard” mode.</p> <p>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.</p> <p>Thanks for you comments! :)</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-127" class="comment even thread-even depth-1"> <article id="div-comment-127" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/29b229bcf984eabb3f42b69387aaf199?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/29b229bcf984eabb3f42b69387aaf199?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Martin</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-127"> <time datetime="2006-02-05T23:16:27+00:00"> 5 Feb, 2006 at 23:16 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Hi!<br /> How to position divs using CSS position:relative? When I try to position elements in this way it behaves like position:absolute.<br /> For example:<br /> #something<br /> {<br /> position:relative;<br /> top:50px;<br /> left:50px;<br /> }<br /> 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. :(</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-128" class="comment byuser comment-author-administrator bypostauthor odd alt thread-odd thread-alt depth-1"> <article id="div-comment-128" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Emil Stenström</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-128"> <time datetime="2006-02-05T23:27:16+00:00"> 5 Feb, 2006 at 23:27 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>@Martin: you are better off just setting margin-top: 50px; and margin-right: 50px; on #something if you just want to move it down.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-129" class="comment even thread-even depth-1"> <article id="div-comment-129" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/5dff01390fb965f5a2013edf86e52883?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/5dff01390fb965f5a2013edf86e52883?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://www.aaafab.ws' rel='external nofollow' class='url'>Arthur Allison</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-129"> <time datetime="2006-02-06T02:46:25+00:00"> 6 Feb, 2006 at 2:46 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-130" class="comment byuser comment-author-administrator bypostauthor odd alt thread-odd thread-alt depth-1"> <article id="div-comment-130" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Emil Stenström</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-130"> <time datetime="2006-02-06T07:13:02+00:00"> 6 Feb, 2006 at 7:13 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>@Arthur: Thanks!</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-131" class="comment even thread-even depth-1"> <article id="div-comment-131" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/b6f57d63154019f0f0924d71a076af67?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/b6f57d63154019f0f0924d71a076af67?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Chad</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-131"> <time datetime="2006-02-06T18:52:16+00:00"> 6 Feb, 2006 at 18:52 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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. </p> <p>Your article is helpful, informative, direct, and a joy to read. I look forward to reading more of your work in the future!</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-155" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-155" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/348ff276659574e37f7a1f570cd692f0?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/348ff276659574e37f7a1f570cd692f0?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Robert</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-155"> <time datetime="2006-02-10T21:48:09+00:00"> 10 Feb, 2006 at 21:48 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Excellent article.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-169" class="comment even thread-even depth-1"> <article id="div-comment-169" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/ba65aceb314de7b2753c80cfc7a95bbe?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/ba65aceb314de7b2753c80cfc7a95bbe?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://feeds.feedburner.com/webdevdesign' rel='external nofollow' class='url'>Chris Charlton</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-169"> <time datetime="2006-02-14T00:50:09+00:00"> 14 Feb, 2006 at 0:50 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Good short, beginners, article! :)</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-172" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-172" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/1dec98cef7c4c71df50a9fcd45a25e9d?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/1dec98cef7c4c71df50a9fcd45a25e9d?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Will</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-172"> <time datetime="2006-02-14T10:45:00+00:00"> 14 Feb, 2006 at 10:45 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Hi Emil,</p> <p>Thanks for a great tutorial. This is the first tutorial I have read about CSS that is straightforward enough to understand.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-175" class="comment even thread-even depth-1"> <article id="div-comment-175" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/3209fa0b8f16a4edfb8ce521d4ee33e1?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/3209fa0b8f16a4edfb8ce521d4ee33e1?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Penny Pett</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-175"> <time datetime="2006-02-15T05:36:11+00:00"> 15 Feb, 2006 at 5:36 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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!</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-177" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-177" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/88560291513eac923d933e24790fcb2c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/88560291513eac923d933e24790fcb2c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://sobertillnoon.com' rel='external nofollow' class='url'>Trebek</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-177"> <time datetime="2006-02-15T16:46:16+00:00"> 15 Feb, 2006 at 16:46 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>nice, very helpful.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-187" class="comment even thread-even depth-1"> <article id="div-comment-187" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/fa868faec7815f331765c59f3a239e30?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/fa868faec7815f331765c59f3a239e30?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Andrea</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-187"> <time datetime="2006-02-16T22:28:08+00:00"> 16 Feb, 2006 at 22:28 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Hello Emil,<br /> 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!<br /> Cheers,<br /> Andrea (from Hungary)</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-191" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-191" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/c69d80001c3d8bf4f96d73c43ad67b4f?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/c69d80001c3d8bf4f96d73c43ad67b4f?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">vandana</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-191"> <time datetime="2006-02-17T13:19:48+00:00"> 17 Feb, 2006 at 13:19 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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.<br /> Kindly give me more suggestion if you have</p> <p>Thanks,<br /> vandanag</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-194" class="comment byuser comment-author-administrator bypostauthor even thread-even depth-1"> <article id="div-comment-194" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Emil Stenström</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-194"> <time datetime="2006-02-17T17:59:13+00:00"> 17 Feb, 2006 at 17:59 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>@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.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-196" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-196" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/84a5e6d439e429efa6e4010bfb3215e6?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/84a5e6d439e429efa6e4010bfb3215e6?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Susan</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-196"> <time datetime="2006-02-18T06:09:44+00:00"> 18 Feb, 2006 at 6:09 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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.</p> <p>Many, many thanks.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-204" class="comment even thread-even depth-1"> <article id="div-comment-204" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/887705db32b46a1a9480ca9833686da3?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/887705db32b46a1a9480ca9833686da3?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">David Brooks</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-204"> <time datetime="2006-02-20T02:22:32+00:00"> 20 Feb, 2006 at 2:22 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Add ons Add-ons addons<br /> 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.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-212" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-212" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/d5c168f1f6ca9932adb88485d99b7d8c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/d5c168f1f6ca9932adb88485d99b7d8c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">name*</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-212"> <time datetime="2006-02-22T16:47:57+00:00"> 22 Feb, 2006 at 16:47 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-214" class="comment byuser comment-author-administrator bypostauthor even thread-even depth-1"> <article id="div-comment-214" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Emil Stenström</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-214"> <time datetime="2006-02-22T18:55:53+00:00"> 22 Feb, 2006 at 18:55 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>name*: What stars are you talking about? I don’t use any stars on my page.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-216" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-216" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/5392ef8fe7ecb7ef16283ece40d27c08?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/5392ef8fe7ecb7ef16283ece40d27c08?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">name*</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-216"> <time datetime="2006-02-24T04:29:31+00:00"> 24 Feb, 2006 at 4:29 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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.</p> <p>Sorry if I came across as rude, wasn’t meant to be.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-217" class="comment byuser comment-author-administrator bypostauthor even thread-even depth-1"> <article id="div-comment-217" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Emil Stenström</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-217"> <time datetime="2006-02-24T07:39:53+00:00"> 24 Feb, 2006 at 7:39 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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.</p> <p>[change: I’ve changed the word star to asterix to make the text a little clearer]</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-220" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-220" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/84341abfb04303c1585951e6ad1851d8?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/84341abfb04303c1585951e6ad1851d8?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">matt nixon</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-220"> <time datetime="2006-02-26T23:39:15+00:00"> 26 Feb, 2006 at 23:39 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-221" class="comment even thread-even depth-1"> <article id="div-comment-221" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/69ad7cb4d5a2a25aadfddee5f3d862a0?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/69ad7cb4d5a2a25aadfddee5f3d862a0?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Carol Brannon-King</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-221"> <time datetime="2006-02-27T09:24:25+00:00"> 27 Feb, 2006 at 9:24 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Thank you very much!<br /> I have read numerous books trying to grasp the basic concepts and understanding of CSS and it has been difficult.</p> <p>Your tutorial is Excellent!</p> <p>It makes so much sense and Easy to grasp. Also, thank you for the additional resource links!</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-234" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-234" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/2078bad33c3086744d304bba957ccbd0?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/2078bad33c3086744d304bba957ccbd0?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Kailash</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-234"> <time datetime="2006-03-02T06:44:48+00:00"> 2 Mar, 2006 at 6:44 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Excellent Article.<br /> It has changed a lot the way i was Creating web pages.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-241" class="comment even thread-even depth-1"> <article id="div-comment-241" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/f6da5936fb3b22f733b53cbb8d20103d?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/f6da5936fb3b22f733b53cbb8d20103d?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Regina</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-241"> <time datetime="2006-03-04T21:09:05+00:00"> 4 Mar, 2006 at 21:09 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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.<br /> Thanks!!</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-247" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-247" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/55d4243ade230207d5bcfd60f904b755?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/55d4243ade230207d5bcfd60f904b755?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://gardenclub.net' rel='external nofollow' class='url'>Louise Buck</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-247"> <time datetime="2006-03-08T14:20:37+00:00"> 8 Mar, 2006 at 14:20 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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!</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-272" class="comment even thread-even depth-1"> <article id="div-comment-272" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/d8c1600fed5e9c4a8222da20a5743a0d?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/d8c1600fed5e9c4a8222da20a5743a0d?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Matt Knight</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-272"> <time datetime="2006-03-09T16:04:02+00:00"> 9 Mar, 2006 at 16:04 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>on your begginers guide to css you state… “do this by adding this line:”</p> <p>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</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-278" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-278" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/c531c927053a1fedece9d1efb898e82e?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/c531c927053a1fedece9d1efb898e82e?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Norm</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-278"> <time datetime="2006-03-09T20:49:06+00:00"> 9 Mar, 2006 at 20:49 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-281" class="comment byuser comment-author-administrator bypostauthor even thread-even depth-1"> <article id="div-comment-281" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://friendlybit.com' rel='external nofollow' class='url'>Emil Stenström</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-281"> <time datetime="2006-03-09T23:44:00+00:00"> 9 Mar, 2006 at 23:44 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>@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.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-292" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-292" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/14dfde1bdca3be6a7c094a220a7cd537?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/14dfde1bdca3be6a7c094a220a7cd537?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://www.jewelswebgraphics.com/' rel='external nofollow' class='url'>Jewel</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-292"> <time datetime="2006-03-11T22:22:27+00:00"> 11 Mar, 2006 at 22:22 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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!</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-295" class="comment even thread-even depth-1"> <article id="div-comment-295" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/4b6abce6a0e8ac27c82f10d249c08e30?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/4b6abce6a0e8ac27c82f10d249c08e30?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Josef</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-295"> <time datetime="2006-03-12T11:40:28+00:00"> 12 Mar, 2006 at 11:40 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-299" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-299" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/917986137a6ebd921e820b0a1ae95fd8?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/917986137a6ebd921e820b0a1ae95fd8?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">chica</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-299"> <time datetime="2006-03-13T18:57:44+00:00"> 13 Mar, 2006 at 18:57 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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 : )</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-306" class="comment even thread-even depth-1"> <article id="div-comment-306" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/17178e96c80d5a276eb71391b47ad80b?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/17178e96c80d5a276eb71391b47ad80b?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Jim</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-306"> <time datetime="2006-03-14T21:07:04+00:00"> 14 Mar, 2006 at 21:07 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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.</p> <p>Jim</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-310" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-310" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/66e07fff6a6243b144dd6be12e52254e?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/66e07fff6a6243b144dd6be12e52254e?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">li.sang</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-310"> <time datetime="2006-03-15T06:44:00+00:00"> 15 Mar, 2006 at 6:44 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>thanks.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-313" class="comment even thread-even depth-1"> <article id="div-comment-313" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/45359335df03e1dd2b0f37d50c7b134e?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/45359335df03e1dd2b0f37d50c7b134e?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Matt</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-313"> <time datetime="2006-03-15T16:26:47+00:00"> 15 Mar, 2006 at 16:26 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-316" class="comment byuser comment-author-administrator bypostauthor odd alt thread-odd thread-alt depth-1"> <article id="div-comment-316" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://friendlybit.com' rel='external nofollow' class='url'>Emil Stenström</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-316"> <time datetime="2006-03-16T00:14:34+00:00"> 16 Mar, 2006 at 0:14 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>@Matt: Thanks for pointing that out. I’ll take a look, IE has problems with some pngs it seems. What a mess that browser is.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-319" class="comment even thread-even depth-1"> <article id="div-comment-319" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/8b93aaf22e113c559bc4e17c1729006d?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/8b93aaf22e113c559bc4e17c1729006d?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Anurag Soni</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-319"> <time datetime="2006-03-16T08:32:30+00:00"> 16 Mar, 2006 at 8:32 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>nice tutorial for begginer . keep it up.<br /> Thanks<br /> Anurag Soni</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-320" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-320" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/8b93aaf22e113c559bc4e17c1729006d?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/8b93aaf22e113c559bc4e17c1729006d?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Anurag Soni</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-320"> <time datetime="2006-03-16T09:49:53+00:00"> 16 Mar, 2006 at 9:49 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>excellent tutorial. it helps me a lot.<br /> Thanks<br /> Anurag soni</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-321" class="comment even thread-even depth-1"> <article id="div-comment-321" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/78eac5397451b672c411960a47431c4d?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/78eac5397451b672c411960a47431c4d?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Ksenya</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-321"> <time datetime="2006-03-16T10:17:01+00:00"> 16 Mar, 2006 at 10:17 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>This article is so cool! I’m just getting to know css and for me your examples are very handy!<br /> Thx!</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-326" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-326" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/06f60fa010fe0ea50077ab52804b2b56?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/06f60fa010fe0ea50077ab52804b2b56?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">srinivas</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-326"> <time datetime="2006-03-18T02:47:23+00:00"> 18 Mar, 2006 at 2:47 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>hi sir<br /> 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</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-358" class="comment even thread-even depth-1"> <article id="div-comment-358" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/47a0762be32af11358820186da514bb6?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/47a0762be32af11358820186da514bb6?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://bbs.w3pub.com/' rel='external nofollow' class='url'>gaoshou</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-358"> <time datetime="2006-03-25T14:02:16+00:00"> 25 Mar, 2006 at 14:02 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>As i don’t know that the article with this url <a href="http://bbs.w3pub.com/announce/announce.asp?BoardID=3&ID=1008" rel="nofollow">http://bbs.w3pub.com/announce/announce.asp?BoardID=3&ID=1008</a> is copy from your website,I know this article by another website,because i don’t know where this article is from,i didn’t write the author of this article,i has add it.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-359" class="comment byuser comment-author-administrator bypostauthor odd alt thread-odd thread-alt depth-1"> <article id="div-comment-359" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://friendlybit.com' rel='external nofollow' class='url'>Emil Stenström</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-359"> <time datetime="2006-03-25T15:01:13+00:00"> 25 Mar, 2006 at 15:01 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>@gaoshou: thanks for removing that article from your site. No hard feelings.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-363" class="comment even thread-even depth-1"> <article id="div-comment-363" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/bbe98576227bec0afb1af98004a734f5?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/bbe98576227bec0afb1af98004a734f5?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Kavita</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-363"> <time datetime="2006-03-28T16:46:06+00:00"> 28 Mar, 2006 at 16:46 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>This article is really of great help to the people who want to make a quick start with designing with CSS.</p> <p>The way it has been presented is fabulous.</p> <p>Keep up the good work</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-366" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-366" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/06d7716b9adca57df11c51e73159e32a?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/06d7716b9adca57df11c51e73159e32a?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">zaharamh</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-366"> <time datetime="2006-03-29T09:35:27+00:00"> 29 Mar, 2006 at 9:35 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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!</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-369" class="trackback even thread-even depth-1"> <div class="comment-body"> Pingback: Anonymous </div> </li><!-- #comment-## --> <li id="comment-390" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-390" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/6bc07b0bb09a299d084aba1b07fb5bd9?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/6bc07b0bb09a299d084aba1b07fb5bd9?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://www.chakari.net' rel='external nofollow' class='url'>Chris</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-390"> <time datetime="2006-04-08T12:32:35+00:00"> 8 Apr, 2006 at 12:32 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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.<br /> kind regards<br /> Chris</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-463" class="comment even thread-even depth-1"> <article id="div-comment-463" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/1f1d8881ba0f5eb7508c029c706ecb55?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/1f1d8881ba0f5eb7508c029c706ecb55?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">tek-69</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-463"> <time datetime="2006-04-22T07:48:40+00:00"> 22 Apr, 2006 at 7:48 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Great guide. I found it very helpfull. It was simple to follow and explained everything very clearly.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-469" class="pingback odd alt thread-odd thread-alt depth-1"> <div class="comment-body"> Pingback: Vientos de Libertad » Blog Archive » Cada cosa en su lugar </div> </li><!-- #comment-## --> <li id="comment-480" class="comment even thread-even depth-1"> <article id="div-comment-480" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/0de9f36daa2c542addbd804f4d0d9c04?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/0de9f36daa2c542addbd804f4d0d9c04?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Hasib</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-480"> <time datetime="2006-04-23T17:35:21+00:00"> 23 Apr, 2006 at 17:35 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Hi, your tutorial gives an excellent introduction to CSS. Thanks!</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-485" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-485" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/be2da9b0f62f2738063ec39a1b663869?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/be2da9b0f62f2738063ec39a1b663869?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">James Thomas</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-485"> <time datetime="2006-04-24T17:24:58+00:00"> 24 Apr, 2006 at 17:24 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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.<br /> 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.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-486" class="comment byuser comment-author-administrator bypostauthor even thread-even depth-1"> <article id="div-comment-486" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://friendlybit.com' rel='external nofollow' class='url'>Emil Stenström</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-486"> <time datetime="2006-04-24T17:35:37+00:00"> 24 Apr, 2006 at 17:35 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>@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!</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-507" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-507" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/bca3b26929d8bbe9b8aa9fcb36e0960f?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/bca3b26929d8bbe9b8aa9fcb36e0960f?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Jason Bates</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-507"> <time datetime="2006-04-25T16:49:52+00:00"> 25 Apr, 2006 at 16:49 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Maybe i’ll join you in the #CSS chat some time.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-508" class="comment even thread-even depth-1"> <article id="div-comment-508" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/c513c4885340f4c5369905cb7b4b256e?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/c513c4885340f4c5369905cb7b4b256e?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Mike T</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-508"> <time datetime="2006-04-25T17:03:45+00:00"> 25 Apr, 2006 at 17:03 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-516" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-516" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/bff310c31176f6f2b046f5b5c295a6b9?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/bff310c31176f6f2b046f5b5c295a6b9?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">rajesh</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-516"> <time datetime="2006-04-27T09:15:22+00:00"> 27 Apr, 2006 at 9:15 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>your tutorial gives an excellent introduction to me., it is very usefull to me</p> <p>thx,<br /> Rajesh.D</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-524" class="comment even thread-even depth-1"> <article id="div-comment-524" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/663db549ab7aca23615a55530e889536?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/663db549ab7aca23615a55530e889536?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">alex b</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-524"> <time datetime="2006-04-28T20:48:27+00:00"> 28 Apr, 2006 at 20:48 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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 :)</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-530" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-530" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/671405dc68f4ec1280847ef2ee3e06b2?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/671405dc68f4ec1280847ef2ee3e06b2?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Peter D Wilson</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-530"> <time datetime="2006-04-30T20:05:00+00:00"> 30 Apr, 2006 at 20:05 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Great site, great articles but get rid of the “So trust me”s They detract from your excellent writing.</p> <p>Peter</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-542" class="comment even thread-even depth-1"> <article id="div-comment-542" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/372d442aac46ec3c7c986b7d96cd55f3?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/372d442aac46ec3c7c986b7d96cd55f3?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Julius</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-542"> <time datetime="2006-05-02T15:41:43+00:00"> 2 May, 2006 at 15:41 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>great site, thanks for the tutorial :D</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-545" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-545" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/69f2eac0fc5ee73a368a98ad0bd0e870?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/69f2eac0fc5ee73a368a98ad0bd0e870?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Ali</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-545"> <time datetime="2006-05-03T01:51:33+00:00"> 3 May, 2006 at 1:51 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Hi<br /> I want to know how can Find Downloadable CSS manual?</p> <p>Please tell me by email!</p> <p>Good Luke</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-546" class="comment byuser comment-author-administrator bypostauthor even thread-even depth-1"> <article id="div-comment-546" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://friendlybit.com' rel='external nofollow' class='url'>Emil Stenström</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-546"> <time datetime="2006-05-03T10:39:40+00:00"> 3 May, 2006 at 10:39 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>@Ali: I googled what you asked for and found this: <a href="http://www.htmlhelp.com/distribution/" rel="nofollow">http://www.htmlhelp.com/distribution/</a></p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-606" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-606" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/6e5c4e85c62d514b046dff26e8bd0581?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/6e5c4e85c62d514b046dff26e8bd0581?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Torin</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-606"> <time datetime="2006-05-09T20:49:25+00:00"> 9 May, 2006 at 20:49 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Very cool tutorial and a good fun reading. It is clear and simple and it shows that you care about the readers.<br /> I’m learning from your materials – thanks! Will tell others.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-873" class="comment even thread-even depth-1"> <article id="div-comment-873" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/3373279d79d368ae7217c8edc665bd7d?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/3373279d79d368ae7217c8edc665bd7d?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Kyle</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-873"> <time datetime="2006-05-24T10:11:46+00:00"> 24 May, 2006 at 10:11 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Wow, this was much better than the W3C tutorial. I kept falling asleep reading that and never really understood it.</p> <p>Thanks!!</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-884" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-884" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/17c0393d675b3e7414a0c22325ef8535?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/17c0393d675b3e7414a0c22325ef8535?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">vj_</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-884"> <time datetime="2006-05-25T15:52:56+00:00"> 25 May, 2006 at 15:52 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Good job Emil, my translation of your tutorial into polish is in progress :-)</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-946" class="comment even thread-even depth-1"> <article id="div-comment-946" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/1e2f8d0bf05e4d8d580b5e6049b7f704?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/1e2f8d0bf05e4d8d580b5e6049b7f704?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">mrv</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-946"> <time datetime="2006-06-01T04:45:51+00:00"> 1 Jun, 2006 at 4:45 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>nice articles im really a css enthusiast…this is a good article</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-1018" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-1018" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/e56558968e23adda8f5a4c96acab97b5?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/e56558968e23adda8f5a4c96acab97b5?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">keules</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-1018"> <time datetime="2006-06-04T12:47:21+00:00"> 4 Jun, 2006 at 12:47 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>ech tu prasipyseli :)</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-1047" class="comment even thread-even depth-1"> <article id="div-comment-1047" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/d86147de5b87cf94fda952a54fb0489f?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/d86147de5b87cf94fda952a54fb0489f?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Rich</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-1047"> <time datetime="2006-06-05T05:33:05+00:00"> 5 Jun, 2006 at 5:33 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-1050" class="pingback odd alt thread-odd thread-alt depth-1"> <div class="comment-body"> Pingback: <a href='http://www.cameraontheroad.com/?p=187' rel='external nofollow' class='url'>Taking Your Camera on the Road » Understanding CSS Selectors and Attributes</a> </div> </li><!-- #comment-## --> <li id="comment-1363" class="comment even thread-even depth-1"> <article id="div-comment-1363" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/88b0711c31968b73fef9fb13fbe9547b?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/88b0711c31968b73fef9fb13fbe9547b?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://www.geocities.com/anilkrsingh1' rel='external nofollow' class='url'>Anil</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-1363"> <time datetime="2006-06-12T15:53:02+00:00"> 12 Jun, 2006 at 15:53 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>I need more info about CSS if there any PDF Book on Net.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-1389" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-1389" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/2e41d52b2986c0c63a2f464e34b7b3f3?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/2e41d52b2986c0c63a2f464e34b7b3f3?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">sbt</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-1389"> <time datetime="2006-06-13T11:17:46+00:00"> 13 Jun, 2006 at 11:17 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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 <em>cannot</em> have the idea I’d conceived.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-1392" class="comment even thread-even depth-1"> <article id="div-comment-1392" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/71583e5e6bd60a944d44c29eb1bd2039?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/71583e5e6bd60a944d44c29eb1bd2039?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Risto</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-1392"> <time datetime="2006-06-13T12:39:33+00:00"> 13 Jun, 2006 at 12:39 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Great pages You have compiled. Will definetly come back to learn more .<br /> Thanks!</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-1408" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-1408" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/d0a378dbba91baa600fba2520aa15ab1?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/d0a378dbba91baa600fba2520aa15ab1?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://www.equipmentfinancingtoday.com' rel='external nofollow' class='url'>Quin</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-1408"> <time datetime="2006-06-14T08:06:58+00:00"> 14 Jun, 2006 at 8:06 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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…</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-1410" class="pingback even thread-even depth-1"> <div class="comment-body"> Pingback: <a href='http://kidodesign.com/code/code/beginners-guide-to-css-and-standards/' rel='external nofollow' class='url'>kidodesign.com » Blog Archive » Beginners guide to CSS and standards</a> </div> </li><!-- #comment-## --> <li id="comment-1414" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-1414" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/e68a3a6b75eff1e1740d4988e4ea3195?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/e68a3a6b75eff1e1740d4988e4ea3195?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Jerry Scripps</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-1414"> <time datetime="2006-06-14T16:52:55+00:00"> 14 Jun, 2006 at 16:52 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Wonderful article. Thanks so much. I’ll have my students reference this next winter</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-1432" class="comment even thread-even depth-1"> <article id="div-comment-1432" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7780f3ebca03b54bdea802345b15f189?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7780f3ebca03b54bdea802345b15f189?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://www.monikawulfers.com' rel='external nofollow' class='url'>monika wulfers</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-1432"> <time datetime="2006-06-15T01:03:49+00:00"> 15 Jun, 2006 at 1:03 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-1443" class="comment byuser comment-author-administrator bypostauthor odd alt thread-odd thread-alt depth-1"> <article id="div-comment-1443" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://friendlybit.com' rel='external nofollow' class='url'>Emil Stenström</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-1443"> <time datetime="2006-06-15T09:59:04+00:00"> 15 Jun, 2006 at 9:59 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>To all of you, thanks for the great comments, it’s these that gives me the motivation to keep going on :)</p> <p>@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.</p> <p>@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.</p> <p>@Quin: Bahhh, let them ask what they want :) If I don’t like it I’ll give my motivation.</p> <p>@Jerry Scripps: Good to hear. Looking at my referers it seems it’s used as a getting started tutorial all over the world.</p> <p>@monika wulfers: First, make sure you’re in <a href="/css/cross-browser-strategies-for-css/#mode" rel="nofollow">standards mode</a>. Then just give your page a width and set it’s left and right margins to auto. <code lang="css">#content { width: 760px; margin: 0 auto; }</code></p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-1489" class="comment even thread-even depth-1"> <article id="div-comment-1489" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/a43bb910dc560501c3584caac02079a5?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/a43bb910dc560501c3584caac02079a5?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Sarmad al Saadi</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-1489"> <time datetime="2006-06-16T21:05:08+00:00"> 16 Jun, 2006 at 21:05 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Hi</p> <p>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</p> <p>Sarmad</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-1492" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-1492" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/55e64cc0822b3b6462b10d161ec35616?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/55e64cc0822b3b6462b10d161ec35616?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Raj</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-1492"> <time datetime="2006-06-17T01:41:41+00:00"> 17 Jun, 2006 at 1:41 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>A great tutorial. Helps me a lot.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-1806" class="comment even thread-even depth-1"> <article id="div-comment-1806" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/4adcca49b3b1e5a08ac202f5d5a9e688?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/4adcca49b3b1e5a08ac202f5d5a9e688?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Ranjith kumar</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-1806"> <time datetime="2006-06-20T18:57:09+00:00"> 20 Jun, 2006 at 18:57 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>This is a phenomenal. I have cleared almost all the doubts i had in my mind about css. Coooooool !!!</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-1807" class="comment byuser comment-author-administrator bypostauthor odd alt thread-odd thread-alt depth-1"> <article id="div-comment-1807" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://friendlybit.com' rel='external nofollow' class='url'>Emil Stenström</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-1807"> <time datetime="2006-06-20T19:03:17+00:00"> 20 Jun, 2006 at 19:03 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>@Ranjith kumar: Cool you like it, show it to your friends :)</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-2182" class="comment even thread-even depth-1"> <article id="div-comment-2182" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/bbe28c31f5191692a7a80fa584101a81?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/bbe28c31f5191692a7a80fa584101a81?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Simone</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-2182"> <time datetime="2006-06-23T20:56:16+00:00"> 23 Jun, 2006 at 20:56 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Would be nicer is you have a “printer friendly” link/button so that we can print it out and read it….</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-2319" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-2319" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/fc1cff1b0e82ba779bbcdab53995937a?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/fc1cff1b0e82ba779bbcdab53995937a?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Lewis Meyer</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-2319"> <time datetime="2006-06-24T23:27:36+00:00"> 24 Jun, 2006 at 23:27 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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. :-)</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-2324" class="comment byuser comment-author-administrator bypostauthor even thread-even depth-1"> <article id="div-comment-2324" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://friendlybit.com' rel='external nofollow' class='url'>Emil Stenström</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-2324"> <time datetime="2006-06-25T00:56:37+00:00"> 25 Jun, 2006 at 0:56 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>@Simone, Lewis Meyer: It’s on my ToDo, just not on top :)</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-2845" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-2845" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/c51f5e57f3aef4336313f652356f86d9?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/c51f5e57f3aef4336313f652356f86d9?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">ashok.kakani</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-2845"> <time datetime="2006-07-05T14:57:52+00:00"> 5 Jul, 2006 at 14:57 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Hello, this book is very helpful us,this is very simply and also very useful.<br /> Regards<br /> kakani.ashokchoudary</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-2846" class="comment even thread-even depth-1"> <article id="div-comment-2846" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/d372a050859d3b70d1f3c10f71d5d5f7?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/d372a050859d3b70d1f3c10f71d5d5f7?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://teramips.com/surdin' rel='external nofollow' class='url'>Ilya Surdin</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-2846"> <time datetime="2006-07-05T15:28:29+00:00"> 5 Jul, 2006 at 15:28 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Thank you very much!<br /> Exactly what I’ve been looking for. Tables got on my nerves a lot. :)</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-2847" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-2847" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/d372a050859d3b70d1f3c10f71d5d5f7?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/d372a050859d3b70d1f3c10f71d5d5f7?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://teramips.com/surdin' rel='external nofollow' class='url'>Ilya Surdin</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-2847"> <time datetime="2006-07-05T15:32:29+00:00"> 5 Jul, 2006 at 15:32 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Ah, yes, 2 small things I forgot to add. :)<br /> 1) Got here from w3.org. WTG :)<br /> 2) For anyone having trouble doing things with css described here, just look at the css-es of this page ;)</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-2849" class="comment byuser comment-author-administrator bypostauthor even thread-even depth-1"> <article id="div-comment-2849" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://friendlybit.com' rel='external nofollow' class='url'>Emil Stenström</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-2849"> <time datetime="2006-07-05T18:08:07+00:00"> 5 Jul, 2006 at 18:08 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>@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…</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-3365" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-3365" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/e8610b66a9625920fb15ab5768d872c1?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/e8610b66a9625920fb15ab5768d872c1?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">latha</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-3365"> <time datetime="2006-07-26T12:43:32+00:00"> 26 Jul, 2006 at 12:43 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>A good and simple site for learning css</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-3404" class="comment even thread-even depth-1"> <article id="div-comment-3404" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/385f377565ac1dc546e1fec53c8d57d8?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/385f377565ac1dc546e1fec53c8d57d8?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">aji</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-3404"> <time datetime="2006-07-28T13:03:38+00:00"> 28 Jul, 2006 at 13:03 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>very usefull tutorial for beginners..</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-3424" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-3424" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/c5aa89d39b1561a46bbf5debdcc3e65d?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/c5aa89d39b1561a46bbf5debdcc3e65d?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Fahad</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-3424"> <time datetime="2006-07-29T21:23:24+00:00"> 29 Jul, 2006 at 21:23 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>It’s a very good site.<br /> Thanks so much..</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-3668" class="comment even thread-even depth-1"> <article id="div-comment-3668" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/572475c8c6fbb09512890ca6fe62a90b?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/572475c8c6fbb09512890ca6fe62a90b?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Nebojsa</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-3668"> <time datetime="2006-08-09T03:08:38+00:00"> 9 Aug, 2006 at 3:08 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Thanx man… Hugs from Serbia!</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-3773" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-3773" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/378abdef8cc5218948ae928ac27ec7f0?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/378abdef8cc5218948ae928ac27ec7f0?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://mchl.republika.pl' rel='external nofollow' class='url'>Mchl</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-3773"> <time datetime="2006-08-12T14:20:47+00:00"> 12 Aug, 2006 at 14:20 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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…<br /> Many thanks for this tutorial. Made me look at HTML+CSS combo in a diffirent way.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-4021" class="comment even thread-even depth-1"> <article id="div-comment-4021" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/61cd81a63a64703ed7b700c04593470f?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/61cd81a63a64703ed7b700c04593470f?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Peter Nathaniel</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-4021"> <time datetime="2006-08-27T17:27:50+00:00"> 27 Aug, 2006 at 17:27 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>im really sorry but i dont really understand what you mean… how do you put the images? i dont get it… sorry…</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-4022" class="comment byuser comment-author-administrator bypostauthor odd alt thread-odd thread-alt depth-1"> <article id="div-comment-4022" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://friendlybit.com' rel='external nofollow' class='url'>Emil Stenström</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-4022"> <time datetime="2006-08-27T17:33:06+00:00"> 27 Aug, 2006 at 17:33 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>@Peter: what images? I don’t use any images in that example.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-4215" class="comment even thread-even depth-1"> <article id="div-comment-4215" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/f3142e5cbb56516d9d3bfc439c06fc42?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/f3142e5cbb56516d9d3bfc439c06fc42?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">MJ</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-4215"> <time datetime="2006-09-01T18:38:06+00:00"> 1 Sep, 2006 at 18:38 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Hi!<br /> 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! :)</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-4230" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-4230" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/2233525b84c2e4d77b81801884d72e54?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/2233525b84c2e4d77b81801884d72e54?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">chai</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-4230"> <time datetime="2006-09-02T00:05:29+00:00"> 2 Sep, 2006 at 0:05 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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<br /> :)</p> <p>thakns a lot, chai</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-4372" class="comment even thread-even depth-1"> <article id="div-comment-4372" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/3776e898d8d086785d8a2700224eb5ee?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/3776e898d8d086785d8a2700224eb5ee?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Decio</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-4372"> <time datetime="2006-09-07T12:11:46+00:00"> 7 Sep, 2006 at 12:11 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Dude, this is pretty good tutorial, its a really good starter tutorial. I thinks it explains well the chracterisrics of CSS.<br /> Cheers</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-4648" class="pingback odd alt thread-odd thread-alt depth-1"> <div class="comment-body"> Pingback: <a href='http://kgroot.wordpress.com/2006/07/17/heldere-en-up-to-date-xhtmlcss-help/' rel='external nofollow' class='url'>Heldere XHTML/CSS help « CSS Superclub</a> </div> </li><!-- #comment-## --> <li id="comment-5481" class="comment even thread-even depth-1"> <article id="div-comment-5481" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/06d8e77ed6ff0699ed6d05f11a2977e2?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/06d8e77ed6ff0699ed6d05f11a2977e2?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">brianb</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-5481"> <time datetime="2006-10-05T04:14:11+00:00"> 5 Oct, 2006 at 4:14 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Thanks, for the tutorial…<br /> You’ve provided me with a clear understanding of CSS..I enjoyed the idea of “separation of content and design” two part of website.<br /> My life has new meaning : )<br /> Have a great Day</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-5893" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-5893" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/d9fec50ae05f2109030d3ef665a40afd?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/d9fec50ae05f2109030d3ef665a40afd?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Brad</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-5893"> <time datetime="2006-10-22T02:47:41+00:00"> 22 Oct, 2006 at 2:47 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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? </p> <p>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.</p> <p>Thanks.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-5898" class="comment byuser comment-author-administrator bypostauthor even thread-even depth-1"> <article id="div-comment-5898" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://friendlybit.com' rel='external nofollow' class='url'>Emil Stenström</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-5898"> <time datetime="2006-10-22T04:02:34+00:00"> 22 Oct, 2006 at 4:02 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>@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.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-6084" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-6084" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/8711769ff534e62428b6516511aeab54?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/8711769ff534e62428b6516511aeab54?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://www.gardenclub.net' rel='external nofollow' class='url'>Louise</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-6084"> <time datetime="2006-10-26T13:30:58+00:00"> 26 Oct, 2006 at 13:30 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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)!</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-6086" class="comment even thread-even depth-1"> <article id="div-comment-6086" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/8711769ff534e62428b6516511aeab54?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/8711769ff534e62428b6516511aeab54?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://www.gardenclub.net' rel='external nofollow' class='url'>Louise</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-6086"> <time datetime="2006-10-26T14:05:14+00:00"> 26 Oct, 2006 at 14:05 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-6122" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-6122" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/0264c5fe13b6fc94cc23cab300c1047b?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/0264c5fe13b6fc94cc23cab300c1047b?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Tony</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-6122"> <time datetime="2006-10-27T17:59:54+00:00"> 27 Oct, 2006 at 17:59 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Good stuff. You have a fan here.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-6228" class="comment even thread-even depth-1"> <article id="div-comment-6228" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/bf193a37657e2df4e19b78c22b69c92a?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/bf193a37657e2df4e19b78c22b69c92a?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://pikushome.blogspot.com' rel='external nofollow' class='url'>Dhiraj Patra</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-6228"> <time datetime="2006-10-30T09:09:16+00:00"> 30 Oct, 2006 at 9:09 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-6293" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-6293" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/0a16266ed116bfea1ae5beb7653902f2?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/0a16266ed116bfea1ae5beb7653902f2?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Thanh</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-6293"> <time datetime="2006-10-31T16:26:20+00:00"> 31 Oct, 2006 at 16:26 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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!!! ^_^</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-6471" class="comment even thread-even depth-1"> <article id="div-comment-6471" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/9a163f90986f83bc2a04bb79358fddf4?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/9a163f90986f83bc2a04bb79358fddf4?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://www.profesjonalna-reklama.pl' rel='external nofollow' class='url'>Pozycjonowanie</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-6471"> <time datetime="2006-11-04T03:46:37+00:00"> 4 Nov, 2006 at 3:46 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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.<br /> Keep up the good work. Greetings</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-6603" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-6603" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/a6992526c7b968ad8a3f7d6539f0e28a?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/a6992526c7b968ad8a3f7d6539f0e28a?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">hano</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-6603"> <time datetime="2006-11-06T04:35:51+00:00"> 6 Nov, 2006 at 4:35 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>got a good idea of CSS after going through the tutorial.<br /> thanks for keeping it simple</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-6904" class="pingback even thread-even depth-1"> <div class="comment-body"> Pingback: <a href='http://f6design.com/journal/2006/11/10/web-design-tips-for-print-designers/' rel='external nofollow' class='url'>Pixel Acres » Blog Archive » Web design tips for print designers</a> </div> </li><!-- #comment-## --> <li id="comment-7963" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-7963" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/4d8a5b6e6eac3e1c1b6782c794696818?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/4d8a5b6e6eac3e1c1b6782c794696818?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Mario Castillo</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-7963"> <time datetime="2006-11-28T09:16:09+00:00"> 28 Nov, 2006 at 9:16 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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.</p> <p>Sorry for the mistake, I am not native english speaker, and my HTML is very basic.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-7965" class="comment byuser comment-author-administrator bypostauthor even thread-even depth-1"> <article id="div-comment-7965" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://friendlybit.com' rel='external nofollow' class='url'>Emil Stenström</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-7965"> <time datetime="2006-11-28T09:47:27+00:00"> 28 Nov, 2006 at 9:47 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>@Mario Castillo: Hi Mario! I removed the previous comment, no problem.</p> <p>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.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-8230" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-8230" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/4d8a5b6e6eac3e1c1b6782c794696818?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/4d8a5b6e6eac3e1c1b6782c794696818?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Mario Castillo</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-8230"> <time datetime="2006-12-02T01:10:26+00:00"> 2 Dec, 2006 at 1:10 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Thanks Emil, what about using @import ‘stylesheet.css’<br /> inside the style tag instead of using the most common “link rel…” to tell HTML code where to look for the CSS?<br /> Is this a good practice when thinking about usability in different browsers?</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-8307" class="comment byuser comment-author-administrator bypostauthor even thread-even depth-1"> <article id="div-comment-8307" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://friendlybit.com' rel='external nofollow' class='url'>Emil Stenström</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-8307"> <time datetime="2006-12-03T02:01:35+00:00"> 3 Dec, 2006 at 2:01 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>@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.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-8828" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-8828" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/f186b5470c31de6906199d714d5587c5?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/f186b5470c31de6906199d714d5587c5?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://www.bannerdirekt.de/' rel='external nofollow' class='url'>Andy</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-8828"> <time datetime="2006-12-09T13:15:37+00:00"> 9 Dec, 2006 at 13:15 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>This is pretty good tutorial, its a really good starter tutorial. I thinks it explains well the chracterisrics of CSS.<br /> Cheers</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-8874" class="comment even thread-even depth-1"> <article id="div-comment-8874" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/94e15182051a0da7ef0f6b495cdb6094?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/94e15182051a0da7ef0f6b495cdb6094?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Hugh Scheffy</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-8874"> <time datetime="2006-12-09T22:09:52+00:00"> 9 Dec, 2006 at 22:09 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Very concise, clear and useful. Thanks.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-9126" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-9126" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/8270f8eeb77f122ece56e4d1e2509478?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/8270f8eeb77f122ece56e4d1e2509478?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Prosadia</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-9126"> <time datetime="2006-12-13T18:28:23+00:00"> 13 Dec, 2006 at 18:28 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>I love your article. I’ve just start learning CSS a few minutes ago, and i found your article is very easy to understand.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-12370" class="comment even thread-even depth-1"> <article id="div-comment-12370" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/e49404bc9ba2e4348ef51973afa43cdb?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/e49404bc9ba2e4348ef51973afa43cdb?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">suresh joshi</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-12370"> <time datetime="2007-01-05T04:02:09+00:00"> 5 Jan, 2007 at 4:02 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Very Well Written.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-12652" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-12652" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/11723dcad2957dcd0e6610ef82676066?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/11723dcad2957dcd0e6610ef82676066?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://www.dress4moments.de' rel='external nofollow' class='url'>Hochzeitsmode</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-12652"> <time datetime="2007-01-07T17:44:15+00:00"> 7 Jan, 2007 at 17:44 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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 ;-))</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-17102" class="comment even thread-even depth-1"> <article id="div-comment-17102" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/6e6e764e6056c4cd49dbf15b6167e02d?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/6e6e764e6056c4cd49dbf15b6167e02d?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://www.subasta.pl' rel='external nofollow' class='url'>Aukcje</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-17102"> <time datetime="2007-01-28T19:56:10+00:00"> 28 Jan, 2007 at 19:56 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Thanks for this very good article … Can i translate this and insert on my site in Poland? … Thanks</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-17202" class="comment byuser comment-author-administrator bypostauthor odd alt thread-odd thread-alt depth-1"> <article id="div-comment-17202" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://friendlybit.com' rel='external nofollow' class='url'>Emil Stenström</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-17202"> <time datetime="2007-01-29T07:18:21+00:00"> 29 Jan, 2007 at 7:18 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>@Aukcje: As long as you link back to this article in the beginning of your translation it’s OK. Glad to see you like it!</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-17904" class="comment even thread-even depth-1"> <article id="div-comment-17904" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/4304e5b834ddf1272e53f665b7ae4d6b?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/4304e5b834ddf1272e53f665b7ae4d6b?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://www.mebs.pl' rel='external nofollow' class='url'>Meble</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-17904"> <time datetime="2007-01-31T13:33:14+00:00"> 31 Jan, 2007 at 13:33 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Emil: Can i too add this on mysite? Your side has very helpful articles.<br /> Thanks and best regards</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-18281" class="comment byuser comment-author-administrator bypostauthor odd alt thread-odd thread-alt depth-1"> <article id="div-comment-18281" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://friendlybit.com' rel='external nofollow' class='url'>Emil Stenström</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-18281"> <time datetime="2007-02-02T00:04:49+00:00"> 2 Feb, 2007 at 0:04 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>@Meble: You can link to it, but you can not copy it, no.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-19489" class="comment even thread-even depth-1"> <article id="div-comment-19489" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/ab332100dc5e7d3fed83f940810c08f0?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/ab332100dc5e7d3fed83f940810c08f0?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">kadir guler</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-19489"> <time datetime="2007-02-06T11:54:04+00:00"> 6 Feb, 2007 at 11:54 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>hi<br /> your site is very good</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-19726" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-19726" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/312030298b074c92c1855fd4d798b5b3?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/312030298b074c92c1855fd4d798b5b3?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Angelita Dumapias</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-19726"> <time datetime="2007-02-07T10:34:22+00:00"> 7 Feb, 2007 at 10:34 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>What a tutorial! Thanks! a lot… I hope that I could customize the appearance of the web page I’m working on.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-20202" class="comment even thread-even depth-1"> <article id="div-comment-20202" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/a848153f7d98d36aef48a81f98e662da?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/a848153f7d98d36aef48a81f98e662da?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Christine Wyndham-Thomas</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-20202"> <time datetime="2007-02-09T10:38:54+00:00"> 9 Feb, 2007 at 10:38 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Thank you for this site. </p> <p>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.</p> <p>A little hard getting my head around it, but hopefully your site will go a along way to helping me with this.</p> <p>Once again, thanks for a very informative site.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-21669" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-21669" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/95fcbb4e2ceeb95a452ce39abaa8da7d?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/95fcbb4e2ceeb95a452ce39abaa8da7d?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://kolektory.blogspot.com' rel='external nofollow' class='url'>Kolektory</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-21669"> <time datetime="2007-02-18T00:23:33+00:00"> 18 Feb, 2007 at 0:23 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Very Well Written.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-21802" class="comment even thread-even depth-1"> <article id="div-comment-21802" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/793616bd4c0040d435ca25444b2000aa?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/793616bd4c0040d435ca25444b2000aa?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://www.einemillioneurohomepage.de' rel='external nofollow' class='url'>Romina Miersch</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-21802"> <time datetime="2007-02-21T01:01:00+00:00"> 21 Feb, 2007 at 1:01 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Great and excellent article t’s realy helpful. Thanks again.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-21824" class="pingback odd alt thread-odd thread-alt depth-1"> <div class="comment-body"> Pingback: <a href='http://www.mapelli.info/seo/seo-for-dummies-5-basic-technical-skills-for-seoing' rel='external nofollow' class='url'>SEO For Dummies 5 - Basic Technical Skills for SEOing | www.mapelli.info</a> </div> </li><!-- #comment-## --> <li id="comment-21860" class="comment even thread-even depth-1"> <article id="div-comment-21860" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/eb9d0b0a41e75e62e8459e4eef0d3365?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/eb9d0b0a41e75e62e8459e4eef0d3365?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://www.reinigungsmittelcenter.com' rel='external nofollow' class='url'>Frank</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-21860"> <time datetime="2007-02-23T07:17:42+00:00"> 23 Feb, 2007 at 7:17 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-22077" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-22077" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/fdc0a07dc43831368aeb8500995f8848?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/fdc0a07dc43831368aeb8500995f8848?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://web.wt.net/~jameswh' rel='external nofollow' class='url'>James W. Hudgens</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-22077"> <time datetime="2007-03-04T23:55:25+00:00"> 4 Mar, 2007 at 23:55 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-22096" class="comment byuser comment-author-administrator bypostauthor even thread-even depth-1"> <article id="div-comment-22096" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://friendlybit.com' rel='external nofollow' class='url'>Emil Stenström</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-22096"> <time datetime="2007-03-05T18:59:47+00:00"> 5 Mar, 2007 at 18:59 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>@James: Thanks for commenting, it’s always nice to hear that my little writings help real people!</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-22291" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-22291" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/6023bc28235402dca25c88827b318008?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/6023bc28235402dca25c88827b318008?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Kroq</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-22291"> <time datetime="2007-03-11T08:17:39+00:00"> 11 Mar, 2007 at 8:17 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Hey thanks for the straightforward explanation … CSS is still a mystery to me but I’m figuring it out :)</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-22520" class="comment even thread-even depth-1"> <article id="div-comment-22520" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/dc0c334d4a1d7045dfe6939e9af11254?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/dc0c334d4a1d7045dfe6939e9af11254?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Stron</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-22520"> <time datetime="2007-03-20T11:41:17+00:00"> 20 Mar, 2007 at 11:41 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Fantastic article covering some points I really needed some good usability info for. Thanks</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-23125" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-23125" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/eda879816d54a9527d627ac72220fd13?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/eda879816d54a9527d627ac72220fd13?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">heinz</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-23125"> <time datetime="2007-04-06T12:00:26+00:00"> 6 Apr, 2007 at 12:00 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>People use CSS2 all the time, and they even already use parts of WHATWG HTML5 (like the CANVAS element, or contentEditable).<br /> 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.<br /> 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?</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-23389" class="comment even thread-even depth-1"> <article id="div-comment-23389" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/e66ef4c7f52762a151aa3a5e65673f88?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/e66ef4c7f52762a151aa3a5e65673f88?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://www.sprzedaz.net' rel='external nofollow' class='url'>Telezakupy</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-23389"> <time datetime="2007-04-15T14:53:29+00:00"> 15 Apr, 2007 at 14:53 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>It’s all good… but there are still things that you can’t do with CSS but can with tables…</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-23395" class="comment byuser comment-author-administrator bypostauthor odd alt thread-odd thread-alt depth-1"> <article id="div-comment-23395" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://friendlybit.com' rel='external nofollow' class='url'>Emil Stenström</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-23395"> <time datetime="2007-04-15T18:19:20+00:00"> 15 Apr, 2007 at 18:19 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>@Telezakupy: And the other way around, CSS is MUCH more flexible than tables.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-23478" class="comment even thread-even depth-1"> <article id="div-comment-23478" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/29bf989cbca244d3ef6c5862ed87e0b7?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/29bf989cbca244d3ef6c5862ed87e0b7?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">linda</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-23478"> <time datetime="2007-04-17T15:22:41+00:00"> 17 Apr, 2007 at 15:22 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>this was a great help. the only thing I would ask is to add some trouble shooting tips based on common problems.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-23549" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-23549" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/1d8ed362cb6a0e5ddc68414fc5022b00?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/1d8ed362cb6a0e5ddc68414fc5022b00?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://www.springfieldcolorado.com' rel='external nofollow' class='url'>Gloria Jean</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-23549"> <time datetime="2007-04-20T03:43:01+00:00"> 20 Apr, 2007 at 3:43 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>This is a really great article and a great site. I am a big fan of web standards. I linked to this article from <a href="http://www.bacaracka.com/" rel="nofollow">http://www.bacaracka.com/</a> (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!</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-23597" class="comment byuser comment-author-administrator bypostauthor even thread-even depth-1"> <article id="div-comment-23597" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://friendlybit.com' rel='external nofollow' class='url'>Emil Stenström</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-23597"> <time datetime="2007-04-21T15:56:34+00:00"> 21 Apr, 2007 at 15:56 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>@Gloria Jean: Thanks for the link!</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-23986" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-23986" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/0c92fe969f853f47588c0683fafdd3e4?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/0c92fe969f853f47588c0683fafdd3e4?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Dominick</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-23986"> <time datetime="2007-05-06T22:42:44+00:00"> 6 May, 2007 at 22:42 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Hey, great tutorial! This was very helpful to me.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-24620" class="comment even thread-even depth-1"> <article id="div-comment-24620" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/e9a2d697d922524be9865ba258f3c3a5?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/e9a2d697d922524be9865ba258f3c3a5?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Srebro</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-24620"> <time datetime="2007-05-25T15:55:49+00:00"> 25 May, 2007 at 15:55 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-25066" class="pingback odd alt thread-odd thread-alt depth-1"> <div class="comment-body"> Pingback: Web Site Design, Internet Marketing, Ecommerce - ryanj - From the Web Developer’s Wiki - CSS </div> </li><!-- #comment-## --> <li id="comment-25067" class="comment even thread-even depth-1"> <article id="div-comment-25067" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/43e68f8f5312acaf1eeb187d93ae6fb3?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/43e68f8f5312acaf1eeb187d93ae6fb3?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">JAY TANNA</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-25067"> <time datetime="2007-06-08T22:33:27+00:00"> 8 Jun, 2007 at 22:33 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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.</p> <p>Regards,</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-25152" class="comment byuser comment-author-administrator bypostauthor odd alt thread-odd thread-alt depth-1"> <article id="div-comment-25152" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://friendlybit.com' rel='external nofollow' class='url'>Emil Stenström</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-25152"> <time datetime="2007-06-11T21:04:21+00:00"> 11 Jun, 2007 at 21:04 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>@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.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-25710" class="comment even thread-even depth-1"> <article id="div-comment-25710" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/4b7a0a622bb65634dabfdec1fc5570aa?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/4b7a0a622bb65634dabfdec1fc5570aa?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Vicky Affluence</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-25710"> <time datetime="2007-06-27T07:09:45+00:00"> 27 Jun, 2007 at 7:09 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Hello Emil,<br /> 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.<br /> 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.<br /> Thanks and keep up the good work.<br /> Vicky</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-25737" class="comment byuser comment-author-administrator bypostauthor odd alt thread-odd thread-alt depth-1"> <article id="div-comment-25737" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://friendlybit.com' rel='external nofollow' class='url'>Emil Stenström</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-25737"> <time datetime="2007-06-27T22:18:31+00:00"> 27 Jun, 2007 at 22:18 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>@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!</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-26078" class="pingback even thread-even depth-1"> <div class="comment-body"> Pingback: Extensive CSS List: 134 Top CSS Resources << Vandelay Website Design </div> </li><!-- #comment-## --> <li id="comment-26113" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-26113" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/484ab1afb64eb7ee9728bc33b58b6ef4?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/484ab1afb64eb7ee9728bc33b58b6ef4?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Serg</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-26113"> <time datetime="2007-07-15T13:27:54+00:00"> 15 Jul, 2007 at 13:27 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Good to hear! Don’t give up and go back to tables, it’s not worth it I promise.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-26216" class="comment even thread-even depth-1"> <article id="div-comment-26216" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7a8adf4875b2e2b12aab9e16db70c150?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7a8adf4875b2e2b12aab9e16db70c150?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://www.duygum.com' rel='external nofollow' class='url'>guzel sozler</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-26216"> <time datetime="2007-07-20T19:49:02+00:00"> 20 Jul, 2007 at 19:49 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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.</p> <p>Regards,</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-26220" class="comment byuser comment-author-administrator bypostauthor odd alt thread-odd thread-alt depth-1"> <article id="div-comment-26220" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://friendlybit.com' rel='external nofollow' class='url'>Emil Stenström</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-26220"> <time datetime="2007-07-21T01:17:19+00:00"> 21 Jul, 2007 at 1:17 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>@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.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-26809" class="pingback even thread-even depth-1"> <div class="comment-body"> Pingback: <a href='http://blog.d8in.com/posts/92.html' rel='external nofollow' class='url'>css ?????????? - ?8? Design Everying</a> </div> </li><!-- #comment-## --> <li id="comment-26943" class="pingback odd alt thread-odd thread-alt depth-1"> <div class="comment-body"> Pingback: GC 362 Class Blog » Blog Archive » CSS for Beginners </div> </li><!-- #comment-## --> <li id="comment-27107" class="comment even thread-even depth-1"> <article id="div-comment-27107" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/e9d132c7a2b17c3b1682f863e050116f?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/e9d132c7a2b17c3b1682f863e050116f?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Beau Dure</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-27107"> <time datetime="2007-09-02T21:58:00+00:00"> 2 Sep, 2007 at 21:58 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>This is terrific. I haven’t seen a better explanation of the fundamentals.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-27334" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-27334" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/73ccaded9397240caa68bddb020077e3?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/73ccaded9397240caa68bddb020077e3?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Samaar</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-27334"> <time datetime="2007-09-12T15:09:17+00:00"> 12 Sep, 2007 at 15:09 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-27519" class="comment even thread-even depth-1"> <article id="div-comment-27519" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/ef18beca25e5e00690d4e1e57b2fdfd4?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/ef18beca25e5e00690d4e1e57b2fdfd4?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Kajuju</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-27519"> <time datetime="2007-09-22T04:48:53+00:00"> 22 Sep, 2007 at 4:48 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-27520" class="comment byuser comment-author-administrator bypostauthor odd alt thread-odd thread-alt depth-1"> <article id="div-comment-27520" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://friendlybit.com' rel='external nofollow' class='url'>Emil Stenström</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-27520"> <time datetime="2007-09-22T09:49:30+00:00"> 22 Sep, 2007 at 9:49 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>@Kajuju: <code>#header a { color: blue; }</code> and <code>#middle a { color: red; }</code> and so on. That will only match the links inside those ids. Hope you get it to work!</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-28255" class="comment even thread-even depth-1"> <article id="div-comment-28255" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/96c3a4b24a394b45d77b2a21c7d16d26?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/96c3a4b24a394b45d77b2a21c7d16d26?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Becca Ulyatt</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-28255"> <time datetime="2007-10-09T10:57:11+00:00"> 9 Oct, 2007 at 10:57 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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!</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-28839" class="pingback odd alt thread-odd thread-alt depth-1"> <div class="comment-body"> Pingback: Custom CSS on WordPress.com — WP Assist </div> </li><!-- #comment-## --> <li id="comment-30027" class="comment even thread-even depth-1"> <article id="div-comment-30027" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/68d666b53d1fa4537bc7f597d6d9ff0a?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/68d666b53d1fa4537bc7f597d6d9ff0a?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://www.alemsite.com' rel='external nofollow' class='url'>Cep Telefonu Tamiri</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-30027"> <time datetime="2007-12-30T11:50:38+00:00"> 30 Dec, 2007 at 11:50 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Thank you all</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-30035" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-30035" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/6741e5cf60548f1b685fc2648c92b2c9?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/6741e5cf60548f1b685fc2648c92b2c9?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://parishiltonz.blogspot.com' rel='external nofollow' class='url'>Paris Hilton</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-30035"> <time datetime="2007-12-30T19:06:02+00:00"> 30 Dec, 2007 at 19:06 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Best comment for writing for css thanks best regards</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-30037" class="comment even thread-even depth-1"> <article id="div-comment-30037" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/2acbf71975f506f27a45d5311ab37b06?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/2acbf71975f506f27a45d5311ab37b06?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://www.wirural.net' rel='external nofollow' class='url'>dos games</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-30037"> <time datetime="2007-12-30T21:32:26+00:00"> 30 Dec, 2007 at 21:32 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>thanks</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-30141" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-30141" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/4d9a9e11118aa3859b022d452c179b62?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/4d9a9e11118aa3859b022d452c179b62?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">rich</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-30141"> <time datetime="2008-01-17T18:20:18+00:00"> 17 Jan, 2008 at 18:20 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Awesome tutorial on css, Ive used this as a reference a bunch of times, keep the great articles coming.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-30181" class="comment even thread-even depth-1"> <article id="div-comment-30181" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/0239521e10d145ff8b2e0c5fa4716c0c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/0239521e10d145ff8b2e0c5fa4716c0c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://www.seguroscochesonline.com' rel='external nofollow' class='url'>Hans</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-30181"> <time datetime="2008-01-24T12:46:37+00:00"> 24 Jan, 2008 at 12:46 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>CSS is a must today for web design. Good explanation.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-30191" class="pingback odd alt thread-odd thread-alt depth-1"> <div class="comment-body"> Pingback: <a href='http://thegelf.wordpress.com/2008/01/04/adventures-in-web-design/' rel='external nofollow' class='url'>Adventures in Web Design « Blogs will be Blogs…</a> </div> </li><!-- #comment-## --> <li id="comment-30244" class="comment even thread-even depth-1"> <article id="div-comment-30244" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/5bb0ea7cb0ed5b2088c5091a049d5a12?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/5bb0ea7cb0ed5b2088c5091a049d5a12?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Ellinor</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-30244"> <time datetime="2008-02-02T16:17:45+00:00"> 2 Feb, 2008 at 16:17 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Hej! Ville bara säga att denna sida hjälp mig mkt i kursen Webbdesign, tack!</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-30263" class="pingback odd alt thread-odd thread-alt depth-1"> <div class="comment-body"> Pingback: <a href='http://mysticpixels.wordpress.com/2006/06/21/best-ever-css-tutorial-ive-come-across/' rel='external nofollow' class='url'>Best ever css tutorial ive come across ! « Mysticpixels</a> </div> </li><!-- #comment-## --> <li id="comment-30279" class="comment even thread-even depth-1"> <article id="div-comment-30279" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/1f4abd5ddd397345bbf50a4e500eeffe?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/1f4abd5ddd397345bbf50a4e500eeffe?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Frugal Wizard</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-30279"> <time datetime="2008-02-14T01:09:31+00:00"> 14 Feb, 2008 at 1:09 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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. </p> <p>Thanks</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-30333" class="pingback odd alt thread-odd thread-alt depth-1"> <div class="comment-body"> Pingback: <a href='http://www.bobs.fi/oiva/2008/02/24/suomenkieliset-html-ja-css-ohjeet/' rel='external nofollow' class='url'>Suomenkieliset HTML ja CSS -ohjeet — Oivallisia juttuja</a> </div> </li><!-- #comment-## --> <li id="comment-30426" class="comment even thread-even depth-1"> <article id="div-comment-30426" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/c4a9a9891bd16ee13d7c4db9a5dc8578?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/c4a9a9891bd16ee13d7c4db9a5dc8578?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Technique</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-30426"> <time datetime="2008-03-13T16:29:24+00:00"> 13 Mar, 2008 at 16:29 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Nice. I am currently planning a re-design for my site and this helps develop my understanding for when I talk to web designers.</p> <p>Cheers!</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-30527" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-30527" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/bb5b776f291ce2a6860b61b8395d18ae?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/bb5b776f291ce2a6860b61b8395d18ae?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">oltimemom</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-30527"> <time datetime="2008-04-06T00:29:10+00:00"> 6 Apr, 2008 at 0:29 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Thank you. You should write a book.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-30532" class="comment even thread-even depth-1"> <article id="div-comment-30532" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/2bdcc42c4bf4e2ba71ccadc17f172cb8?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/2bdcc42c4bf4e2ba71ccadc17f172cb8?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">mynet</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-30532"> <time datetime="2008-04-08T03:06:56+00:00"> 8 Apr, 2008 at 3:06 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-30540" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-30540" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/55e69b69e71b726a26a5b62ebc13f897?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/55e69b69e71b726a26a5b62ebc13f897?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Bhavya</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-30540"> <time datetime="2008-04-09T20:38:33+00:00"> 9 Apr, 2008 at 20:38 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Hi,<br /> 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.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-30559" class="comment even thread-even depth-1"> <article id="div-comment-30559" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/1ddf7c0197745660ed655905040fff10?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/1ddf7c0197745660ed655905040fff10?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">film indir</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-30559"> <time datetime="2008-04-27T21:51:56+00:00"> 27 Apr, 2008 at 21:51 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>thanks</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-30574" class="pingback odd alt thread-odd thread-alt depth-1"> <div class="comment-body"> Pingback: eyelearn » Blog Archive » 8/5/08 :: week 2 </div> </li><!-- #comment-## --> <li id="comment-30611" class="comment even thread-even depth-1"> <article id="div-comment-30611" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7f233dd266f3100a1974e54747c2a1c6?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7f233dd266f3100a1974e54747c2a1c6?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Dallas</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-30611"> <time datetime="2008-05-21T02:17:10+00:00"> 21 May, 2008 at 2:17 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>CSS is so hard for me to understand, thanks for the helpful article!</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-30864" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-30864" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/06216ad5645204d79a838a10df5dbf04?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/06216ad5645204d79a838a10df5dbf04?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://www.a-a-photography.com' rel='external nofollow' class='url'>andy wood</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-30864"> <time datetime="2008-08-02T06:14:17+00:00"> 2 Aug, 2008 at 6:14 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Very nice information on CSS. Wish I had found this earlier.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-30926" class="comment even thread-even depth-1"> <article id="div-comment-30926" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/cb17ff5be1a6e2e203facd5b174c7f84?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/cb17ff5be1a6e2e203facd5b174c7f84?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://www.rinoplastia.org.es/' rel='external nofollow' class='url'>Rinoplastia</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-30926"> <time datetime="2008-08-17T19:53:33+00:00"> 17 Aug, 2008 at 19:53 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Thanks so much for providing a tutorial of CSS<br /> I am a new webmaster and I´m interesting in PHP and CSS my web is:</p> <p><a href="http://www.rinoplastia.org.es" title="Cirugia de nariz" rel="nofollow"></a></p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-30927" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-30927" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/cb17ff5be1a6e2e203facd5b174c7f84?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/cb17ff5be1a6e2e203facd5b174c7f84?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://www.rinoplastia.org.es/' rel='external nofollow' class='url'>Rinoplastia</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-30927"> <time datetime="2008-08-17T19:56:36+00:00"> 17 Aug, 2008 at 19:56 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Thanks so much for providing a tutorial of CSS<br /> I am a new webmaster and I´m interesting in PHP and CSS my web is:</p> <p><a href="http://www.rinoplastia.org.es" rel="nofollow"></a></p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-31028" class="pingback even thread-even depth-1"> <div class="comment-body"> Pingback: Web Tasar?m Tasar?m Kaynaklar? | Osman ERDO?AN </div> </li><!-- #comment-## --> <li id="comment-31126" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-31126" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/8373f1b9894d50a4787c3686d01347cf?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/8373f1b9894d50a4787c3686d01347cf?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://www.guste.co.uk' rel='external nofollow' class='url'>Auguste</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-31126"> <time datetime="2008-10-28T14:23:29+00:00"> 28 Oct, 2008 at 14:23 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Big thank you! </p> <p>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!</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-31186" class="pingback even thread-even depth-1"> <div class="comment-body"> Pingback: <a href='http://www.italianwebdesign.it/una-serie-di-risorse-infinite-sui-css/' rel='external nofollow' class='url'>Una serie di risorse infinite sui css | Italian webdesign</a> </div> </li><!-- #comment-## --> <li id="comment-31199" class="pingback odd alt thread-odd thread-alt depth-1"> <div class="comment-body"> Pingback: Cascading Style Sheets | mattiasbalck.se </div> </li><!-- #comment-## --> <li id="comment-31294" class="comment even thread-even depth-1"> <article id="div-comment-31294" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/97844b654b4051f737599ad53f498efc?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/97844b654b4051f737599ad53f498efc?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://www.ilahilerim.net' rel='external nofollow' class='url'>ilahiler</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-31294"> <time datetime="2008-12-09T13:36:26+00:00"> 9 Dec, 2008 at 13:36 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p><i>I agree with Tobias as he said :<br /> “But there are still things that you can’t do with CSS but can with tables…”.<br /> </i></p> <p>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.</p> <p>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.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-31327" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-31327" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/4916ab8dd4b0249176e17f266b2a4187?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/4916ab8dd4b0249176e17f266b2a4187?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://www.gamecooling.com' rel='external nofollow' class='url'>Juste</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-31327"> <time datetime="2008-12-17T00:44:23+00:00"> 17 Dec, 2008 at 0:44 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Actually I think a site is made up of 3 parts: content, presentation, and behavior…</p> <p>Just curious, does all other browsers (except MSIE) have quirks mode rendering? Besides the fact that they’re all great tag soup parsers.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-31460" class="comment even thread-even depth-1"> <article id="div-comment-31460" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/bf1411932d4476567fd205242e68a3ae?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/bf1411932d4476567fd205242e68a3ae?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Rupert Mupertson</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-31460"> <time datetime="2009-02-13T23:26:22+00:00"> 13 Feb, 2009 at 23:26 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>You must have no friends! :)</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-31504" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-31504" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo avatar-default' height='32' width='32' /> <b class="fn">W</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-31504"> <time datetime="2009-02-21T00:58:10+00:00"> 21 Feb, 2009 at 0:58 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>I love this. I couldn’t figure out CSS, until I looked at this!</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-31690" class="pingback even thread-even depth-1"> <div class="comment-body"> Pingback: eyelearn » Blog Archive » 9/4/09 :: week 2 </div> </li><!-- #comment-## --> <li id="comment-31710" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-31710" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/f79489c0267a9ed6dca4a42fc1efa7fd?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/f79489c0267a9ed6dca4a42fc1efa7fd?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://www.jimwestergren.com' rel='external nofollow' class='url'>Jim Westergren</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-31710"> <time datetime="2009-04-19T21:17:52+00:00"> 19 Apr, 2009 at 21:17 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Hi Emil,</p> <p>Great guide for beginners of CSS. I am linking to it from the big SEO guide that is soon released. :)</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-31711" class="comment byuser comment-author-administrator bypostauthor even thread-even depth-1"> <article id="div-comment-31711" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://friendlybit.com' rel='external nofollow' class='url'>Emil Stenström</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-31711"> <time datetime="2009-04-19T21:58:42+00:00"> 19 Apr, 2009 at 21:58 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>@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 :)</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-31723" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-31723" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/f79489c0267a9ed6dca4a42fc1efa7fd?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/f79489c0267a9ed6dca4a42fc1efa7fd?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://www.jimwestergren.com' rel='external nofollow' class='url'>Jim Westergren</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-31723"> <time datetime="2009-04-27T16:18:02+00:00"> 27 Apr, 2009 at 16:18 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-31726" class="comment even thread-even depth-1"> <article id="div-comment-31726" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo avatar-default' height='32' width='32' /> <b class="fn"><a href='http://www.webhostdesignpost.com' rel='external nofollow' class='url'>Cody</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-31726"> <time datetime="2009-04-30T07:39:23+00:00"> 30 Apr, 2009 at 7:39 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-31730" class="pingback odd alt thread-odd thread-alt depth-1"> <div class="comment-body"> Pingback: SEO CSS | PosicionaPro </div> </li><!-- #comment-## --> <li id="comment-31790" class="comment even thread-even depth-1"> <article id="div-comment-31790" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/f7c0dcaa73f235bbeba77c11ca118d83?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/f7c0dcaa73f235bbeba77c11ca118d83?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Russ</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-31790"> <time datetime="2009-06-16T04:36:20+00:00"> 16 Jun, 2009 at 4:36 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-31799" class="comment byuser comment-author-administrator bypostauthor odd alt thread-odd thread-alt depth-1"> <article id="div-comment-31799" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://friendlybit.com' rel='external nofollow' class='url'>Emil Stenström</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-31799"> <time datetime="2009-06-22T19:04:32+00:00"> 22 Jun, 2009 at 19:04 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>@Russ: Nice to hear, thanks! :)</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-32896" class="pingback even thread-even depth-1"> <div class="comment-body"> Pingback: Css...? </div> </li><!-- #comment-## --> <li id="comment-32910" class="pingback odd alt thread-odd thread-alt depth-1"> <div class="comment-body"> Pingback: Recursos para aprender más sobre CSS </div> </li><!-- #comment-## --> <li id="comment-32914" class="pingback even thread-even depth-1"> <div class="comment-body"> Pingback: Free Resources to Help You Become a CSS Expert Designer, | guidesigner.net </div> </li><!-- #comment-## --> <li id="comment-32915" class="pingback odd alt thread-odd thread-alt depth-1"> <div class="comment-body"> Pingback: <a href='http://www.xdesignblog.com/250-resources-to-help-you-become-a-css-expert' rel='external nofollow' class='url'>250+ Resources to Help You Become a CSS Expert | X Design Blog</a> </div> </li><!-- #comment-## --> <li id="comment-32918" class="pingback even thread-even depth-1"> <div class="comment-body"> Pingback: <a href='http://huibit05.com/design/250-resources-to-help-you-become-a-css-expert/' rel='external nofollow' class='url'>250+ Resources to Help You Become a CSS Expert | huibit05.com</a> </div> </li><!-- #comment-## --> <li id="comment-32982" class="pingback odd alt thread-odd thread-alt depth-1"> <div class="comment-body"> Pingback: <a href='http://designeroff.wordpress.com/2009/09/09/20-sumber-yang-akan-membuat-anda-menjadi-css-master-part-i/' rel='external nofollow' class='url'>20+ Sumber yang akan membuat anda menjadi CSS Master « Webdesigner Resource</a> </div> </li><!-- #comment-## --> <li id="comment-33100" class="pingback even thread-even depth-1"> <div class="comment-body"> Pingback: CSS Tips and Tricks - ParlierDesign.com </div> </li><!-- #comment-## --> <li id="comment-33312" class="pingback odd alt thread-odd thread-alt depth-1"> <div class="comment-body"> Pingback: Recursos para aprender más sobre CSS « Code Impludt </div> </li><!-- #comment-## --> <li id="comment-33323" class="pingback even thread-even depth-1"> <div class="comment-body"> Pingback: 250+?????????CSS?? - ???????? </div> </li><!-- #comment-## --> <li id="comment-33335" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-33335" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo avatar-default' height='32' width='32' /> <b class="fn">Ash</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-33335"> <time datetime="2010-01-05T16:10:10+00:00"> 5 Jan, 2010 at 16:10 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Hej Emil…</p> <p>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! </p> <p>Tack så mycket</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-33337" class="comment byuser comment-author-administrator bypostauthor even thread-even depth-1"> <article id="div-comment-33337" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://friendlybit.com' rel='external nofollow' class='url'>Emil Stenström</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-33337"> <time datetime="2010-01-05T23:13:31+00:00"> 5 Jan, 2010 at 23:13 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>@Ash: Kul att du gillar den! :)</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-33394" class="pingback odd alt thread-odd thread-alt depth-1"> <div class="comment-body"> Pingback: Info Situs Triks Pakai CSS « Vulkanisir Ban Blog </div> </li><!-- #comment-## --> <li id="comment-33455" class="pingback even thread-even depth-1"> <div class="comment-body"> Pingback: Recursos para aprender más sobre CSS · BBBlog </div> </li><!-- #comment-## --> <li id="comment-33459" class="pingback odd alt thread-odd thread-alt depth-1"> <div class="comment-body"> Pingback: <a href='http://www.loudable.com/25-free-best-online-websites-for-learning-css.html' rel='external nofollow' class='url'>25 Free Best Online Websites for Learning CSS | Loudable</a> </div> </li><!-- #comment-## --> <li id="comment-33477" class="comment even thread-even depth-1"> <article id="div-comment-33477" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/a37c287d2d351e1c7331942d1985ce47?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/a37c287d2d351e1c7331942d1985ce47?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://NpXp.com' rel='external nofollow' class='url'>NpXp</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-33477"> <time datetime="2010-03-23T20:46:48+00:00"> 23 Mar, 2010 at 20:46 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-33481" class="pingback odd alt thread-odd thread-alt depth-1"> <div class="comment-body"> Pingback: Recursos para Css básico, intermedio y avanzado | DinamicLearning </div> </li><!-- #comment-## --> <li id="comment-33487" class="comment even thread-even depth-1"> <article id="div-comment-33487" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/2e828b78bada53781a9a48e475b58d68?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/2e828b78bada53781a9a48e475b58d68?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">rami</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-33487"> <time datetime="2010-04-04T04:38:09+00:00"> 4 Apr, 2010 at 4:38 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Thanks Emil, great css guide !</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-33488" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-33488" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/5f598334ff3a27844ea70f7c413b012b?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/5f598334ff3a27844ea70f7c413b012b?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Amit @ wordpress blogging tips</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-33488"> <time datetime="2010-04-05T05:07:56+00:00"> 5 Apr, 2010 at 5:07 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Thanks for the basic css guide which is must for bloggers like us.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-33489" class="pingback even thread-even depth-1"> <div class="comment-body"> Pingback: <a href='http://borby.wordpress.com/2010/04/07/css/' rel='external nofollow' class='url'>CSS « Cristen's Blog</a> </div> </li><!-- #comment-## --> <li id="comment-33490" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-33490" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/c5b01f7e954b1a2c31846c4620c21960?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/c5b01f7e954b1a2c31846c4620c21960?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">webdesign</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-33490"> <time datetime="2010-04-07T15:33:24+00:00"> 7 Apr, 2010 at 15:33 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>These really helped me to build my homepage, I can really appreciated if people take some time and write a usefull tutorial.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-33531" class="pingback even thread-even depth-1"> <div class="comment-body"> Pingback: <a href='http://versuslab.wordpress.com/2010/05/05/belajar-css/' rel='external nofollow' class='url'>Belajar CSS « Versus lab’s</a> </div> </li><!-- #comment-## --> <li id="comment-33893" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-33893" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/0ce70877d79c3dea18703ccb940b9751?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/0ce70877d79c3dea18703ccb940b9751?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://www.ixdownload.com/news/' rel='external nofollow' class='url'>Chris</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-33893"> <time datetime="2010-05-31T12:27:44+00:00"> 31 May, 2010 at 12:27 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-33902" class="pingback even thread-even depth-1"> <div class="comment-body"> Pingback: Vad är CSS och varför bör jag använda det istället för tabeller? | Kriga Designs blogg </div> </li><!-- #comment-## --> <li id="comment-33924" class="pingback odd alt thread-odd thread-alt depth-1"> <div class="comment-body"> Pingback: <a href='http://werxltd.com/wp/2010/06/15/a-cascading-style-sheets-css-beginners-tutorial/' rel='external nofollow' class='url'>A Cascading Style Sheets (CSS) Beginner’s Tutorial | Werx Limited</a> </div> </li><!-- #comment-## --> <li id="comment-33963" class="comment even thread-even depth-1"> <article id="div-comment-33963" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/54684d40a68c75680374c80937b83d9e?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/54684d40a68c75680374c80937b83d9e?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://www.smoothboothdesign.com/' rel='external nofollow' class='url'>Smooth Booth</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-33963"> <time datetime="2010-07-12T20:10:46+00:00"> 12 Jul, 2010 at 20:10 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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 :-)</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-34020" class="pingback odd alt thread-odd thread-alt depth-1"> <div class="comment-body"> Pingback: <a href='http://www.natcoll.ac.nz/blog/beginner-web-design-tutorials/' rel='external nofollow' class='url'>beginner-web-design-tutorials | blog</a> </div> </li><!-- #comment-## --> <li id="comment-34033" class="comment even thread-even depth-1"> <article id="div-comment-34033" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/ffc85b565485ddc8730035a86c78e521?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/ffc85b565485ddc8730035a86c78e521?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://www.twitter.com/kailashiyer' rel='external nofollow' class='url'>kailash</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-34033"> <time datetime="2010-08-20T11:26:58+00:00"> 20 Aug, 2010 at 11:26 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Hey, this is a great introduction to CSS! The simplest and clearest explanation I’ve read so far!</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-34040" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-34040" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/9ce9a6260e6ea21ca4018171597a0077?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/9ce9a6260e6ea21ca4018171597a0077?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">Bucko</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-34040"> <time datetime="2010-08-26T19:31:44+00:00"> 26 Aug, 2010 at 19:31 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>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.</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-34044" class="comment byuser comment-author-administrator bypostauthor even thread-even depth-1"> <article id="div-comment-34044" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/7960f43b3a2012753afecc0e4591217c?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn"><a href='http://friendlybit.com' rel='external nofollow' class='url'>Emil Stenström</a></b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-34044"> <time datetime="2010-08-28T20:48:01+00:00"> 28 Aug, 2010 at 20:48 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>@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…</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-34153" class="pingback odd alt thread-odd thread-alt depth-1"> <div class="comment-body"> Pingback: <a href='http://friendlybit.com/css/semantic-poker-template/' rel='external nofollow' class='url'>Building a poker template – Friendly Bit</a> </div> </li><!-- #comment-## --> <li id="comment-34475" class="comment even thread-even depth-1"> <article id="div-comment-34475" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/049329ce87b05ca5f88ae4c7774e767e?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/049329ce87b05ca5f88ae4c7774e767e?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">F Paul Fuhr</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-34475"> <time datetime="2010-12-09T19:17:10+00:00"> 9 Dec, 2010 at 19:17 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Hi Emil:<br /> 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?</p> <p>Best</p> <p>Paul</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-34476" class="comment odd alt thread-odd thread-alt depth-1"> <article id="div-comment-34476" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt='' src='https://secure.gravatar.com/avatar/049329ce87b05ca5f88ae4c7774e767e?s=32&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg' srcset='https://secure.gravatar.com/avatar/049329ce87b05ca5f88ae4c7774e767e?s=64&d=https%3A%2F%2Ffriendlybit.com%2Fwp-content%2Fuploads%2F2017%2F07%2Fdefault.png&r=pg 2x' class='avatar avatar-32 photo' height='32' width='32' /> <b class="fn">F Paul Fuhr</b> <span class="says">says:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="https://friendlybit.com/css/beginners-guide-to-css-and-standards/#comment-34476"> <time datetime="2010-12-09T19:20:14+00:00"> 9 Dec, 2010 at 19:20 </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>Oops I pasted the HTML tag in the last post…what was I thinking? Doh!!</p> </div><!-- .comment-content --> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-34481" class="pingback even thread-even depth-1"> <div class="comment-body"> Pingback: Web Design » Blog Archive » WebSource Presentation </div> </li><!-- #comment-## --> </ol> <div class="alert alert-warning"> Comments are closed. </div> </section> </article> </main> <!-- .main --> </div> <!-- .content --> </div> </div> <!-- .wrap --> <div class="footer-sidebar"> <div class="container"> </div> </div><!-- .footer-sidebar --> <footer class="footer-info"> <div class="container"> © 2017 friendlybit.com/wp </div> </footer><!-- .footer-info --> <script type='text/javascript' src='https://friendlybit.com/wp-content/themes/mediumm/dist/scripts/main.js'></script> <script type='text/javascript' src='https://friendlybit.com/wp/wp-includes/js/wp-embed.min.js?ver=4.8.1'></script> </body> </html>