Universal selector
* { border:1px solid red; }
The difficulty that most newcomers to CSS usually encounter is understanding how selectors work. Often times, knowing which selector type to use can be difficult, depending on how your HTML content is laid out and how much styling you intend to do. There are many methods and techniques. Some will make sense right away, while others may seem strange but will work in a given situation. The other thing you need to understand about selectors and CSS in general is that not all browsers support every property fully. Internet Explorer 6/7/8, we are looking in your direction.
With that said, we will examine the most popular and useful selectors. We will start with a selector that you should use sparingly, if at all. It is called the universal selector and, as its name implies, it will apply styling to every element on your page. There is some debate among seasoned web developers about its use and, according to the development team at Mozilla (the makers of Firefox), it is the "most expensive" selector in terms of CPU usage and strain on the browser. The universal selector also has a very low specificity, meaning that other styles can override it easily.
The universal selector is written as an asterisk "*." It then follows the usual rule set declarations of CSS. The universal selector is way too general, so any other style we write later on, will overwrite the universal style. One good use of the universal selector is to use it for trouble shooting as shown in the movie bellow. I added a 1px border to ALL the elements on the page. This allows me to see where is every element, how big is each element etc. etc.
With that said, we will examine the most popular and useful selectors. We will start with a selector that you should use sparingly, if at all. It is called the universal selector and, as its name implies, it will apply styling to every element on your page. There is some debate among seasoned web developers about its use and, according to the development team at Mozilla (the makers of Firefox), it is the "most expensive" selector in terms of CPU usage and strain on the browser. The universal selector also has a very low specificity, meaning that other styles can override it easily.
The universal selector is written as an asterisk "*." It then follows the usual rule set declarations of CSS. The universal selector is way too general, so any other style we write later on, will overwrite the universal style. One good use of the universal selector is to use it for trouble shooting as shown in the movie bellow. I added a 1px border to ALL the elements on the page. This allows me to see where is every element, how big is each element etc. etc.