CSS

Question 1

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

Answer 1

A selector which points to the html element to be styled –followed by a declaration block within curly braces.
The declaration block contains declarations consisting of properties and values, and are separated from one another with semicolons.

p {
font-family: sans-serif;

color: orange;

}

(Semicolons are not required after the last declaration, but it is good practice nonetheless.)

Question 2

In CSS, how do you select elements by theirclassattribute?

Answer 2

A period followed by the class name.

.note {
color: red;

}

Question 3

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

Answer 3

Simply state the element name.

h1 {

font-size: 20px;

}

Question 4

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

Answer 4

The pound key followed by the id name.

#introduction {
	
   color: blue;

}

Question 5

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

Answer 5

color names/keywords
color: purple;

HEX codes
color: #rrggbb;

RGB values
color: rgb(180, 180, 180);

(RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color.)
color: rgba(255, 99, 71, 0.5);

Question 6

What CSS properties make up the box model?

Answer 6

Border, margin, and padding.

Content is not a property of the box model, but it is still a piece of the entire 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 box-sizing: border-box ?

Answer 9

border-boxtells the browser to account for any border and padding in the values you specify for an element’s width and height.

If you set an element’s width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.


box-sizing: border-boxis the default styling that browsers use for thetable,select, andbuttonelements, and forinputelements whose type isradio,checkbox,reset,button,submit,color, orsearch.

Question 10

What is a pseudo-class?

Answer 10

Pseudo-classes allow you to change the appearance of elements when a user is interacting with them.

Question 11

What are CSS pseudo-classes useful for?

Answer 11

They are useful for visual representation to a user with interacting with a page, such as the color of a button changing color when their mouse is hovering over it, or a link changing colors after a user has clicked on it, so they can see which link they have already visited..

Question 12

Name at least two units of type size in CSS.

Answer 12

Pixels
Percentages
Em
Rem

Recommendation is to stick to rem over em
Em and rem are similar but work slightly differently

Em is the width of letter m
1 em is default font size

Rem stands for root em
default font size is 16px
so 2rem would be 32px

Rems maintain ratio, only need to change html font to affect everything else
Ems do not maintain ratio

Question 13

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

Answer 13

Font-family

Question 14

What is the defaultflex-directionof aflexcontainer?

Answer 14

row

Question 15

What is the defaultflex-wrapof aflexcontainer?

Answer 15

nowrap

Question 16

What does vh stand for?

Answer 16

vh stands for viewport height
Min-height: 100vh is setting it to 100% of the viewable webpage

Do not use vw (viewport width),
when it comes to width, just stick to percentages

Question 17

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

Answer 17

Because div elements are block elements and so therefore they always start on a new line, and take up as much width as is available.

Question 18

What is the defaultflex-directionof an element withdisplay: flex?

Answer 18

A row

Question 19

What is thedefaultvalue for thepositionproperty of HTML elements?

Answer 19

(Normal flow) position: static

Question 20

How does settingposition: relativeon an element affect document flow?

Answer 20

It does not affect document flow.

It does not affect the position of surrounding elements; they stay in the position they would be in normal flow..

And the element set to relative will stay in the same position as well until given offset values.

Question 21

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

Answer 21

Relative positioning moves an element in relation to where it would have been in normal flow.
You can move it lower, higher, to the left, or to the right

Question 22

How does settingposition: absoluteon an element affect document flow?

Answer 22

It is taken out of normal flow and no longer affects the position of other elements on the page.

Absolute positioning positions an element in relation to its containing element. It is taken out of normal flow, meaning that it does not affect the position of any surrounding elements (as they simply ignore the space it would have taken up).

Absolute positioned elements move as users scroll up and down the page.

Question 23

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

Answer 23

It appears in relation to its container, and moves as the user scrolls. You can specify where exactly it will sit on the page with the top, bottom, left, and right properties.

It can be stacked on top of the other elements since they ignore it.

Absolutely positioned elements position themselves within the first non-static ancestor they have.
If no non-static container exists, it positions itself within the viewport.

Question 24

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

Answer 24

Absolutely positioned elements position themselves within the first non-static ancestor they have.

Put it inside an ancestor block with a non-static positioning, like position: relative.
The element with relative position will still act the same (unless given offset properties), and the absolute positioned element will now be contained within that parent element.

Question 25

What are the four box offset properties?

Answer 25

Top, bottom, left, right

Question 26

What are the four components of “the Cascade”.

Answer 26

Source Order/Last Rule
If two sectors are identical, the latter of the two will take precedence.

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

Specificity
If one selector is more specific than the others, the more specific rule will take precedence over more general ones.

!important
You can add !important after any property value to indicate that it should be considered more important than other rules that apply to the same element.

Question 27

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

Answer 27

Source order is, simply put, the order that your CSS rules are written in your stylesheet. The styling provided for an elementlastin your stylesheet is the styling that will ultimately take effect.

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

Inheritance

In CSS,inheritancecontrols what happens when no value is specified for a property on an element.

CSS properties can be categorized into two types: inherited properties and non-inherited properties
When no value for an inherited property has been specified on an element, the element receives the value for that property that was applied to the parent.

This inheritance saves us from having to apply properties to every single element and results in simpler stylesheets. 

You can also force properties to inherit values by using an “inherit” value for a given property
	padding: inherit;

Question 29

List the three selector types in order of increasing specificity.

Answer 29

type selectors
class selectors
ID selectors

Question 30

Why is using!importantconsidered bad practice?

Answer 30

!important is considered bad practice and to be avoided because it makes debugging more difficult by breaking the natural cascading in stylesheets. It cannot be overrode and therefore should not reused.