Intro to CSS (1 of 2)

Question 1

1) When the author describes the benefits of CSS, what does he say CSS controls?

Answer 1

CSS controls the appearance of a website. By having CSS separate from HTML, you don’t have to change the structure to change the appearance of the website.

Question 2

2) [True or False] Styles are applied in the order in which they are found, cascading down from external to local styles.

Answer 2

True

Question 3

3) Why do browsers give end users so much control over how the page is viewed?

Answer 3

Goal of any website is to make the content accessible to the individual user. Browsers allow users to change the contrast ratio or font size of a website to fit users’ needs.

Question 4

4) What 2 parts make up a CSS rule?

Answer 4

Property and value

Question 5

5) What separates the property from the value in a CSS rule?

Answer 5

Colon

Question 6

6) As described by the author, what type of selector is global in nature?

Answer 6

Element selector

Question 7

7) [Critical Thinking] Write a selector that only applies to p tags with a class named blue.

Answer 7

p.blue { Color: black }

Question 8

8) [True or False] descendant selectors apply to any nested element, no matter how deep it’s found within the page structure.

Answer 8

True

Question 9

9) [Critical Thinking] Write an example of a group selector.

Answer 9

h1, h2, p {

}

Question 10

10) [True or False] The author advises to try to structure your code to add meaning to the content, without even thinking of the styling.

Answer 10

True

Question 11

11) Where are embedded styles typically located?

Answer 11

Located in the head block of a document

Question 12

12) Why does the author discourage the use of inline styles?

Answer 12

Hard to overwrite and maintain over time. It’s cumbersome and inefficient to track down a line of code with inline styles.

Question 13

13) What is the single sentence the author gives that sums up how rules are applied?

Answer 13

The last rule applied wins!

Question 14

14) [True or False] Inheritance says that the child element will inherit the properties applied to the parent.

Answer 14

True

Question 15

15) What does it mean when the author says that styles are cumulative?

Answer 15

Style rules add up. Broad selector-declarations are applied first, then more specific selector-declaration modifies last inherited rule.

Question 16

16) What are at least two ways to ensure you CSS looks good everywhere?

Answer 16

Use caniuse.com to find what CSS features are not supported in certain types of browsers. BrowserStack will render your webpage in multiple types of browsers and provide you with a screenshot to compare how your website is rendered across many browsers.

Question 17

17) [Critical Thinking] Between normalize and reset stylesheets do you think you would use and why?

Answer 17

I would use normalize stylesheet since normalize removes some of the default browser stylings, but keeps useful ones. Once I get a better grasp of CSS, I will use reset stylesheets so I have full control of how all the stylings are rendered on a webpage.

Question 18

18) Why does the author specify fallback fonts?

Answer 18

System fonts are fonts that are pre-installed on the computer. Use the system fonts as a fallback font when desired font is not available on browser/device.

Question 19

18) What do margins represent and define?

Answer 19

Margin represents the space around an element and is used to define the space between elements.

Question 20

19) How many properties does the border have?

Answer 20

Three: border-width, border-style, border-color

Question 21

20) [True or False] Padding is the space added to an element outside the border and is part of the overall width and height of an element’s calculation.

Answer 21

False, Padding is the space added to an element inside the border and is part of the overall width and height of an element calculation.

Question 22

21) [Critical Thinking] The box sizing property accepts two values - which would you use and why?

Answer 22

The two values are content box or border box. I would use border box value since the width of my element will be exactly the width I set. Content box width will be the value I set plus border and padding widths on both sides.

Question 23

22) [Critical Thinking] How does additional padding effect an element set to a width of 100% inside a parent element?

Answer 23

If an element’s width is set to 100%, the element will base the percentage size on the parent elements width. Since the content box is the default box sizing , the width of the content box will be the same size as the parent element’s width. Any additional padding will be added outside the content box size.

Question 24

23) Which margins potentially collapse, horizontal or vertical?

Answer 24

Vertical

Question 25

24) [Critical Thinking] Show an example rule that sets all 3 border properties to all 4 borders of an element.

Answer 25

p { Border: 2px solid red; }

Question 26

25) When does the outline property provide?

Answer 26

Outline property is frequently used for accessibility reasons to allow users to tab through a website. Outline property does not affect the position of nearby elements and can be hidden behind visuals with information for search engines to pick up.