Intro to CSS (1 of 2) Flashcards
1) When the author describes the benefits of CSS, what does he say CSS controls?
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.
2) [True or False] Styles are applied in the order in which they are found, cascading down from external to local styles.
True
3) Why do browsers give end users so much control over how the page is viewed?
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.
4) What 2 parts make up a CSS rule?
Property and value
5) What separates the property from the value in a CSS rule?
Colon
6) As described by the author, what type of selector is global in nature?
Element selector
7) [Critical Thinking] Write a selector that only applies to p tags with a class named blue.
p.blue { Color: black }
8) [True or False] descendant selectors apply to any nested element, no matter how deep it’s found within the page structure.
True
9) [Critical Thinking] Write an example of a group selector.
h1, h2, p {
}
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.
True
11) Where are embedded styles typically located?
Located in the head block of a document
12) Why does the author discourage the use of inline styles?
Hard to overwrite and maintain over time. It’s cumbersome and inefficient to track down a line of code with inline styles.
13) What is the single sentence the author gives that sums up how rules are applied?
The last rule applied wins!
14) [True or False] Inheritance says that the child element will inherit the properties applied to the parent.
True
15) What does it mean when the author says that styles are cumulative?
Style rules add up. Broad selector-declarations are applied first, then more specific selector-declaration modifies last inherited rule.
16) What are at least two ways to ensure you CSS looks good everywhere?
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.
17) [Critical Thinking] Between normalize and reset stylesheets do you think you would use and why?
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.
18) Why does the author specify fallback fonts?
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.
18) What do margins represent and define?
Margin represents the space around an element and is used to define the space between elements.
19) How many properties does the border have?
Three: border-width, border-style, border-color
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.
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.
21) [Critical Thinking] The box sizing property accepts two values - which would you use and why?
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.
22) [Critical Thinking] How does additional padding effect an element set to a width of 100% inside a parent element?
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.
23) Which margins potentially collapse, horizontal or vertical?
Vertical
24) [Critical Thinking] Show an example rule that sets all 3 border properties to all 4 borders of an element.
p { Border: 2px solid red; }
25) When does the outline property provide?
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.
