Unit 1

Assignment 1-1:


**Research and Define CSS Terms**

If there are two or more conflicting CSS rules that point to the same element, the browser follows some rules to determine which one is most specific and therefore wins out. Think of specificity as a score/rank that determines which style declarations are ultimately applied to an element.The universal selector (*) has low specificity, while ID selectors are highly specific!Every selector has its place in the specificity hierarchy. There are four categories which define the specificity level of a selector: Inline styles - An inline style is attached directly to the element to be styled. IDs - An ID is a unique identifier for the page elements, such as #navbar.Classes, attributes and pseudo-classes. Elements and pseudo-elements - This category includes element names and pseudo-elements, such as h1, div, :before and :after.

Precedence is the order of css code pretty much. This applies to inlines, IDs, class/attributes/pseudo-classes, and elements/pseudo-elements.

The inherit CSS keyword causes the element for which it is specified to take the computed value of the property from its parent element. It can be applied to any CSS property, including the CSS shorthand all. For inherited properties, this reinforces the default behavior, and is only needed to override another rule. Inheritance is always from the parent element in the document tree, even when the parent element is not the containing block.

The property is the color piece of this declaration. It dictates which aspect of the selector will be changed visually. When you write CSS properties, you cannot simply make them up as you see fit. For instance, "color" is an actual CSS property, so you can use it. This property is what determines the text color of an element. If you tried to use "text-color" or "font-color" as CSS properties, these would fail because they are not actual parts of the CSS language. There are a number of CSS properties that you can use to style a site. Some examples are: Border (including border-style, border-color, and border-width), Padding (including padding-top, padding-right, padding-bottom, and padding-left), Margins (including margin-top, margin-right, margin-bottom, and margin-left), Font-family, Font-size, Background-color, Width, Height, Float, Clear, Overflow, Text-transform, and Z-index

CSS values are set against CSS Properties and reside within CSS declaration block, which is a part of the CSS rule / statement. CSS 2.1 allows following types of values : Integers and real numbers, Lengths, Percentages, URLs and URIs, Counters, Colors, Strings, Unsupported Values. The value is what the chosen CSS property will be changed to. In our example, we are using the hex value of #000, which is CSS shorthand for "black."

CSS selectors are used to "find" (or select) the HTML elements you want to style. We can divide CSS selectors into five categories: Simple selectors (select elements based on name, id, class), Combinator selectors (select elements based on a specific relationship between them), Pseudo-class selectors(select elements based on a certain state), Pseudo-elements selectors (select and style a part of an element), and Attribute selectors (select elements based on an attribute or attribute value)

back to top