CSS

Question 1

• What are the names of the individual pieces of a CSS rule?

Answer 1

o Selector, declaration block, property, value.

Question 2

• In CSS, how do you select elements by their class attribute?

Answer 2

o Use a period “.class”

Question 3

• In CSS, how do you select elements by their type?

Answer 3

o Simply write the element name – nothing else.

Question 4

• In CSS, how do you select an element by its id attribute?

Answer 4

o Use a # sign

Question 5

• Name three different types of values you can use to specify colors in CSS.

Answer 5

o rbg, hex codes, name of colors, etc.

Question 6

• Name three different types of values you can use to specify colors in CSS.

Answer 6

o rgb, hex codes, name of colors, etc.

Question 7

• What CSS properties make up the box model?

Answer 7

o Border, margin, padding (page 307), and content

Question 8

• Which CSS property pushes boxes away from each other?

Answer 8

o The MARGIN is an invisible space around your box.
o It pushes other elements AWAY from the box.
o Margins can have positive or negative values. Setting a negative margin on one side of your box can cause it to overlap other things on the page. Whether you are using the standard or alternative box model, the margin is always added after the size of the visible box has been calculated.

Question 9

• Which CSS property add space between a box’s content and its border?

Answer 9

o Padding
o Padding is the space between the border of a box and any content contained within it. Adding padding can increase the readability of its contents.
 Padding is additional space – and that comes with problems.
 Box-sizing border box – it makes it so that the sizing is applied to the border and that which is inside of it.

Question 10

• What is a pseudo-class?

Answer 10

o	A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).
o	For example, :hover can be used to change a button's color when the user's pointer hovers over it.

Question 11

• What are CSS pseudo-classes useful for?

Answer 11

o SCALABILITY – no need to write long code if you can have it uniform.
o Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on certain form elements), or the position of the mouse (like :hover, which lets you know if the mouse is over an element or not).
o Applying style
o nth child

Question 12

• Name two types of units that can be used to adjust font-size in CSS.

Answer 12

o em
o px
o ##%

Question 13

• What CSS property controls the font used for the text inside an element?

Answer 13

o font-family
o The font CSS shorthand property sets all the different properties of an element’s font. Alternatively, it sets an element’s font to a system font.

Question 14

• What is the default flex-direction of a flex container?

Answer 14

o row

Question 15

• What is the default flex-wrap of a flex container?

Answer 15

o No wrap

Question 16

• Why do two div elements “vertically stack” on one another by default?

Answer 16

o They are block level elements

Question 17

• What is the default flex-direction of an element with display: flex?

Answer 17

o Row

o Purpose of the container class – is the boundary for all of our content.

Question 18

• What is the default value for the position property of HTML elements?

Answer 18

o Static or Normal flow
o Every block-level element appears on a new line – causing each item to appear lower down the page than the previous one.
o Even if you specify the width of the boxes and there is space for two elements to sit side by side, they will not appear next to each other.
o The paragraphs appear one after the other, vertically down the page.

Question 19

• How does setting position: relative on an element affect document flow?

Answer 19

o This moves an element from the position it would be in normal flow, shifting it to the top, right, bottom, or left of where it would have been placed.
o This DOES NOT AFFECT the position of surrounding elements.
o They stay in the position they would be in normal flow.
 THINK INDENTATION?

Question 20

• How does setting position: relative on an element affect where it appears on the page?

Question 21

• How does setting position: absolute on an element affect document flow?

Answer 21

o Absolute positions the element in relation to its CONTAINING element
o It is taken OUT of normal flow – meaning that it DOES NOT affect the position of any surrounding elements
 They ignore the space it would have taken up.
o ABSOLUTE positioned elements move as users scroll up and down the page.
o It is COMPLETELY REMOVED

Question 22

• How does setting position: absolute on an element affect where it appears on the page?

Answer 22

o An element with a position absolute will appear at the TOP LEFT
 It will sit at the top of its nearest ancestor that is NOT STATIC

Question 23

• How do you constrain an absolutely positioned element to a containing block?

Question 24

• How would you make it stop at a certain level/section?

Answer 24

o Position fixed would work / but there’s more to it.

o Set a position property on that element and set it to NOT STATIC

Question 25

• What are the four box offset properties?

Answer 25

o Top, left, right, bottom

Question 26

• What are the four components of "the Cascade".

Answer 26

o Source order, inheritance, specificity, important.

Question 27

• What does the term "source order" mean with respect to CSS?

Answer 27

o Source order is the process in CSS of deciding what styling gets applied to an element based on the order of the rule set in your style sheet. o Those that are lower are of more importance than the ones above in the stylesheet.

Question 28

• How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?

Answer 28

o Inheritance – it’s not applicable to everything… only a subset… any old property can be made inherit by using that property, but you don’t want to do that. o Text stuff gets inherited.

Question 29

• List the three selector types in order of increasing specificity.

Answer 29

``` o Type selector, class selector, and ID [element, class, and ID IN THAT ORDER] ```

Question 30

• Why is using !important considered bad practice?

Answer 30

o It reverses the cascade and overrides EVERYTHING.

Question 31

• What does the transform property do?

Answer 31

o The transform CSS property lets you rotate, scale, skew, or translate an element. o It modifies the coordinate space of the CSS visual formatting model.

Question 32

• Give four examples of CSS transform functions.

Answer 32

``` o Matrix o Translate o Scale o Rotate o Skew ```

Question 33

• Give two examples of media features that you can query in an @media rule.

Answer 33

o Min width, max width

Question 34

• Which HTML meta tag is used in mobile-responsive web pages?

Answer 34

o Viewport meta tag o The existence of this element is to fix a different fix – o In the early days of mobile browsing, websites on phones like blackberries were very small – they were designed for larger screens. o To mitigate that, they implemented a “fix”, if your screen was very small

Question 35

• What is a breakpoint in responsive Web design?

Answer 35

o A breakpoint in a responsive design is the “point” at which a website's content and design will adapt in a certain way in order to provide the best possible user experience. o Boundary where the page design changes

Question 36

• What is the advantage of using a percentage (e.g. 50%) width instead of a fixed (e.g. px) width for a "column" class in a responsive layout?

Answer 36

o Advantage – it will calculate a percentage vs. pixels being fixed.

Question 37

• If you introduce CSS rules for a smaller min-width after the styles for a larger min-width in your style sheet, the CSS rules for the smaller min-width will "win". Why is that?

Answer 37

o Because it loads in SOURCE ORDER. o Only reason media queries work is because of SOURCE ORDER. o They must be on the bottom of the doc so that it can be applied to the above css rulesets. o If you have regular css rules below the media queries, that’s trouble. o Media queries MUST be in the same stylesheet as that rule!!