Section 7 - Intermediate CSS Flashcards
What’s the hierarchy for cascading style sheets types?
- External
- Internal <style></style>
- Inline style=”color: red”
From out to in.
What are the 4 broad categories of determining overall level of importance? (In order of importance)
- Position
- Specificity
- Type
- Importance
What’s the first thing we look at at the very top of the cascade when thinking of position?
Whether a rule is at a higher or lower position in the CSS relative to other rules
What happens when you have 2 rules (or more) targeting the same element applying the same thing?
li {
color: red
color: blue
}
li {
color: green
}
The one that is lower down replaces the previous one (the lowest one overrides all styles above). Here we are looking at the category of POSITION. Specificity wise they are all element selectors.
li {
color: red
color: blue
}
li {
color: green
}
(green wins, if there wasn’t green then blue would win)
What is specificity?
How specific a selector is in terms of the elements you’re applying the CSS rule to
(the more specific the rule is, the more important it is which is why attribute and ID are the most important)
For specificity, what are the 4 ways we can target an element in order of importance?
- Element li {color: blue;}
- Class .first-class {color: red;}
- Attribute li[draggable] {color: purple;}
- ID #first-id {color: orange;} [wins]
<li>
</li>
What is Type in terms of order of importance in CSS? What’s their order of importance? (2)
The type of CSS style being applied
- external
- internal
- inline
3 ways we can apply CSS (external, internal, inline), the most important styles are the ones being applied via inline code because it’s the most specific, targeting only 1 element
What is the “Importance” category?
“Important” is a keyword that you can apply to any CSS rule. It overrides any other rule for that element.
color: red;
color: green !important;
What are the 5 ways/rules you can combine selectors? Describe what they target too.
- Group rule - apply to group
- Child rule - 1 level down only
- Descendant rule - many levels down
- Chaining - super specific
- Combining combiners
How do you use the group rule?
Insert a comma
applies to entire group
How do you use the child rule?
right angle bracket >
applies 1 level down only
How do you use the descendant rule?
separate selectors with a space
up to many levels down
How do you use the chaining rule?
no spaces between selectors with the appropriate symbol (#, dot, etc)
super specific targeting
How do you combine combiners?
You have an ancestor on the left and a chain on the right, and can add/remove spaces or add different rules and combos
Inserting a space tells the selector code what?
It tells the code where you don’t want to apply the style (if there was no space, it would apply to all of it)
Elements always go where when combining combiners?
FIRST
h1#title.big.heading {
What happens when you hover over selectors?
You can see which element it’s selecting which can be handy
