Research and Define CSS Terms

Assignment: Use your current knowledge, the Internet and additional references to research the following CSS related terms. 

For each of the following terms provide two or more paragraphs.  Discuss their definition, their role in CSS and how they work.

Specificity

                This is a weighting system CSS3 uses to determine which style should be used in the event that there is a conflict between two or more style rules. The selectors are weighted highest to lowest as follows: in-line style, ID, class/pseudo-class/attribute, and element. So ID will win over class, and in-line styles will override both ID and class. It is calculated as follows: “Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. When specificity is equal to any of the multiple declarations, the last declaration found in the CSS is applied to the element. Specificity only applies when the same element is targeted by multiple declarations. As per CSS rules directly targeted element will always take precedence over rules that an element inherits from an ancestor.” (https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) “

To calculate specificity: (from http://www.w3.org/TR/css3-selectors/#specificity)

1.  count the number of ID selectors in the selector (= a)

2. count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)
3. count the number of type selectors and pseudo-elements in the selector (= c)
4. ignore the universal selector

Additional notes about specificity:

• The universal selector (*) has no specificity value (0,0,0,0)
• Pseudo-elements (e.g. :first-line) get 0,0,0,1 unlike their psuedo-class brethren which get 0,0,1,0
• The pseudo-class :not() adds no specificity by itself, only what's inside it's parentheses.
• The !important value appended a CSS property value is an automatic win. It overrides even inline styles from the markup. The only way an !important value can be overridden is with another !important rule declared later in the CSS and with equal or great specificity value otherwise.
• Repeated occurrances of the same simple selector are allowed and do increase specificity.

Precedence

In a nutshell - The closer a rule is to the content being styled, the higher its precedence. The cascade of rules starts with the furthest and goes toward the closest to the content.

                When the browser needs to resolve what styles to apply to a given HTML element, it uses a set of CSS precedence rules. Given these rules, the browser can determine what styles to apply. The rules are:

1. !important after CSS properties.
2. Specificity of CSS rule selectors.
3. Sequence of declaration.

CSS precedence happens at CSS property level. Thus, if two CSS rules target the same HTML element, and the first CSS rule takes precedence over the second, then all CSS properties specified in the first CSS rule takes precedence over the CSS properties declared in the second rule. However, if the second CSS rule contains CSS properties that are not specified in the first CSS rule, then these are still applied. The CSS rules are combined - not overriding each other. (http://tutorials.jenkov.com/css/precedence.html)

From lowest precedence to highest,

• Browser style sheet
• External style sheet
• Embedded style sheet
• Inline style sheet

Inheritance

                Inheritance is the process by which properties are passed from parent to child elements even though those properties have not been explicitly defined by other means. Certain properties are inherited automatically, and as the name implies, a child element will take on the characteristics of its parent with regards to these properties.

Table indicating whether or not property is automatically inherited: https://www.w3.org/TR/CSS21/propidx.html

Note: You can force inheritance—even for properties that aren’t inherited by default—by using the inherit keyword. This should be used with care, however, since Microsoft Internet Explorer (up to and including version 7) doesn’t support this keyword.

Property

                A property is a style attribute. Some examples are: color, font-size, text-align. In CSS, a style is applied by designating a selector (h1, p, etc.) followed by a list of properties and the value (style) you want to apply. Each property: value set is a declaration. Multiple property: value sets can be listed for a single selector. All of the declarations for a selector are contained inside curly brackets.

                The more properties that are made available, the more flexibility we have to style elements of the web page. These properties are not just visible. The properties of CSS are also used for animation, generated content, and printing. There are also short-hand properties available such as ‘font’ that allow multiple attribute values to be assigned.

A good list of CSS3 properties: http://www.tutorialrepublic.com/css-reference/css3-properties.php

Most properties have an initial value.

Table of properties with initial value: http://meiert.com/en/indices/css-properties/

Value

                The value in CSS is the actual style being applied. It is the term that determines how something looks or what action happens. Values include colors, sizes, effects, etc. The value used must be one available for the associated property. In other words, ‘font-size: red’ wouldn’t do anything because red isn’t a value available for font-size. It is a value for the color property.

Site that will give all available values for a property: http://cssvalues.com/

Extensive list of properties and values: https://www.w3.org/TR/CSS21/propidx.html

Selector

                According to W3C, “selectors are patterns used to select the element(s) you want to style.” Basically, the selector is something that appears in the html code for the page and is used by the CSS to identify what is being styled. There are multiple types of selectors.

• Element – Any of the html elements
• Class – can use any name you choose, can be used multiple times on a page
• ID – can use any name you choose, can only be used ONCE per page
• Attribute – enclosed in square brackets, can be used to apply only to text with certain words/phrases
• Pseudo-class – specifies a special state of or relationship to an element, is applied only when element is in that state or fits that relationship, uses a colon in front of term (:first-child, :hover)
• Universal - *, applies to everything
• Descendent – combination of two or more element selectors and only applies in a situation where the latter element inherits style from the earlier element
• Pseudo-element – uses a double colon in front of term, usually a special relationship (::first-line)