CSS Flashcards
Name three different types of values you can use to specify colors in CSS
color names, or RGB, HEX, HSL, RGBA, HSLA values.
What CSS properties make up the box model?
margin, border, padding, content
Which CSS property pushes boxes away from each other?
The margin CSS property pushes boxes away from each other
Which CSS property adds space between a box’s content and its border?
The CSS property that adds space between a box’s content and its border is the padding property
What is a pseudo-class?
A pseudo-class is used to define a special state of an element.
it can be used to:
Style an element when a user mouses over it
Style visited and unvisited links differently
Style an element when it gets focus
What are pseudo-classes useful for?
A pseudo-class is used to define a special state of an element.
it can be used to:
Style an element when a user mouses over it
Style visited and unvisited links differently
Style an element when it gets focus
Name two types of units that can be used to adjust font-size in CSS
pixels, em, percentages
What CSS property controls the font used for the text inside an element?
The CSS property that controls the font used for the text inside an element is the font-family property
What is the default flex-direction of a flex container
The default flex-direction of a flex container is left to right, in a row
What is the default flex-wrap of a flex-container
By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.
Why do two div elements “vertically stack” on one another by default?
Two div elements vertically stack on one another by default because div elements are block elements
What is the default flex-direction of an element with display: flex?
The default flex-direction of an element with display: flex is from left to right, in a row
What is the default value for the position property of HTML elements
The default position property for HTML elements is static
How does setting position relative on an element affect document flow?
How does setting position relative on an element affect where it appears on the page?
How does setting position absolute on an element affect document flow?
How does setting position absolute on an element affect where it appears on the page?
How do you constrain an absolutely positioned element to a containing block?
what are the four box offset properties?
What are the four components of the Cascade?
Specificity, inheritance, source order
What does the term “source order” mean with respect to CSS?
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
It’s possible for (some of) the styles of an element to be applied to its children without an additional CSS rule because of the concept of inheritance
List three selector types in order of increasing specificity
universal element selector class selector element class selector ID selector
Why is using !important considered bad practice?
What does the transform property do?
The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.
Give four examples of CSS transform functions
The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.
The transition property is shorthand for which four CSS properties?
transition: transition-delay transition-duration transition-property transition-timing-function
Give two examples of media features that you can query in an @media rule
min-width, max-width, orientation
Which HTML meta tag is used in mobile-responsive web pages
The viewport meta tag
What is the breakpoint in responsive web design?
The breakpoint in responsive web design is the point where you want your design to adapt to the display size
It’s a point where you want your design to adapt to a specific media feature: @media only screen and (min-width: breakpoint in pixels)
Typically viewport width
What is the advantage of using a percentage instead of a fixed width for a column class in a responsive layout?
Pixels are fixed and screen sizes vary
Percentages adapt and display relative to screen size
Responds to the parent container
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?
The CSS rule for the smaller min0width will win because it is the last bit of code in the cascading style sheet
Because of the source order
