Week 4

Question 1

What does this do? What is its default behaviour?
body { background-image:url(‘java.png’)
}

Answer 1

Sets the background as image. By default the image will repeat horizontally and vertically.

Question 2

T/F - You can specify all properties in a property when using the background shorthand

Answer 2

True.

body {

}

Question 3

T/F - You can specify all properties in a single property when using the background shorthand

Answer 3

True.

body {
background:color imageurl etc.
}

Question 4

T/F - color: is used to set the background color in CSS

Answer 4

False. It’s used to set text color.

Question 5

I would use this if I wanted to put an overline, line-through, or underline on my text

Answer 5

text-decoration

Question 6

I would use this if I wanted to specify that certain text should be all uppercase or lowercase

Answer 6

text-transform

Question 7

Cascading algorithm - 4 rules

Answer 7

1. Importance - Imp. of each declaration (!important)
2. Specificity - Of the CSS selectors
3. Order - of the declarations in the source code
4. Inheritance

Question 8

<p>
Very pretty, very stylish
</p>

p {
color: blue;
}
p {
color: red;
}

What color is the text?

Answer 8

Red, due to order

Question 9

Location - When styles conflict the _______ wins

Answer 9

nearest (most recently applied)

Question 10

Internal CSS
Browser
Inline Style
External CSS

List them from weakest to strongest

Answer 10

Browser > External CSS > Internal CSS > Inline Style

Question 11

T/F - The more specific the selector, the stronger the rule

Answer 11

True

Question 12

p id=”text”>
Very pretty, very stylish
p>

text {
color: blue;
}
p {
color: red;
}

What color is the text?

Answer 12

Blue, since it’s more specific (id is the most specific there is)

Question 13

p id=”text”>
Hello World!
p>

(id)text {
color: blue;
}
p {
color: red;
text-decoration: underline;
}

What colour is the text?

Answer 13

Blue with an underline (Specificity with the ID)

Question 14

div
p id=”text”
Hello World!
/p
/div

div {
color: red;
text-decoration: underline;
}

What colour will the text be?

Answer 14

Red, Since there’s no conflict the red is inherited from the div parent

Question 15

div
p id=”text”
Hello World!
p
div

(id)text {
color: blue;
}
div {
color: red;
text-decoration: underline;
}

What colour will the text be?

Answer 15

Blue, with a red underline - Text is specific, but the text-decoration is set in the div class, so it’s unaffected

Question 16

T/F - Browsers have a default style

Answer 16

True

Question 17

(*){
margin: 0
padding: 0
}
This resets padding and margins. Why?

Answer 17

The Universal Selector * matches every element, which makes it good for broad actions like above

Question 18

T/F - You can only include multiple style sheets through the HTML document

Answer 18

False. You can also use the @import tool to link multiple css pages together

Question 19

In CSS, units of measurement are ________ units and ________ units

Answer 19

relative and absolute units

Question 20

Relative units are based on the _____ of the root font, while absolute units have a ____-_____ size

Answer 20

size, what absolute units have a real-world size

Question 21

1em is equal to the current

Answer 21

font size, meaning it’s a relative unit

Question 22

1pt is equal to 1/72 of an inch, meaning

Answer 22

It’s an absolute unit, px is the same (neither scale)

Question 23

100% is equal to

Answer 23

The current font size, meanings it’s a relative unit (scales)

Question 24

Viewport-percentage lengths: __ and __. These are relative to the size of the initial containing block. How much is 1 __ unit or __ unit compared to the initial containing block?

Answer 24

vw and vh. They’re 1% of the height/width

This is what it looks like
body { width: 80vw; }
main { width: 90%;
min-height: 100vh; }

Question 25

rem is the font size ________ to the ____ element of the web page

Answer 25

relative to the root element (size of the text in the html element)

Question 26

Quickly name what these font properties do
font-family
font-size
font-style
font-weight
font-variant

Answer 26

font-family - type of font
font size - size of font (can be units other than pt)
font-style - italic, oblique, normal
font-weight - bold or light
font-variant - normal, small caps

Question 27

This selector allows you to use a font even if it’s not installed on the user’s computer

Answer 27

@font-face

Question 28

In the CSS Box model

width = content width + / _______ + / b_____ + / ___g__

You can also set the height and width of the element using the h/w properties

Answer 28

In the CSS Box model

height = content height + L/R padding + L/R border + L/R margin

You can also set the height and width of the element using the h/w properties

Question 29

T/F - Padding defines a space between the element border and the element content

Answer 29

True

padding-top: 20px
Shorthand= padding: 20px

Question 30

T/F - Borders can be grooved, ridged, outset, inset, dotted

Answer 30

True. They can also be set to none

Question 31

“In CSS, the adjoining margins or two or more boxes can combine to from a single margin” Where does this definition come from? What about horizontal margins?

Answer 31

That’s the W3C definition of collapsing margins. Horizontal margins never collapse.