WDV205 Assignment

Jeff Lubow

1-2: Explain CSS Basic Selectors

In WDV101 Intro HTML and CSS you learned how to use the following CSS Selectors:

These general selectors will continue to be used on almost all of your projects.  They will often be used as part of more complex selectors.

Review and Research these selectors.  Create a web page that provides the following information for each of those selectors. Don't just copy and paste information off the internet. Use your own words to explain. Think of how you would explain these to a beginning WDV101 student. Provide examples.

  1. Describe what element or elements that selector will apply to a web page.
  2. Discuss when to best use the selector.
  3. What symbol or syntax identifies that selector on a CSS stylesheet?
  4. List the selectors in order of Specificity from lowest specificity to highest specificity

Element Selector
Selects all html contained within that element type on the page.
Best used when you want to target a lot of information such as everything within the body (<body>) or all instances of an element such as as paragraph text (<p>).
In the style area, element selectors would appear as the name of the element such as body or p or h3
This type of selector has a low specificity value of 1.

Group Selector
Provides ability to select multiple element types on a page.
Best used when you want to apply the same styling to multiple elements.
In the style area, group selectors would appear like element selectors, but with commas between them such at h2, p, h3
This type of selector has a low specificity value of 1.

Descendant Selector
Provides the ability to select only elements contained within other elements.
Descendant selectors are helpful for applying styling to elements contained within other elements such as all paragraphs contained within a footer.
In the style area, this would appear as footer p
This type of selector has a low specificity value of 1.

Class Selector, dependent and independent
Selects elements based on class attributed to them.
These can be used to basically group html elements by what they do.
Dependent work on specific element within a class such as h1.body
Independent work on any element within a class such as .body
This type of selector has a medium specificity value of 10 and beats any amount of element selectors.

ID Selector, dependent and independent
Similar to a class selector, but even more specific as it can be used to identify specific elements.
These can be used to identify specific elements rather than a class of elements like navbar.
In the style area these would be identified with a pound or hash mark at the beginning such as #navbar
This type of selector has a high specificity value of 100

Universal Selector
The universal selector is used to select all elements of any type on a page.
This can be used to style something you want the same in every element on the screen such as a color.
In the style area, this would be identified by *
This type of selector has the lowest specificity as it is not specific at all so has a value of 0.

Pseudo Selectors
Pseudo-class selectors are classes but are not defined in the html.
They are mainly used to modify how hyperlinks appear depending on how the user has interacted with them.
For example a:hover would allow styling how the link appears when the user is hovering over it with their mouse.
This type of selector has the same specificity as a class selector with a value of 10.

Pseudo Elements
Pseudo elements can be used to target specific items such as the first line or charactor on a page or paragraph.
This is helpful for things like making the first letter in a paragraph stand out with a font, color, size difference from the rest of the text.
These are identified with :: such as ::first-line or p::first-letter
This type of selector has the same specificity as an element with a value of 1.