CSS Flashcards
What are the four components of “the Cascade”
Source order, inheritance, !important, specificity
What does the term “source order” mean with respect to CSS?
The lower styling code blocks take priority than those above
How is it possible for the styles of an element to be applied to its children well without an additional CSS rule?
By using inheritance to pass down properties to the children
List the three selector types in order of increasing specificity.
class, type, id
Why is using !important considered bad practice
it can messes with the natural order of cascading style sheets and debugging.
What are the names of individual pieces of a css rule
declaration blocks
How do you select elements by their class attribute
.class-name by using the .
How do you select elements by their type
tag-name just by using their tag name although it’s not recommended
How do you select an element by its id attribute
id-name by using an octothrope
Name three different types of values you can use to specify colors in CSS
rgb, lexicon values, and names
What CSS properties make up the box model?
Boxes model is a box made up of the margin, padding, and content
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 a pseudo-class
They target (or select) specific states of the element and change them based on what’s in the code block
What are CSS pseudo-classes useful for?
If you want to change specific areas in the css instead of the creating multiple classes, for example lists if you want to change the color of every other list item then there’s a pseudo class for that
Name at least two units of type size in CSS
px or 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
no-wrap
Why do two div elements “vertically stack” on one another by default?
The div takes up the entire width of the page
What is the default flex-direction of an element of an element with display: flex
row
What does the transform property do?
Allows you to rotate, translate, skew the element
Give four examples of CSS transform functions
translate, scale, rotate, skew
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
the width and height feature
Which HTML meta tag is used in mobile-responsive web pages?
the tag that contains the viewport
What is the breakpoint in responsive Web design?
Creating a layout that looks good on all devices
What is the advantage of using a percentage width instead of a fixed width for a column class in a responsive layout
It measures the width of the entire page and changes according to how the page shrinks or enlarges
If you introduce CSS rules for a smaller min-width after the styles for a larger min-width in your styles sheet, the CSS rules for the smaller min-width will “win”. Why is that?
because of CSS cascading
