CSS-3

These pages represent my attempt to provide structure for students who are learning the¬† new CSS-3 selectors. Since this is still an emerging standard, this information is subject to change. I am using WordPress so that others can include comments on the individual selectors. This list is probably not inclusive. If readers note missing selectors or concepts, please let me know via a comment and I will try to incorporate. Likewise, if an explanation/ example is outdated (after all, this is a moving target), notify me via a comment as well. Over time, I plan to provide working examples of many of these bullet points. Make certain to view the examples in multiple browsers (and don’t forget to view the source code). As much as possible, I have tried to include both HTML and CSS code on a single page – to make it easier to grasp the concept being presented.

For reference purposes, the following browser engines and extensions may be helpful for aspiring professionals.

  • KHTML rendering engine – use the -khtml prefix with your CSS. Konqueror (typically encountered in Linuxsystems) is the most popular broswer based on this engine. Note that one can switch to the WebKit rendering engine if desired with this technology.
  • Mozilla/ Gecko – use the -moz prefix with your CSS. Firefox is the most popular browser based on this engine.
  • Presto – use the -o prefix with your CSS. Opera is the most popular browser based on this engine.
  • Trident – use the -ms prefix with your CSS. Internet Explorer is the most popular browser based on this engine. Note that this prefix is only recognized by IE 9+.
  • Webkit – use the -webkit prefix with your CSS. Safari is the most popular browser based on this engine. Chrome is another. Dreamweaver uses this internally also.

CSS-3 selector concepts

CSS-3 selector examples


References (will open in new browser window/ tab)

 Resources (sites I find particularly useful)

W3C CSS Working Group pages

Leave a Reply

Your email address will not be published. Required fields are marked *