Fundamentals

Question 1

What is a declaration?

Answer 1

A declaration is made up of a property and a value. For example:

color: black;

A group of declarations inside curly braces is called a declaration block.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 2

What is a selector?

Answer 2

A declaration block is preceded by a selector (in this case, body):

body {
 color: black;
 font-family: Helvetica;
}

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 3

What is a css rule or css ruleset?

Answer 3

Together, the selector and declaration block are called a ruleset. A ruleset is also called a rule.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 4

What are at-rules?

Answer 4

at-rules are language constructs beginning with an “at” symbol, such as @import rules or @media queries.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 5

When declarations conflict, What does the cascade consider to resolve the conflict?

Answer 5

1. • Stylesheet origin - Where the styles come from. Your styles are applied in conjunction with the browser’s default styles.
2. • Selector specificity - Which selectors take precedence over which.
3. • Source order - Order in which styles are declared in the stylesheet.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 6

What are the possible origins a stylesheet can have?

Answer 6

• author styles - The stylesheets you add to your web page. Highest priority.
• user stylesheet - Some browsers let users define a user stylesheet. This is considered a third origin, with a priority between user agent and author style.
• user agent styles - Styles added by the browser. Lowest priority

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 7

What are !important declarations?

Answer 7

A declaration can be marked important by adding !important to the end of the declaration, before the semicolon:

color: red !important;

Important declarations are treated as a higher-priority origin. The overall order of preference, in decreasing order, is this:

1. Author important
2. Author
3. User agent

Adding !important gives the declaration a specificity above inline-style.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 8

What is CSS specificity?

Answer 8

According to MDN, Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Simply put, if two CSS selectors apply to the same element, the one with higher specificity is used.

Question 9

What are inline-styles?

Answer 9

Styles added to an element using its style attribute, the declarations are applied only to that element. These are, in effect, “scoped” declarations, which override any declarations applied from your stylesheet or a tag.

The style attribute accepts a list of declarations separated by semicolons (;).

To override inline declarations in your stylesheet, you’ll need to add !important to the declaration.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 10

How does the browser evaluate the specificity of a css rule?

Answer 10

The browser evaluates specificity in two parts:

1. inline-stiles - By default have higher specificity than any other styles.
2. selector specificity - Determined by the selectors (elaborated in another card)

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 11

How does the browser evaluate the specificity of a selector?

Answer 11

1. • If a selector has more IDs, it wins. - ID selectors
2. • If that results in a tie, the selector with the most classes wins. - Class selectors
3. • If that results in a tie, the selector with the most tag names wins. - Tag selectors (also known as type selectors)
4. • If the origin and the specificity are the same, then the declaration that appears later in the stylesheet—or appears in a stylesheet included later on the page—takes precedence.

NOTE: Pseudo-class selectors (for example, :hover) and attribute selectors (for example, [type="input"]) each have the same specificity as a class selector.

The universal selector (*) and combinators (>, +, ~) have no effect on specificity.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 12

Which order do we need to apply to overwrite all the styles of a link?

Answer 12

This listing shows styles for links on a page in the “correct” order.

 a:link {
  color: blue;
  text-decoration: none;
 }

 a:visited {
  color: purple;
 }

 a:hover {
  text-decoration: underline;
 }

 a:active {
  color: red;
 }

The cascade is the reason this order matters: given the same specificity, later styles override earlier styles.

A helpful mnemonic to remember this order is LoVe/HAte—link, visited, hover, active.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 13

What is a cascaded value aka computed value?

Answer 13

The browser follows these three steps — origin, specificity, and source order to resolve every property for every element on the page. A declaration that “wins” the cascade is called a cascaded value.

There’s at most one cascaded value per property per element.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 14

What are inheritance values?

Answer 14

When an element has no cascaded value for a given property, it may inherit one from an ancestor element.

Not all properties are inherited (We wouldn’t want a passing its border down to every descendant element.), however. By default, only certain ones are.

In general, these are the properties you’ll want to be inherited. They are primarily properties pertaining to text: color, font, font-family, font-size, font-weight, font-variant, font-style, line-height, letter-spacing, text-align, text-indent, text-transform, white-space, and word-spacing.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 15

What does the special keyword inherit do to a property value?

Answer 15

Will cause the element to inherit that value from its parent.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 16

What does the special keyword initial do to a property value?

Answer 16

If you assign the value initial to a property, then it effectively resets to its default value. It’s like a hard-reset of that value.

WARNING The initial keyword isn’t supported in any version of Internet Explorer or Opera Mini. It works in all other major browsers, including Edge, Microsoft’s successor to IE11.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 17

What are shorthand properties?

Answer 17

Shorthand properties are properties that let you set the values of several other properties at one time. For example, font is a shorthand property that lets you set several font properties. This declaration specifies font-style, font-weight, font-size, line-height, and font-family:

font: italic bold 18px/1.2 "Helvetica", "Arial", sans-serif;

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 18

What is the problem with shorthand properties?

Answer 18

Most shorthand properties let you omit certain values and only specify the bits you’re concerned with. It’s important to know, however, that doing this still sets the omitted values; they’ll be set implicitly to their initial value. This can silently override styles you specify elsewhere. If, for example, you were to use the shorthand font property for the page title without specifying a font-weight, a font weight of normal would still be set.

Of all the shorthand properties, font is the most egregious for causing problems, because it sets such a wide array of properties.

 .title {
  font: 32px Helvetica, Arial, sans-serif;
 }

is equivalent to

 .title {
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-stretch: normal;
  line-height: normal;
  font-size: 32px;
  font-family: Helvetica, Arial, sans-serif;
 }

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 19

What is the TOP, RIGHT, BOTTOM, LEFT pattern of margin and padding shorthand properties?

Answer 19

For properties like margin and padding, or some of the border properties that specify values for each of the four sides of an element. For these properties, the values are in clockwise order, beginning at the top.

Properties whose values follow this pattern also support truncated notations. If the declaration ends before one of the four sides is given a value, that side takes its value from the opposite side. Specify three values, and the left and right side will both use the second one. Specify two values, and the top and bottom will use the first one. If you specify only one value, it will apply to all four sides.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 20

What is the :root node selector?

Answer 20

The root node is the ancestor of all other elements in the document. It has a special pseudo-class selector (:root) that you can use to target it. This is equivalent to using the type selector html with the specificity of a class rather than a tag.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 21

What is a media query?

Answer 21

media query—An @media rule used to specify styles that will be applied only to certain screen sizes or media types (for example, print or screen). This is a key component of responsive design.

@media (min-width: 800px) {
  :root {
    font-size: 0.875em;
   }
 }

@media (min-width: 1200px) {
  :root {
     font-size: 1em;
   }
 }

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 22

Why can it be confusing working with em units?

Answer 22

One thing to keep in mind when using em is that when you set the font-size in it, it’s based on the nearest parent element with a declared font-size.

.parent { 
   font-size: 20px;
}

 .child { 
  /* This is based on 20px, so it's 30px */
    font-size: 1.5em;
 }

But when we size other things in em, it’s now based on the newly-adjusted font-size of the current element. For example:

.parent {
   font-size: 20px;
}
  
.child {
   /* This is based on 20px, so it's 30px */
     font-size: 1.5em;

    /* This is based on 1.5em (not 20px), so it's also 30px */
    border: 1em solid black;
}

It just can be weird to see two different em values in the same element evaluating to the same end value.

This is in addition to the fact that the cascading effect of ems is sometimes challenging in itself. If you size things inside components in ems and those components can be nested, that can cause cascading of sizes that may be undesirable.

Source css-tricks