CSS

Question 1

CSS-syntax

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

Answer 1

= selector and a declaration( which has property and a value)

Question 2

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

Answer 2

= . classname

Question 3

CSS-syntax

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

Answer 3

= by putting element name

Question 4

CSS-syntax

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

Answer 4

= #idname

Question 5

CSS-colors

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

Answer 5

= hex code (#FFD700)
= color name (147 names supported by browsers)
= RGB values (rgb 102,205,180)

Question 6

CSS-box model

What CSS properties make up the box model?

Answer 6

= border, margin, padding, width, and height

Question 7

CSS-box model

Which CSS property pushes boxes away from each other?

Answer 7

= margin

Question 8

CSS-box model

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

Answer 8

= padding

Question 9

CSS-pseudo class
What is a pseudo-class?

Answer 9

= a class you can change the appearance of elements when a user is interacting with them. (ex. :hover)
= to add styles to selectors, but only when those selectors meet certain conditions

Question 10

CSS-pseudo class
What are CSS pseudo-classes useful for?

Answer 10

= for defining a special state of an element.
= (applying styling element when mouse hover over it.)
= styling selectors

Question 11

CSS-fonts

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

Answer 11

= pixels, em, rem

Question 12

CSS-fonts

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

Answer 12

= font family

Question 13

CSS-flexbox

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

Answer 13

= row

Question 14

CSS-flexbox

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

Answer 14

nowrap : all flex items will be on one line.

Question 15

CSS-layout

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

Answer 15

= because div elements are block level elements.

block-level elements start on a new line

Question 16

CSS-layout

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

Answer 16

= row

Question 17

CSS-cascade

what are the four components of “the Cascade”?

Answer 17

• source order
• inheritance
• specificity
• !important

Question 18

CSS-cascade

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

Answer 18

= the order that your CSS rules are written in your stylesheet.
= styling provided for an element “last” in your stylesheet is the styling that will ultimately take effect.

Question 19

CSS-cascade

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

Answer 19

= inheritance. (useful for text)

Question 20

CSS-cascade

List three selector types in order of increasing specificity

Answer 20

element type -> class -> id (heaviest specificity)

Question 21

CSS-cascade

why is using !important considered bad practice?

Answer 21

= it makes debugging more difficult, by breaking the natural cascading in stylesheets.
= !important supersedes everything.

Question 22

CSS-transforms

What does the transform property do?

Answer 22

= Transform property lets you rotate, scale, skew, or translate an element,

Question 23

CSS-transforms

Give four examples of CSS transform functions.

Answer 23

= transform: rotate (rotates clockwise(+deg) or counter-clockwise(+deg))
= transform: skew (distorts each point within an element by a certain angle in the horizontal and vertical directions)
= transform: matrix (defines a homogeneous 2D transformation matrix.)
= transform: translate (moves element up(-value) or down(+value)

Question 24

CSS-responsive-layout

What is a breakpoint in responsive Web design?

Answer 24

= a “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 25

CSS-responsive-layout
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 25

=  Gives ability to have variance. Leg of room.  => for elements inside container
= Hard px value for class container.

Question 26

CSS-responsive-layout
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 26

= Source order.

= Media query is depend on the source order of CSS ruleset.

Question 27

CSS-media queries

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

Answer 27

= Width, color (min-width, and max-width) is mostly used.

= Min-width is used widely for phone

Question 28

CSS-media queries

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

Answer 28

= HTML viewport meta tag
= < meta name=”viewport” content=”width=device-width, initial-scale=1.0” >
= Value of viewport

Question 29

CSS-media queries

***Put the media query at the end. (source order) ⇒ always at the end of CSS rules.
- Viewport meta tag:
=> In order to use this tag, check for the version of the HTML file that is up to the latest version. Older versions may not work.

Answer 29

• only screen = make sure to declare the type of screen you want to declare (ex. print, for print-friendly version), or screen for screens.