10 Introducing CSS and Selectors

Question 1

What are the 3 parts to a CSS rule?

Answer 1

selector and declaration
Select element
define how it should be styled

A declaration contains a property and a value

So you basically select an element, you select a property to change, then you set the value.

Question 2

Use a css style sheet

Answer 2

&ltlink rel=”stylesheet” href=”” type=”text/css” />

Question 3

What is the format of the ‘type’ attribute in a link tag?

Answer 3

It's a mimetype
type/subtype
ex:
text/css
image/apng
image/avif

Question 4

An html page can have multiple stylesheets

t or f

Answer 4

T

Question 5

create a series of css rules for a page (not linked, not inline)

Answer 5

&ltstyle type=”text/css”>
h1 {color:red;}
p {color:blue;}
&lt/style>

Question 6

create an inline css rule

Answer 6

&lt p style=”color:red; more”>

Question 7

Do a universal selector (all elements on page)

Answer 7

• { }

Question 8

Select by element type

Select multiple elements by types

Answer 8

h3 { }
h1, h2, h3 { }
elementtype {}

Question 9

Select a class

Answer 9

.classname {}

Question 10

Select a class within a certain element type

Answer 10

h1. classname {}

elementtype. classname {}

Question 11

select an id

Answer 11

idname {}

Question 12

select an id within a certain element type

Answer 12

h1#idname {}

elementtype#idname {}

Question 13

select an id within a certain class and element type

Answer 13

h1#idname.classname {}
or
h1.classname#idname
order doesn’t matter

Question 14

select target elements that are DIRECT children of another

Answer 14

parent>child

no spaces

Question 15

Targeting children works with other chained elements
t or f
ex:

p#b>span.c {
color: red;
}

Answer 15

T

Question 16

Target all direct children of another element

Answer 16

div>*

Question 17

What happens with this code? 
&ltstyle>
  div#b>div.c {
    color: red;
  }
&lt/style>

&ltdiv id="b">
  fsad
  &ltdiv class="a">
    afds
    &ltdiv class="c">
      afds
    &lt/div>
  &lt/div>
&lt/div>

Answer 17

nothing

> only targets direct children

Question 18

Target the specific children/grandchildren of the specific element

Answer 18

div#b div.c {
color: red;
}

Question 19

What style is changed

&ltstyle type=”text/css”>

div#a div#b>div {
color: red;
}

&lt/style>

&ltdiv id="a">
  asdfasfd
  &ltdiv>
    asdfasfd
    &ltdiv id="b">
      asdfasfd
      &ltdiv>
        asdfasfd
      &lt/div>
    &lt/div>
  &lt/div>
&lt/div>

Answer 19

the div child of div#b

Question 20

Target the immediate next sibling only

Answer 20

h1+p {}

Question 21

Target all next siblings

Answer 21

h1~p {}

Question 22

Which divs are affected by the style?
  div#b+div {
    color: red;
  }
&ltdivid="a">
  aaa
&lt/div>
&ltdiv id="b">
  aaa
&lt/div>
&ltdiv id="c">
  aaa
&lt/div>
&ltdiv id="d">
  aaa
&lt/div>
&ltdivid="e">
  aaa
&lt/div>

Answer 22

c

Question 23

What happens if two styles define the same element?

Answer 23

if two have have the same precedence, whichever was process most recently is used.

Question 24

Which of these specificty rules are true
h1 is more specific than *
p is more specific than p b
p#intro is more specific than p
class is more specific than id

Answer 24

t
F
t
F

Question 25

Force a rule to take precedence

Answer 25

!important
after the property:
p b {
color: blue !important;}

Question 26

Are colour properties inherited?

Answer 26

yes

Question 27

Are background colour and border properties inhereted?

Answer 27

no

Question 28

t or f
Elements can have multiple ids
A unique ID can only be in 1 element

Elements can have multiple classes
A unique class can only be in 1 element

Answer 28

False, 1 id per element,
True, 1 element per id

True, multiple classes per element,
False, many elements per class

Question 29

Does the order of property values in a CSS rule matter?

box-shadow: #777777 50px 50px 50px
vs
box-shadow: 50px 50px 50px #777777
?

Answer 29

No

but you can’t interrupt the 50px 50px 50px

Question 30

Write this in a simpler way:
.read {
  color: white;
  background-color: black;
  /* several unique declarations */
}

.unread {
  color: white;
  background-color: black;
  /* several unique declarations */
}

Answer 30

.read,
.unread {
  color: white;
  background-color: black;
}

.read {
  /* several unique declarations */
}

.unread {
  /* several unique declarations */
}

Question 31

