CSS Flashcards
What are the names of the individual pieces of a CSS rule?
There are selectors, properties, and values (which is the declaration block) and all together it is known as a CSS rule set.
In CSS, how do you select elements by their class attribute?
Using a “ . “ and then the value of the attribute, followed by a declaration block.
In CSS, how do you select elements by their type?
Using the given node name, followed by a declaration block.
In CSS, how do you select an element by its id attribute?
Using a “#” and then the value of the attribute, followed by a declaration block.
Name three different types of values you can use to specify colors in CSS.
RGB (red, green, blue) values, hex codes, and color names
What CSS properties make up the box model?
padding, border, margin, height, width
Which CSS property pushes boxes away from each other?
Margin controls the gap between boxes.
Which CSS property add space between a box’s content and its border?
The padding property allows you to specify how much space should appear between the content and its border.
What is a pseudo-class?
It is a keyword that can be added to a selector to change the appearance of an element with a specific action like :hover, :active, :focus.
What are CSS pseudo-classes useful for?
Useful for event-based styling and …
Name at least two units of type size in CSS.
Pixels, percentages, EMs
What CSS property controls the font used for the text inside an element?
font-family
What is the default flex-direction of a flex container?
It is from left to right.
What is the default flex-wrap of a flex container?
All flex items will be on one line. Its value is “nowrap”.
Why do two div elements “vertically stack” on one another by default?
Because they are block level elements.
What is the default flex-direction of an element with display: flex?
row, filling in from left to right
What is the default value for the position property of HTML elements?
Static
How does setting position: relative on an element affect document flow?
It does not have an effect at first.
How does setting position: relative on an element affect where it appears on the page?
It sets it in relation to the relative position.
How does setting position: absolute on an element affect document flow?
It removes it from the document flow. It is almost like they do not exist in relation to the other content on the page.
How does setting position: absolute on an element affect where it appears on the page?
It is positioned relative to the body/container.
How do you constrain an absolutely positioned element to a containing block?
It is set to the a parent element that is non-static (relative).
What are the four box offset properties?
Top, bottom, left, right
What are the four components of “the Cascade”.
Source order, inheritance, specificity, and !important
What does the term “source order” mean with respect to CSS?
it means in which order the rule set is applied to the stylesheet. bottom being dominant.
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
some are already applied by default, but “inherit” or even “all”.
List the three selector types in order of increasing specificity.
type selectors, class selectors, then ID selectors
Why is using !important considered bad practice?
it makes debugging more difficult by breaking the natural cascading in the stylesheet.
What does the transform property do?
it lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model. (change how the element is visually represented)
Give four examples of CSS transform functions.
matrix, perspective, rotate, translate
The transition property is shorthand for which four CSS properties?
The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.
Give two examples of media features that you can query in an @media rule.
height, width, https://developer.mozilla.org/en-US/docs/Web/CSS/@media
MIN-WIDTH AND MAX-WIDTH (USUALLY BE USING)
Which HTML meta tag is used in mobile-responsive web pages?
attribute name with value of viewport
What is a breakpoint in responsive Web design?
the point in which an @media rule set needs to be used
At the point the media query (@media rule) is introduced.
at the point where the styling is changed.
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?
it is more responsive for different types of viewports because it is measure in relations to its parent element
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?
because it is written after. Source order
