CSS Flashcards
What are the names of the individual pieces of a CSS rule?
Selector , declaration block, declarations
In CSS, how do you select elements by their class attribute?
With a period followed by a matching class name
In CSS, how do you select elements by their type?
Match the tag name
Name three different types of values you can use to specify colors in CSS.
RGB Values, HEX Codes, Color Names
In CSS, how do you select an element by its id attribute?
Pound symbol followed by a matching id attribute
What CSS properties make up the box model?
margins, borders, 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 a pseudo-class?
a selector that selects elements that are in a specific state
What are CSS pseudo-classes useful for?
allow you to change the appearance of elements when a user is interacting with them
Name two types of units that can be used to adjust font-size in CSS.
Pixels and ems
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?
Because div element are block level elements
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?
Normal flow
How does setting position: relative on an element affect document flow?
It doesn’t affect its surrounding elements only the element targeted.
How does setting position: relative on an element affect where it appears on the page?
It allows you to shift its position on the page
How does setting position: absolute on an element affect document flow?
It removes the element from the document flow and the other elements fill its position
How does setting position: absolute on an element affect where it appears on the page?
Its taken out of normal flow and can be positioned and moves with the user up/down the page
How do you constrain an absolutely positioned element to a containing block?
Anything other than static property.
What are the four box offset properties?
Top , left, right, bottom
What are the four components of “the Cascade”.
Specificity, inheritance, cascade, !important
What does the term “source order” mean with respect to CSS?
the order that your CSS rules are written in your stylesheet.
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
By the inheritance value
List the three selector types in order of increasing specificity.
Type, class, ID
it has side effects that mess with one of CSS’s core mechanisms: specificity
Why is using !important considered bad practice?
The transition property is shorthand for which four CSS properties?
transition-property , transition-duration , transition-timing-function , transition-delay
What does the transform property do?
Lets you rotate scale key or translate an element
Give four examples of CSS transform functions.
Scale, rotate, skew translate
Give two examples of media features that you can query in an @media rule.
Aspect ratio, color¥
Which HTML meta tag is used in mobile-responsive web pages?
TheHTML Viewport meta tagis used for creating responsive website
What is a breakpoint in responsive Web design?
The point at which a website content and design will adapt in order to provide the best user experience
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?
Because the content can adapt to 50% of a device’s width, and which is easier and better since there are so many devices with different widths
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 order that CSS apply its rules and that the last code on the page overrides the previous one