add multiple classes to the same element

Answer 31

class=”class1 class2”

use a space

Question 32

select an element only if it has 2 specific classes

Answer 32

.class1.class2

Question 33

What is a type selector

Answer 33

an element selector

Question 34

Can you chain type selector

divdiv

Answer 34

no
You can select divs that are children of other divs
but an element cannot be a div and a div. Doesn’t make sense

Question 35

When should you use the ID selector

Answer 35

Sparingly

Only when you really need to select only one of something.

Question 36

What is selected
&lt!– index.html –>

&ltdiv class="ancestor"> &lt!-- A -->
  &ltdiv class="contents"> &lt!-- B -->
    &ltdiv class="contents"> &lt!-- C -->
    &lt/div>
  &lt/div>
&lt/div>

&ltdiv class=”contents”>&lt/div> &lt!– D –>

WITH

/* styles.css */

.ancestor .contents {
  /* some declarations */
}

Answer 36

B
not C
because the space only selects direct children

Question 37

Does this selector work?

.one .two .three .four

Answer 37

yes

but don’t do it in most cases

Question 38

Which is more specific:
/* rule 1 */
.class.second-class {
  font-size: 12px;
}

/* rule 2 */
.class .second-class {
  font-size: 24px;
}

Answer 38

same
both involve 2 classes.
combinator don’t add specificity

Question 39

Which is more specific:
/* rule 1 */
#subsection .list {
  background-color: yellow;
  color: blue;
}

/* rule 2 */
#subsection .main .list {
  color: red;
}

Answer 39

rule 2 because it has more classes

Question 40

Name what the following descendant combinators do

• ’ ‘ (just a space)
• >
• +
• ~

Answer 40

descendant combinator(space) (all descendants)

child combinator(>) (all direct children)

forward adjacent sibling combinator(+)

general forward sibling combinator(~)

Question 41

How do you calculate a value in CSS?

Answer 41

calc( )

Question 42

How do specificity numbers work? like 0,0,0,0

Answer 42

They go:
inline style attribute, ID, class/pseudoclass attribute, elements
Whichever number is bigger has greater specificity

In otherwords:
If the element has inline styling, that automatically1 wins (1,0,0,0 points)
For each ID value, apply 0,1,0,0 points
For each class value (or pseudo-class or attribute selector), apply 0,0,1,0 points
For each element reference, apply 0,0,0,1 point

Question 43

Select an element if that element is the first, last, or nth child, or nth from the end

Answer 43

\:last-child
\:first-child
\:nth-child(number)
\:nth-child(3n) for every third element (starts from 0)
(can do 'even' or 'odd')
\:nth-last-child

Question 44

select the element with no parents

usuaslly the HTML tag

Answer 44

:root

Question 45

Select elements with no children

Select elements that don’t have an siblings

Answer 45

:empty

:only-child

Question 46

What is a pseudo-element and a pseudo class

Answer 46

A pseudo-class gives a different way to target elements in our HTML

A pseudo-element gives us a way to target something that isn’t usually targettable.

Question 47

Target bullet points or numbers

Answer 47

::marker

Question 48

Target first letter or first line

Answer 48

::first-letter

::first-line

Question 49

Target highlighting (when you make a selection with the mouse)

Answer 49

::selection

Question 50

Target “before” or “after” an element

Answer 50

::before

::after

Question 51

Select an element’s attribute

Answer 51

[attribute] - This general selector will select anything where the given attribute exists. Its value doesn’t matter.

selector[attribute] - Optionally we can combine our attribute selectors with other types of selectors, such as class or element selectors.

[attribute=”value”] - To get really specific, we can use = to match a specific attribute with a specific value.

Question 52

Select the first element of a certain type
Select the nth element of a certain type
select the last element of certain type

Answer 52

:first-of-type
:nth-of-type
:last-of-type

Question 53

Select every 2nd element, starting from the 3rd

Answer 53

:nth-of-type(2n+3)

it starts from the element of the +. the first ‘n’ is 0

Question 54

Target the only element of its type

Answer 54

:only-of-type

/* Selects each <p>, but only if it is the */
/* only </p><p> element inside its parent */
p:only-of-type {
  background-color: lime;
}</p>

Question 55

pseudoclass selector select empty elements

Answer 55

:empty

Question 56

Select “not” of an element

Answer 56

:not(x)

Question 57

Select elements attributes that begin with certain letters
Select elements attributes that end with certain letters
Select elements attributes that contain certain letters

Answer 57

[attribute^="swim"]
will get "swimwear" and "swimming"
[attribute$="ing"]
[attribute*="wear"]
will get swimwear and wearing