General CSS

Question 1

What does “last rule” mean in CSS?

Answer 1

When 2 selectors have an equal specificity weight - the latest rule (or the one further down in the CSS) will take precedence.

Question 2

What are text-transform values?

Answer 2

text-transform: uppercase;
                          lowercase;
                          capitalize;
                          inherit;
                          none;

Question 3

How do you select (i.e. target) the general sibling of another element?

(general sibling combinator)

Answer 3

child-element-name ~ sibling.element.name

ex.

img ~ p {
color: red;
}

All paragraphs that are the sibling of an image will be red.

Question 4

How do you target the first child of an element?

Answer 4

element-name: first-child

ex.

div: first-child {
color: blue;
}

Elements (like a paragraph or link) that is the first child of a div will appear blue.

Question 5

What property and value would you use to remove the default underlining beneath <a> tags?</a>

What are other possible values of this property? </a>

Answer 5

text-decoration: none;

text-decoration: none;
underline;
overline;
strikethrough;

Question 6

What is the descendant selector?

Answer 6

The descendant selector is how you select all the elements (with the same description/semantic markup) that are a descendant (child, grandchild, etc etc.) of a specified element.

It is used by placing only a space between the parent and it’s descendant.

ex.

div p {
font-family: sans-serif;
}

Now all paragraphs that are inside a div (its children) will be sans-serif.

TIP - using the universal selector will target all the descendants of an element, regardless of type.

div * {
font-family: sans-serif;
}

All elements inside the div will now use sans-serif fonts, even if they are h1, h2, p, etc.

Question 7

How do you write a child selector in CSS?

Answer 7

element-parent > element.child

ex.

div > p {
text-transform: uppercase;
}

Now all paragraphs that are the children of a div will be uppercase.

Question 8

What is “ div:p { color:blue; } “ an example of?

Answer 8

The first-child selector, which allows you to target the first child of an element or group of elements.

Question 9

What is “h1 + p { color:red; }” an example of?

Answer 9

The adjacent sibling selector (aka adjacent sibling combinator)

Question 10

What is the adjacent sibling selector (combinator) and how do you write it?

Answer 10

The adjacent sibling selector is a way to target, or select, only elements that are the direct sibling to another. It is written using a + between the sibling elements.

ex.

HTML: 
< div >
    < h1 >Title< /h1 >
    < p >fancy words< /p >
    < h2 >Han shot first< /h2 >
    < p >Greedo was a punk anyway< /p >
    < p >But have you seen baby yoda?< /p >
< /div > 

CSS:
h2 + p {
color: purple;
}

Only “Greedo was a punk anyway” will appear purple on the page, because the other paragraphs were not direct siblings of the h2.

Question 11

What is the CSS universal selector?

Answer 11

*

Question 12

What is CSS grouping and why is it useful?

Answer 12

CSS grouping is a way to group several elements and style them at once. It is written by placing a comma between the elements.

ex: h1, h2, p { font-family: cursive; }

Grouping allows developers to minimize the code, so all the h1’s, h2’s and p’s on the page in the example above will share the same font style. Instead of 3 rules, we only need one. This keeps code clean, easier to read, and more friendly to those who wish to build off of your code later on.

Question 13

How does a developer make a rule targeting a class in code?

Answer 13

Placing a period before the given class name, and spelling it exactly as it’s written in the html.

ex: .nav-container { text-decoration: none; }

Question 14

How does a developer make a rule targeting an element with an id?

Answer 14

Placing a # before the id name, writing it exactly as it appears in the html.

ex: #page-top { width: 80%; }