A Selector specifies the particular (X)HTML web page element to be styled by a particular Style Rule. In order to have a wide range of options in styling these page elements, we have numerous Selectors we can choose to use.
Here we will review the Core CSS Selectors that will provide you with the basic skills needed to Design Web Pages. Once you have mastered these basic Selectors and skills then you can move on to more advanced CSS Techniques.
An ID Selector is indicated by using the pound # sign. Use an ID Selector for page elements that occur one time on a web page. A perfect example is the Layout. Use an ID Selector for each div of the CSS Layout.
#container <--- This is an id selector. It means there can only be on container on the web page.
The pound sign #, which is technically an octothorpe, is used to signify an ID Selector. The word "container" in our example is just a word I chose to name my selector. In reality, I would apply this selector to the main div of my layout.
A Class Selector is indicated by a period . For instance, .bold_text is a class selector that I defined. You are required to use the period at the beginning, but you can use any words you would like to name the selector. However, be descriptive in naming your selectors.
A Class Selector is applied to only a portion of a page element, not the entire element. Furthermore, a Class Selector can be applied numerous times on a single web page.
To apply a class style to a page element:
Click Save and view in a browser.
.bold_text { font-weight: bold;}
A Tag Selector is simply the HTML tag you are styling, but without the brackets. For instance, if you want to style an unordered list, you would use the letters ul as the selector.
A classic example is styling the body of a web page.
body {
margin: 0px;
padding: 0px;
}
The body is the background of the web page, and at a bare minimum, we need to remove default margins and padding by inserting zeros. In reality, Tag Selectors are typically combined with other Selectors, such as ID Selectors. See (Descendant Selectors.) The body style is the exception.
Pseudo Element Selectors and Pseudo Class Selectors are used to style the different states of a Link.
Descendant Selectors are created to style any nested elements. For instance, if we style a paragraph that is inside the #maincontent div, we will use a descendant selector.
#maincontent p { font-size: 13px;}
The space between #maincontent and the letter p is intentional. It means we are styling all paragraphs located inside the maincontent div. If we were to use a comma instead of a space, it would change the meaning.
A comma means and.
The universal selector is indicated with an asterisk. *
The purpose of this selector is to make a style rule one time, yet it will be applied to every single element on your web pages. The most common use of the universal selector is to remove, or zero out, all margins and padding.
I have to tell you, there is a better way to deal with default margins, padding, and other properties. There is something called a "CSS Reset". Use the CSS Reset instead of the universal selector to remove default margins and padding.
Buy
Expression Web Video