CSS Flashcards
What are the names of the individual pieces of a CSS rule?
selector, declaration block, property, property value, CSS Ruleset
in CSS, how do you select elements by their class attribute?
with a .
In CSS, how do you select elements by their type?
by just writing the name of the element
In CSS, how do you select elements by their ID?
with a #
Name 3 different types of values to specify colors in CSS
RGB, hex code, and name
What CSS properties make up the box model?
content, margin, padding, border
what CSS property pushes boxes away from each other?
margin
what CSS property adds space between a box’s content and its border?
padding
what is a pseudo-class?
classes applied by the browser in certain conditions
what are CSS pseudo classes useful for?
styling as a result of user interaction
Name at least 2 units of type size in CSS
pt, px, 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?
because they are block
What is the default flex-direction of an element with display: flex?
row
What is the default value for the position property of HTML elements?
static
How does setting position: relative on an element affect document flow?
maintains normal document flow
How does setting position: relative on an element affect where it appears on the page?
it places the element located within the block in the same location
How does setting position: absolute on an element affect document flow?
absolutely destroys document flow
How does setting position: absolute on an element affect where it appears on the page?
the element appears on the top of the page if no other element is positioned
How do you constrain an absolutely positioned element to a containing block?
relative needs a position value other than static
What are the four box offset properties?
top, left, bottom, right
What are the four components of “the Cascade”?
!Important, inheritance, source order, specificity
What does the term “source order” mean with respect to CSS?
Styling that comes lower in the style sheet, supersedes styling above it
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
The inherit value
List the three selector types in order of increasing specificity
Elements, class, and ID
Why is using !important considered bad practice?
Because it makes it more difficult to debug
NEVER USE !IMPORTANT!
What does the transform property do?
lets you modify the coordinate space of the selector with rotate, scale, skew and translate
Give four examples of CSS transform functions.
matrix, translate, scale, rotate
What does the transform property do?
Lets you modify the coordinate space of the selector with rotate, scale, skew and translate
Give four examples of CSS transform functions.
Matrix, translate, scale, rotate
The transition property is shorthand for which four CSS properties?
Transition-duration, transition-timing, transition-delay, and transition-property
Give two examples of media features that you can query in an @media rule.
Min-width, max-width
Which HTML meta tag is used in mobile-responsive web pages?
HTML viewport meta tag
What is a breakpoint in responsive Web design?
The “point” usually in the width, at which the page will adjust the layout of the content to make it easier for the user to view and interact with
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 will work for viewports with a range of different sizes
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?
Source order
