CSS Flashcards
What are the four components of “the Cascade”.
inheritance, specificity, !important, source order
What does the term “source order” mean with respect to CSS?
In CSS the last style rule set for a selector takes effect
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
inheritance
List the three selector types in order of increasing specificity.
class column, type column, no value ( ),
Why is using !important considered bad practice?
it overrides everything
The transition property is shorthand for which four CSS properties?
transition - property, duration, timing-function, delay
What does the transform property do?
lets you rotate, scale, skew, or translate an element.
Give four examples of CSS transform functions.
Rotate, translate, scale, and skew
What are the names of the individual pieces of a CSS rule?
selector, declaration, property, value
In CSS, how do you select elements by their class attribute?
.then name of class attribute
In CSS, how do you select elements by their tag name?
just the name of the element
In CSS, how do you select an element by it’s id attribute?
- # then name of id attribute
Name three different types of values you can use to specify colors in CSS.
rgb, hex, hsl
What CSS properties make up the box model?
border, margin, padding, height and width
What CSS property pushes boxes away from each other?
margin
Which CSS property add space between a box’s content and it’s border?
padding
What is a pseudo-class?
a keyword added to a selector that specifies a special state of the selected element(s)
What are CSS pseudo-classes useful for?
Easier to target css selectors that involve user interaction
Name two types of units that can be used to adjust font-size in CSS.
px and rem
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?
row
What is the default flex-wrap of a flex container?
nowrap
Why do two div elements “vertically stack” on one another by default?
they are block elements
What is the default flex-direction of an element with display: flex?
row
What are the 3 primary components of a page layout? (Which helper classes do you need)?
containers, columns, and rows
What is the minimum number of columns that you should put in a row?
at least one
What is the purpose of a container?
to group your rows and columns easier (basically similar to an outline)
What is the default value for the position property of HTML elements?
static
How does the setting position: relative on an element affect document flow?
It moves the element in relation to where it would have been in normal flow
How does setting position: relative on an element affect where it appears on the page?
using offset properties you can indicate how far to move the element from where it would have been in normal flow
How does setting position: absolute on an element affect document flow?
it is taken out of normal flow and no longer affects the position of other elements on the page (it’s like the element no longer exists)
How does setting position: absolute on an element affect where it appears on the page?
the element can be positioned anywhere on the page relative to within the boundary of the next ancestor non static block
How do you constrain an absolutely positioned element to a containing block?
by using the ancestor container that is not static
Where are the four box offset properties?
top, bottom, left, and right
Give two examples of media features that you can query in an @media rule.
Width, hover
Which HTML meta tag is used in mobile-responsive web pages?
<meta></meta>
with the name=”viewport”
What is a breakpoint in responsive Web design?
different rule set for different parameters
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 would scale with whatever the view page size is rather than having a set value and not adjust to the view page
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 of the CSS cascade where the most recent rule set has priority
