CSS

Question 1

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

Answer 1

A CSS rule contains two parts: a selector and a declaration.

p {
font-family: Arial;}

‘p’ is the selector and ‘font-family: Arial;’ is the declaration.

Selectors indicate which element the rule applies to. The same rule can apply to more than one element if you separate the element names with commas.

Declarations indicate how the elements referred to in the selector should be styled. Declarations are split into two parts (a property and a value), and are separated by a colon.

Question 2

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

Answer 2

Matches an element whose class attribute has a value that matches the one specified after
the period (or full stop) symbol.

.note {} = Targets any element whose class attribute has a value of note

p.note {} = Targets only < p > elements whose class attribute has a value of note

Question 3

In CSS, how do you select elements by their tag name?

Answer 3

Using the type selector. Matching their element name.

h1, h2, h3 {} = Targets the < h1 >, < h2 >, and < h3 > elements.

Question 4

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

Answer 4

introduction {} = Targets the element whose id attribute has a value of introduction.

Matches an element whose id attribute has a value that matches the one specified after
the pound or hash symbol.

Question 5

What are inside of CSS declarations?

Answer 5

CSS declarations sit inside curly brackets and each is made up of two parts: a property and a value, separated by a colon. You can specify several properties in one declaration, each separated by a semi-colon.

h1, h2, h3 {
font-family: Arial;
color: yellow;}

Properties: font-family, color
Values: Arial, yellow

Question 6

CSS Universal Selector

Answer 6

Applies to all elements in the document. * {} Targets all elements on the page.

Question 7

CSS Child Selector

Answer 7

Matches an element that is a direct child of another.

li>a {}

Targets any < a > elements that are children of an < /a >< li >< a > element (but not other
< /a >< a > elements in the page) < /a >< /li >

Question 8

CSS Descendant Selector

Answer 8

Matches an element that is a descendent of another specified element (not just a direct child of that element).

Targets any < a > elements that sit inside a < p > element, even if there are other elements nested between them.

Question 9

CSS Adjacent Sibling Selector

Answer 9

Matches an element that is the next sibling of another.

h1+p {}

Targets the first < p > element after any < h1 > element (but not
other < p > elements).

Question 10

CSS General Sibling Selector

Answer 10

Matches an element that is a sibling of another, although it does not have to be the directly preceding element.

h1~p {}

If you had two < p > elements that are siblings of an < /p >< h1 > element, this rule would apply to both.< /h1 >

Question 11

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

Answer 11

RGB values (example: rgb(100,100,90))
Hex Codes (example: #ee3e80)
Color Names (example: DarkCyan)

Question 12

What CSS properties make up the box model?

Answer 12

Content box: The area where your content is displayed; size it using properties like inline-size and block-size or width and height.

Padding box: The padding sits around the content as white space; size it using padding and related properties.

Border box: The border box wraps the content and any padding; size it using border and related properties.

Margin box: The margin is the outermost layer, wrapping the content, padding, and border as whitespace between this box and other elements; size it using margin and related properties.

.box {
width: 350px;
height: 150px;
margin: 10px;
padding: 25px;
border: 5px solid black;
}

Question 13

Which CSS property pushes boxes away from each other?

Answer 13

Margin property

Question 14

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

Answer 14

Padding property

Question 15

What is a pseudo-class?

Answer 15

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

Question 16

What are CSS pseudo-classes useful for?

Answer 16

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).

Question 17

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

Answer 17

Pixels, percentages, ems

Question 18

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

Answer 18

font-family

Question 19

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

Answer 19

The default flex-direction of a flex container is row.

Question 20

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

Answer 20

By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.

nowrap (default): all flex items will be on one line

wrap: flex items will wrap onto multiple lines, from top to bottom.

wrap-reverse: flex items will wrap onto multiple lines from bottom to top.

Question 21

Flex - does this value apply to all within a container?

Answer 21

No, flex is only applied directly to the child, and not the grandchild. If we want flex on all descendants, we would have to apply it to all parent elements.

Question 22

Which axis are you working with with the property justify-content?

Answer 22

The horizontal axis (main axis, depending on what is set to default by flex-direction))

Question 23

Which axis are you working with if you are using the property align-items?

Answer 23

The vertical axis (the secondary axis, depending on what is set to default by flex-direction)

Question 24

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

Answer 24

Because they are block elements. By default, block elements will vertically stack.

