WDV 205 - Advanced CSS

Assignment 1-1 Define CSS Terms

1. Specificity

Specificity indicates selectors have different values to the browser, which dictate their importance and in what order the browser will render any CSS rules.

• More specific selectors will overwrite any rules that conflict with less specific selectors. So, inline styles will overwrite class styles because they are more specific, therefore of higher importance.

2. Precedence

Precedence dictates that in cases of similar specificity, the browser will render the rule that is closer in proximity to the element.

• For example, the body can dictate the font type of all the elements within it, but you can change the font type of the h1 elements to be something different. If the body's font is set to Times New Roman, you can change the h1 elements to Arial. The rules for the h1 elements then become closer than the rules for the body, so the font type is rendered as Arial by the browser for the h1 elements.

3. Inheritance

Inheritance dictates that rules be passed down from parent elements and applied to their child elements as long as the child element didn't specify a different rule.

• Using the example from precedence, when the font type of the body is written a certain way, all other elements within it will take on that font type. If the body's font is set to Georgia, then unless written otherwise, any elements within will show up as Georgia font. The body acts as the parent element, so its children (i.e., h1, h2, and p elements) inherit the font automatically.

4. Property

A property is a certain aspect of an element. It can also be described as a characteristic, and these dictate how one piece of an element can be displayed.

• Many elements have the same kinds of properties, such as font-family, color, and background-color.
• In the example with the body element's font rules, the font-family would be a property of the body element, and it dictates what type of font the browser will render.

5. Value

CSS rules come in property-value pairs. As defined above, the property defines what aspect the CSS is targeting, so the value acts as the action that is being done to the element.

• They are written as property: value; (ex. font-family: arial;)
• By dictating
  
  body {
  font-family: arial;
  }
  
  You are telling the browser that you're targeting the type of font you want to display in the body, and you want that font to be Arial.

6. Selector

A selector tells the browser which elements to target with CSS rules. It is the first thing written when defining a CSS rule.

• Selectors can also be classes and id's.
• In the above example, body is the selector.
• In this example
  
  .container {
  color: red;
  }
  
  .container is the selector and defines a class that makes the color of the font on the page red.