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
- Attribute selectors
- Child and sibling selectors
- First, last, only selectors (aka structural selectors)
- n-th child selectors
- pseudo-class selector
- pseudo-elements
- Structural selectors
- Flexible box model
- Media queries
CSS-3 selector examples
- animations (works mostly in -webkit based browsers)
- drop caps (works in most modern browsers)
- fonts (@font-face)
- gradients (works mostly in -webkit based browsers)
- masking (works mostly in -webkit based browsers)
- multi-column text layout (works mostly in -moz and -webkit based browsers)
- reflections (works mostly in -webkit based browsers)
- round corners (compare different browsers)
- shadows and text shadows
- transforms
- transitions
- transparency/ opacity
References (will open in new browser window/ tab)
- various lynda.com tutorials
- CSS-3 color module proposed recommendation
Resources (sites I find particularly useful)
W3C CSS Working Group pages
- CSS-3 2D Transformations
- CSS-3 3D Transformations
- CSS-3 Animations
- CSS-3 Background
- CSS-3 Cascade and Inheritance
- CSS-3 Color
- CSS-3 Content
- CSS-3 Exclusions
- CSS-3 Flexible Box Model
- CSS-3 Fonts
- CSS-3 Generated Content for Paged Media
- CSS-3 Grid Layout
- CSS-3 Grid Positioning
- CSS-3 Image values and replaced content
- CSS-3 line
- CSS-3 Lists and Counters
- CSS-3 Media Queries
- CSS-3 Multi-Column Layout
- CSS-3 Namespaces
- CSS-3 Paged Media
- CSS-3 Regions
- CSS-3 Ruby
- CSS-3 Speech
- CSS-3 Text Layout (Writing Modes)
- CSS-3 Text
- CSS-3 Transitions
- CSS-3 Basic User Interface
- CSS-3 Values and Units
Loading ...