CSS

Question 1

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

Answer 1

A rule set has a selector and a declaration block
A declaration block consists of at least one declaration
A declaration is one property and one value

Question 2

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

Answer 2

“.className”

Question 3

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

Answer 3

Just use the letters of the element without the “<>”, case sensitive
Separate by commas if grouping multiple (called a group selector)

Question 4

In CSS, how do you select an element by itsidattribute?

Answer 4

#elementID

Question 5

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

Answer 5

HEX codes
RGB (or RGBA with CSS3)
Names (white, black, blue, red)
HSLA (CSS3)

Question 6

What CSS properties make up the box model?

Answer 6

Margin, border, padding

Technically the content is also part of the box model, so width and height can also be properties of the box model

Question 7

Which CSS property pushes boxes away from each other?

Answer 7

Margin

Question 8

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

Answer 8

Padding

Question 9

What is a pseudo-class?

Answer 9

Keyword added to selectors to target elements under certain states
Class applied by the browser (not by the developer) under certain situations

Question 10

What are CSS pseudo-classes useful for?

Answer 10

They can be useful for responding to users, altering behavior of elements that makes it easier for users to understand the intended uses. It also makes the page feel more responsive/interactive.
Style elements based not just on content but external factors to the content. (History, status, position)

Question 11

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

Answer 11

px, percentage (% of 16px, the default) rem, and ems (width of the letter “m”)

Question 12

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

Answer 12

“font-family”

Question 13

What is the defaultflex-directionof aflexcontainer?

Answer 13

The flex-direction of a container will be row by default, meaning items will be arranged horizontally from left-to-right

Question 14

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

Answer 14

It will be nowrap by default, meaning all items will fit on one line.

Question 15

What is the unit vh?

Answer 15

Viewport height, 100vh is 100% of the viewport height.
Not commonly used because we don’t commonly set height with webpages.
May be used to set a container to be a certain height relative to the viewport rather than a height based on the content inside (centering an image on a page).

Question 16

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

Answer 16

div elements are block elements

Question 17

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

Answer 17

row (left to right)

Question 18

What is the purpose of the container class in the layout class system?

Answer 18

Holds the rows and columns of the page layout

Generally only has a max-width and a margin

Question 19

What is the purpose of the row class in the layout class system?

Answer 19

Sections off vertical chunks of content in the page
Is usually a flexbox (display: flex)
Contains columns

Question 20

What is the purpose of the column class in the layout class system?

Answer 20

Sections off horizontal chunks of content in the page
Each column class should have only a width value
Can contain rows (which would contain further columns)

Question 21

What is the difference between a utility class and a semantic class?

Answer 21

Utility classes are named by what they do and are highly reusable (example: .bold-text)
Semantic classes are named by what they refer to and are highly specific (example: .about-section)

Question 22

Why should CSS rules (almost) never apply to IDs?

Answer 22

Because IDs have to be completely unique, rulesets with ID selectors are never reusable! Class selectors are generally better

Question 23

How long should utility classes generally be?

Answer 23

Usually around 2-3 declarations

Question 24

What is thedefaultvalue for thepositionproperty of HTML elements?

Answer 24

position: static;

Question 25

How does settingposition: relativeon an element affect document flow?

Answer 25

It doesn’t affect document flow, things are positioned as they should be

Question 26

How does settingposition: relativeon an element affect where it appears on the page?

Answer 26

It doesn’t affect where it appears, but the element can now be shifted from that position using top, bottom, left, and right (takes, px, %, and ems)

Question 27

How does settingposition: absoluteon an element affect document flow?

Answer 27

The element is taken out of the document flow and other elements act as if it isn’t there

Question 28

How does settingposition: absoluteon an element affect where it appears on the page?

Answer 28

Once the other elements are properly situated, the absolute element that was taken out of its place now sits relative to the first non-static/non-positioned parent.
If there is no non-static/non-positioned parent, the element is positioned relative to its containing block (in the code, what it’s nested under)

Question 29

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

Answer 29

Because absolutely positioned elements are positioned relative to the closest non-static/non-positioned ancestor, you would make the containing block non-static/non-positioned (e.g. set the containing block to position: relative)

Question 30

What are the four box offset properties?

Answer 30

top, bottom, left, right

Question 31

What are the four components of “the Cascade”.

Answer 31

Source Order
Inheritance
Specificity
!important

Question 32

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

Answer 32

If an element has two competing CSS rules with the same level of specificity applied, the one that comes later in the stylesheet takes precedence.
Documents loaded in later in the HTML `` take precedence over earlier ones too

Question 33

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

Answer 33

Some CSS properties are inherently inherited from parent elements if not specified.

Question 34

List the three selector types in order of increasing specificity.

Answer 34

element < class < id

Question 35

Why is using!importantconsidered bad practice?

Answer 35

It breaks the natural cascade which makes it difficult to debug issues

Question 36

What does the transform property do?

Answer 36

The transform property allows an element to be scaled, skewed, rotated, or translated depending on what transform-function is used as the value
Elements are rendered on a coordinate plane, and transform allows us to modify the coordinate space (which has origin at the top-left corner)

Question 37

Give four examples of CSS transform functions.

Answer 37

rotate, translateY, skew, scale, translateX

Question 38

Thetransitionproperty is shorthand for which four CSS properties?

Answer 38

transition-property
transition-duration
transition-delay
transition-timing-function

Question 39

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

Answer 39

Screen width (min-width), screen height, orientation, aspect ratio, ability to have hover

Question 40

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

Answer 40

The viewport meta tag, like meta name="viewport" content="width=device-width, scale-resolution=1"

Question 41

What is abreakpointin responsive Web design?

Answer 41

A breakpoint is a condition that, when met, will adjust the CSS of the page to be responsive to the device/conditions

Question 42

What is the advantage of using a percentage (e.g.50%)widthinstead of a fixed (e.g.px)widthfor a “column” class in a responsive layout?

Answer 42

Using pixels would create potentially inconsistent breakpoints across devices with various numbers of pixels/scaling rules. Percentages are more universal and are more closely related to how the content should be displayed.

Question 43

If you introduce CSS rules for a smallermin-width_after_the styles for a largermin-widthin your style sheet, the CSS rules for thesmallermin-widthwill “win”. Why is that?

Answer 43

The “winning” rule for conflicting CSS rules of the same specificity will be the one later in the sheet. Of course, the condition for the smaller min-width will still be true when the screen size exceeds the larger one, so it is still true. (Source Order)