css Flashcards
what CSS properties make up the box model?
border, margin, padding
which CSS property pushes boxes away from each other?
margin
which CSS property add space between a box’s content and its border?
padding
what is the default flex-direction of a flex container?
row
what is the default flex-wrap of a flex container
nowrap
what are the names of the individual pieces of a CSS rule?
selectors
in CSS, how do you select elements by their class attribute?
dot followed by the class name
in CSS, how do you select elements by their type?
type selector
in CSS, how do you select an element by its id attribute?
pound sign followed by the id name
name three different types of values you can use to specify colors in CSS
hex, rgb, color keywords
what is a pseudo-class?
noted by a colons to allow extra functionality to certain css selectors
what are CSS pseudo-classes useful for?
hover, visited, etc elements, i.e., a different color for a hovered anchor tag, a set color for a visited anchored tag to indicated its been clicked
name at least two units of type size in CSS
px, rem, em
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?
sets as a division of content; vertically (one below the other continuously) is default
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 (each block-level element sits on top of the next one)
how does setting position: relative on an element affect document flow?
moves an element in relation to where it would have been in normal flow (i.e., top, left, bottom, right, in pixels, percentages, or ems)
how does setting position: relative on an element affect where it appears on the page?
box is taken out of normal flow and no longer affects the position of other elements on the page; relative does no changes to element if you dont define the offset properties
how does setting position: absolute on an element affect document flow?
acts like it is not there
How does setting position: absolute on an element affect where it appears on the page?
not static; persistent; doesn’t affect it’s surrounding but overrides them; acts as 1 z-index above the other content (?)
How do you constrain an absolutely positioned element to a containing block?
position relative; edit padding based on nearest ancestor block
What are the four box offset properties?
top, bottom, left, or right
What are the four components of “the Cascade”
- Importance 2. Origin 3. Specificity 4. Position.
What does the term “source order” mean with respect to CSS?
that the order of CSS rules matter; when two rules apply that have equal specificity the one that comes last in the CSS is the one that will be used
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
inheritance; rule applies to all ancestor elements within the document; you can establish the basis for a consistent visual design with very little code; these styles will even apply to HTML you have yet to write; to make sure all elements inherit these properties from the global scope, I can use the universal selector and the inherit keyword
List the three selector types in order of increasing specificity.
- type selectors (i.e., h1), pseudo-elements (i.e., ::after) 2. classes (i.e., .bio), attribute selectors (i.e., [type=”text”]), pseudo-classes (i.e., :hover) 3. id selectors (#imgCorrection)
although: inline styles override and have the highest specificity
Why is using !important considered bad practice?
makes debugging more difficult by breaking the natural cascading in your stylesheets; when two conflicting declarations with the !important rule are applied to the same element, the declaration with a greater specificity will be applied;
disrupting the natural flow
avoids debugging; makes your stylesheet harder to maintain
it overrides specificity by giving a CSS value more weight than it naturally has
what type of scope does css have?
a global scope and a local scope like javascript: the local scope has access to the parent and global scope
What does the transform property do?
adjusting the element coordinate plane
Give four examples of CSS transform functions.
rotate, translate, scale, skew, matrix, translateX, translateY
The transition property is shorthand for which four CSS properties?
transition-property, transition-duration, transition-timing-function, transition-delay
Give two examples of media features that you can query in an @media rule.
height, width
Which HTML meta tag is used in mobile-responsive web pages?
viewport tag
What is a breakpoint in responsive Web design?
points at which a media query is introduced
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?
layout flexibility/adaptability
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?
specificity/precedence
