CSS

Question 1

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

Answer 1

Selector and Declaration.

What makes up a Declaration: Property and Value.

Question 2

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

Answer 2

Type selector means matches element names.

h1 { }
h1, h2, h3 { }

(just write the element)

Question 3

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

Answer 3

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

Selecting an element by its id attribute, you use #.

example:
#introduction { }

Question 4

Universal selector

Answer 4

Universal selector applies to all elements in the document.

• { }

Question 5

Type selector

Answer 5

Type selector matches element names.

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

Question 6

Class selector

Answer 6

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 7

ID selector

Answer 7

introduction { }

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

(Targets the element whose id attribute has a value of introduction)

Question 8

Child selector

Answer 8

Matches an element that is a direct child of another.

li > a { }
(Targets any < a > element that are children of an < li > element (not other < a > element in the page)

Question 9

Descendant selector

Answer 9

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

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

Question 10

Adjacent sibling selector

Answer 10

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 11

General sibling selector

Answer 11

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 < h1 > element, this rule would apply to both.

Question 12

How do you format External CSS?

Answer 12

You must create a new styles.css sheet then create a relationship with the html page.

< link href = “ css / styles.css “ type = “ text / css” rel = “ stylesheet “>

This is located in the < head > element and after the < title > element within it.

Question 13

How do you format Internal CSS?

Answer 13

< style type = “ text / css “ >

You can style CSS within an HTML page by placing them inside a < style > element, which usually sits inside the < head > element of the page.

The < style > element should use the type attribute to indicate that the styles are specified in CSS. The value should be text / css.

Question 14

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

Answer 14

RGB values, Hex Codes, and Color Name.

Question 15

RGB Values

Answer 15

An expression of color in terms of how much red, green, and blue are used to make it up. These are expressed as numbers between 0 and 255.

Example: rgb(100,100,90)

Question 16

Hex Codes

Answer 16

6-digit codes that represents the amount of red, green, and blue in a color, preceded by a pound or hash # sign.

Example: #ee3e80

Question 17

Color Names

Answer 17

There are 147 predefined color names that the browser can recognize.

Example: DarkCyan

Question 18

What CSS properties make up the box model?

Answer 18

1. margin,
2. border,
   3.padding,
3. content that it holds.

Question 19

Which CSS property pushes boxes away from each other?

Answer 19

Margin property.

Question 20

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

Answer 20

Padding property.

Question 21

What is a pseudo-class?

Answer 21

A class that the browser applies on its own when circumstances are meant in order for certain features to be interactive with the user.

Question 22

What are CSS pseudo-classes useful for?

Answer 22

For users, they make pages more interactive.

For coders, it basically helps writing code more efficient, especially for striped tables.

Question 23

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

Answer 23

Pixels and percentages.
The most common are pixels and rem.

Question 24

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

Answer 24

font-family property.

Question 25

What is the difference between em and rem?

Answer 25

em: the responsive font unit; it is the ratio of the default size.
rem: responsive font unit based on the HTML element (it is consistent). It is recommended to use rem.

Question 26

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

Answer 26

row

Question 27

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

Answer 27

no wrap

Question 28

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

Answer 28

They are block elements.

Question 29

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

Answer 29

row (left to right)

Question 30

What is the purpose of the container class?

Answer 30

The purpose of the container class in a layout system is meant to create a section that controls the layout by setting the boundaries of what we are making.

Question 31

What is the purpose of a row class?

Answer 31

The row class is meant to section and control vertical chunks of a layout.

Question 32

What is the purpose of a column class?

Answer 32

The column class is meant to section off and control horizontal chunks of a layout.

Question 33

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

Answer 33

static

is the default value for the position property of HTML elements. That is why it does not need to be stated in css.
But the syntax is:

position: static ;

Question 34

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

Answer 34

position relative does not affect the document flow.

Question 35

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

Answer 35

It would not affect where it appears on the page but it does seem like it is visually.

It would move from where it would normally sit. The offset properties changes its position (top or bottom and left or right).

Question 36

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

Answer 36

absolute positioning takes an element out of document flow and may or may not affect document flow.

Question 37

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

Answer 37

absolute value positioning positions the element in relation to its containing element- it is taken out of its normal flow. They act like it is not there. It will move based off of its parent element if it is non-static.

Question 38

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

Answer 38

Set a non-static position property on a parent element.

Question 39

What are the four box offset properties?

Answer 39

Top or bottom and left or right.

Question 40

Which units would you typically use for values of a property?

Answer 40

rem or px (they are precise).

Question 41

What is “Inheritance”?

Answer 41

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

In other words, it controls what happens when no value is specified for a property on an element.

Question 42

What are the two CSS categories?

Answer 42

1. Inherited properties: are set to the computed value of the parent element by default. (computed value means the value of a CSS property is the value that is transferred from parent to child during inheritance)
2. Non-inherited properties: set to initial value of the property by default. (Initial value of a CSS property is the default value)

Question 43

How do you override !important

Answer 43

1) Add another CSS rule with !important and either give the selector a higher specificity (adding a tag, id or class to the selector) or
2. add a CSS rule with the same selector at a later point than the existing one.

Question 44

What are the four components of “the Cascade”.

Answer 44

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

Question 45

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

Answer 45

Source order is the order that your CSS rules are written in the stylesheet. The last styling in the stylesheet will ultimately take effect.

Question 46

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

Answer 46

Inheritance - the process by which CSS properties on a child HTML element receives value from a parent element.

Question 47

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

Answer 47

Inheritance - the process by which CSS properties on a child HTML element receives value from a parent element.

So you just apply the style to the parent element.

Question 48

Why is using !important considered bad practice?

Answer 48

It makes debugging harder because it breaks the natural cascading in your stylesheet.

Question 49

What does the transform property do?

Answer 49

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

Question 50

Give four examples of CSS transform functions.

Answer 50

transform: translate
transform: scale *
transform: rotate
transform: skew

• = common CSS function

Question 51

The transition property is shorthand for which four CSS properties?

Answer 51

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

Question 52

What is a breakpoint in responsive Web design?

Answer 52

In responsive design, a breakpoint 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.

Question 53

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 53

% will help sizes adapt to your viewport size easier while giving it “wiggle room” for that intermediary space between that point while keeping your layout the way you want it. It will always be consistent as well when using % over px.

Question 54

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 54

Source order. The style that falls lower is “stronger” and will prevail over the style that falls before due to Source Order CSS component.

Question 55

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

Answer 55

examples: min-width and orientation

Question 56

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

Question 57

What is a breakpoint in responsive Web design?

Answer 57

The “points” at which a website’s content and design will adapt in a certain way in order to provide the best possible user experience.

Question 58

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 58

Using percentages is advantageous because it is a unit that is relative to the viewport so it will adjust accordingly to the size of the viewport while containing the column sizes.

Question 59

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 59

Source Order: priority is always given to the rule that appears last in the document.