To successfully target a certain (x)HTML element it must first be well-formed. We use the selector portion of the css style rule to apply our styles to specific elements.

Common Selectors (element or simple selectors):

There are two common selectors called ‘type’ and ‘descendant’ selectors. Type selectors are used to target a specific type of element, hence the name. These elements can be paragraphs, anchors, headings, etc. You just specify the type of element you want to style. These are also called element selectors or simple selectors.

p {color: #000000;}
a {text-decoration: underline;}
h2 {font-weight: bold;}

Descendant selectors target elements that reside inside another elements opening and closing tags. In the following example, all anchors inside the li (list) will be affected but no others; the a is a descendant of li.

li a {text-decoration: none;}

ID and Class:

You can be more specific in targeting elements by assigning them an ID or making them part of a class. In this way you can target only a certain group of elements (all sharing the same class) or a single element (with a unique ID). These selectors target the elements with the corresponding ID or class name only and leave all other elements alone.

You first assign the class or ID name within the target elements opening tag…

Introduction Text
 
Mark Husband-Wood

Then use the class and ID values to target them for styling…

#intro {color: #000000;}
.author {text-decoration: underline;}

Universal selector:

This puppy is basically a wildcard, and it works by matching all available elements in the entire document. This will style every targeted element on the page, and it is denoted by an asterisk. The following css rule will set the margins and padding to 0 on every element. This is a powerful selector, so be careful!

*{margin: 0; padding: 0;}