10 Introducing CSS and Selectors Flashcards

1
Q

What are the 3 parts to a CSS rule?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Use a css style sheet

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

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

A
It's a mimetype
type/subtype
ex:
text/css
image/apng
image/avif
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

An html page can have multiple stylesheets

t or f

A

T

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

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

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

create an inline css rule

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Do a universal selector (all elements on page)

A
  • { }
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Select by element type

Select multiple elements by types

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Select a class

A

.classname {}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Select a class within a certain element type

A

h1. classname {}

elementtype. classname {}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

select an id

A

idname {}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

select an id within a certain element type

A

h1#idname {}

elementtype#idname {}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

select an id within a certain class and element type

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

select target elements that are DIRECT children of another

A

parent>child

no spaces

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

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

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

A

T

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Target all direct children of another element

A

div>*

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q
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>
A

nothing

> only targets direct children

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

Target the specific children/grandchildren of the specific element

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

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>
A

the div child of div#b

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Target the immediate next sibling only

A

h1+p {}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

Target all next siblings

A

h1~p {}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q
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>
A

c

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

What happens if two styles define the same element?

A

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

24
Q
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
25
Force a rule to take precedence
!important after the property: p b { color: blue !important;}
26
Are colour properties inherited?
yes
27
Are background colour and border properties inhereted?
no
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 ```
False, 1 id per element, True, 1 element per id True, multiple classes per element, False, many elements per class
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 ?
No | but you can't interrupt the 50px 50px 50px
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 */ } ```
``` .read, .unread { color: white; background-color: black; } ``` ``` .read { /* several unique declarations */ } ``` ``` .unread { /* several unique declarations */ } ```
31
add multiple classes to the same element
class="class1 class2" | use a space
32
select an element only if it has 2 specific classes
.class1.class2
33
What is a type selector
an element selector
34
Can you chain type selector | divdiv
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
35
When should you use the ID selector
Sparingly | Only when you really need to select only one of something.
36
What is selected <!-- index.html --> ``` <div class="ancestor"> <!-- A --> <div class="contents"> <!-- B --> <div class="contents"> <!-- C --> </div> </div> </div> ``` <div class="contents"></div> <!-- D --> WITH /* styles.css */ ``` .ancestor .contents { /* some declarations */ } ```
B not C because the space only selects direct children
37
Does this selector work? | .one .two .three .four
yes | but don't do it in most cases
38
``` Which is more specific: /* rule 1 */ .class.second-class { font-size: 12px; } ``` ``` /* rule 2 */ .class .second-class { font-size: 24px; } ```
same both involve 2 classes. combinator don't add specificity
39
``` Which is more specific: /* rule 1 */ #subsection .list { background-color: yellow; color: blue; } ``` ``` /* rule 2 */ #subsection .main .list { color: red; } ```
rule 2 because it has more classes
40
Name what the following descendant combinators do - ' ' (just a space) - > - + - ~
descendant combinator(space) (all descendants) child combinator(>) (all direct children) forward adjacent sibling combinator(+) general forward sibling combinator(~)
41
How do you calculate a value in CSS?
calc( )
42
How do specificity numbers work? like 0,0,0,0
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 ```
43
Select an element if that element is the first, last, or nth child, or nth from the end
``` :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 ```
44
select the element with no parents | usuaslly the HTML tag
:root
45
Select elements with no children | Select elements that don't have an siblings
:empty | :only-child
46
What is a pseudo-element and a pseudo class
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.
47
Target bullet points or numbers
::marker
48
Target first letter or first line
::first-letter | ::first-line
49
Target highlighting (when you make a selection with the mouse)
::selection
50
Target "before" or "after" an element
::before | ::after
51
Select an element's attribute
[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.
52
Select the first element of a certain type Select the nth element of a certain type select the last element of certain type
:first-of-type :nth-of-type :last-of-type
53
Select every 2nd element, starting from the 3rd
:nth-of-type(2n+3) | it starts from the element of the +. the first 'n' is 0
54
Target the only element of its type
:only-of-type ``` /* Selects each

, but only if it is the */ /* only

element inside its parent */ p:only-of-type { background-color: lime; }

```
55
pseudoclass selector select empty elements
:empty
56
Select "not" of an element
:not(x)
57
Select elements attributes that begin with certain letters Select elements attributes that end with certain letters Select elements attributes that contain certain letters
``` [attribute^="swim"] will get "swimwear" and "swimming" [attribute$="ing"] [attribute*="wear"] will get swimwear and wearing ```