A selector is the "THANG" you want to style. There are several ways you can identify a selector
standard selector - is the single tag you want to create a style for (do not include the < > angle brackets.
p {color:red; font-size:2em;}
multiple selector - This is 1 style that applies to several tags. The tags/selectors are seperated by commas
Example: h1, h2, h3 {text-transform:lowercase;} because the browser would capitalize the first letter of the word.
contextual selector - This means tags/selectors within another tag. These need to be listed in the order they need to appear in order for the style to apply. In the sample listed below the browser would first find a <h1> tag and then look for an <em> tag within that h1 tag. If that situation exists then the ensuing style will be applied. Contextual selectors let you fine tune your selector request so that one style can be created for an <em> tag within the <h1> tag, and another style can be created for an <em> tag that is within the <p> tag and so forth. Note there is only a space between the tags/selectors... no comma or anything else.
h1 em {color:red;}
p em {color:green;}
contextual selector - child this code requires that the second tag be the child of the first tag. Child means the one directly following within the parent tag not further down the road. Note the greater than/angle bracket usage.
p>em {color:purple;}
adjacent sibling selector - 2 tags/selectors that are both siblings and are next to each other in the markup. This is not as common. And note that these are not cousins. They are indicated with a space then a plus sign and another space. Not like the one above that has just and angle bracket and no spaces.
h1 + p {font-variant:small-caps;}
attribute selector - a selector which is defined by a tag and an attribute
img[title] {border:2px solid blue;}
only image tags which have the "title" attribute will display this style
img[alt="SRT"]
only an image tag with an "alt" attribute with a value of "SRT"
~~~~~~~~~~~~~the following tags/selectors will be dealt with later~~~~~~~~~~~
universal selector - applies to all tags that are able to inherit the properties styles
* {color:#purple;}
This affected the <h1>, <h2> , <p> , and <a> tags. It did not affect the <img> since color did not apply to that tag.
grandchild selector - the second tag must be the grandchild of the first tag
h1 * span {font-style:italic;}
class - a period followed by the class name (which you select). Classes can be used several times on a page.
.smoot {font-family:Palatino, serif;}
this class would apply to any tag which had the "class" attribute and a value of "smoot" ie <h1 class="smoot"> or <p class="smoot">
specific class - a class which is applied to a specific tag
span.smoot {font-style:italic;}
this class will only work with the span tag that has a class of smoot <span class="smoot">
id - a # sign followed by the id's name. Id's can only be used once on a page
#smoot {font-weight:bold;
pseudo-class - a tag which has a specific state applies to it. (often used with the <a> tag) List the tag, a colon, and the state
a:link {color:#CC0033;}
a:hover {color:#FF0033;}
a:visited {color:#990033;}
a:active {color:#FFFF33;}
other pseudo classes - first-child or focus - the first child value could be assigned to any block element, the focus value should be applied to an element which is clicked on
p strong:first-child
This style would apply to the first strong tag within a paragraph, but not the second, third, etc
input:focus
pseudo elements - first-letter, first-line - these elements can be assigned to any block element
p:first-letter {font-size3em;}
div:first-line {font-variant:small-caps;}
These selector guidelines can be combined ie... a contextual pseudo class:
#nav a:hover {text-decoration:underline;}
or a multiple selector that references a contextual selector (id and h1) and another contextual selector that uses a class, an example of one of the other pseudo classes (smoot, p:first child)
#heading h1, .smoot p:first-child;}
The rule listed above is fairly complex, don't expect to create htis type of code right away. As you work with the code more you encounter situations where you need a complex solution like the one listed above.
In addition, there are often many ways to achieve the same result with CSS. As a beginner you may need to use several rules to accomplish what an advanced user can achieve in one rule. Create the code in a way that makes sense to you, and refine your technique as you learn more.