Question 25

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

Answer 25

Horizontal / Row

Question 26

Will the contents be contained in an element?

Answer 26

No, contents will not be contained within an element. You will have to adjust the contents within the element (CSS Layout exercise with Smash Bros. characters, the content will pay no respect to its parent)

Question 27

How do you maintain a specific shape? (i.e. images within an element or container)

Answer 27

Using hard coded values like px will prevent the size from changing as the page changes

Question 28

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

Answer 28

Static

Question 29

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

Answer 29

It moves the item it was applied to, but doesn’t affect the rest of the document flow. (Pokemon horizontal document)

Question 30

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

Answer 30

It makes the element get positioned relative to where it would be in the normal document flow.

Question 31

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

Answer 31

Surrounding elements ignore the space the absolute positioned element would have taken up. The absolute item no longer has a place in the document flow.

Question 32

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

Answer 32

The element is placed relative to where it is in its containing (parent) element, so make sure the containing element is set to relative also. It will go back to the first HTML element that is not static.

Question 33

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

Answer 33

Set position of containing element relative to the current element (Setting a non static property to the positioned element)

Question 34

What are the four box offset properties?

Answer 34

top, right, bottom, left

Question 35

What are the four components of “the Cascade”.

Answer 35

1. Source order
2. Inheritance
3. Specificity
4. !important

Question 36

What does the term “source order” mean with respect to CSS?

Answer 36

In situations where a property has been declared for an element only once, this is a very straight-forward process. For instance:

p {
color: red;
}

There is no ambiguity here. Since there are no other competing styles, all p elements in the document this CSS is applied to would have a red text color.

However, it is common in CSS development to declare styling for an element on the same property multiple times throughout your stylesheet. For instance, given the following HTML:

<h1>Some News Headline</h1>

And the following CSS:

.news-headline {
font-size: 60px;
}

.medium-text {
font-size: 25px;
}
Both the news-headline and medium-text classes include a font-size property. So which style ultimately gets applied?

Source order is, simply put, the order that your CSS rules are written in your stylesheet. The styling provided for an element last in your stylesheet is the styling that will ultimately take effect. In this case the last font-size of 25px is applied.

Question 37

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

Answer 37

Inheritance is the process by which certain CSS properties on a child HTML element can receive value from a parent element, if no CSS for that property is directly declared on the child element.

Question 38

List the three selector types in order of increasing specificity.

Answer 38

CLASS, COLUMN, ID (from lowest to highest)

Question 39

Why is using !important considered bad practice?

Answer 39

CSS declarations marked as important override any other declarations within the same cascade layer and origin. Although technically, !important has nothing to do with specificity, it interacts directly with specificity and the cascade. It reverses the cascade order of stylesheets.

If declarations from the same origin and cascade layer conflict and one property value has the !important flag set, the important declaration is applied no matter the specificity. When conflicting declarations from the same origin and cascade layer with the !important flag are applied to the same element, the declaration with a greater specificity is applied.

Using !important to override specificity is considered a bad practice and should be avoided for this purpose. Understanding and effectively using specificity and the cascade can remove any need for the !important flag.

USE SOURCE ORDER TO DICTATE AND SPECIFICITY

Question 40

What does the transform property do?

Answer 40

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

Question 41

Give four examples of CSS transform functions.

Answer 41

matrix( ), matrix3d ( ), perspective ( ), rotate ( ), rotate3d ( ), scale( ), translate( )

Question 42

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

Answer 42

any-hover, any-pointer, aspect-ratio, color, color-gamut, color-index, device-aspect-ratio Deprecated, device-height Deprecated, device-width Deprecated, display-mode, dynamic-range, forced-colors, grid, height, hover, inverted-colors, monochrome, orientation, overflow-block, overflow-inline, pointer, prefers-color-scheme, prefers-contrast, prefers-reduced-motion, resolution, scripting, update, video-dynamic-range, width

Question 43

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

Answer 43

< meta name=”viewport” content=”width=device-width, initial-scale=1” >

Question 44

The transition property is shorthand for which four CSS properties?

Answer 44

The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.

Question 45

What is a breakpoint in responsive Web design?

Answer 45

The points at which a media query is introduced are known as breakpoints.

Question 46

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 46

There will be less width properties, px measurement needs to be exact for different devices

Maintains column size, even as the container stretches

Question 47

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 47

Because of the cascade facet, the source order