CSS Flashcards
What are the names of the individual pieces of a CSS rule?
CSS rule contains two parts: a selector and a declaration
In CSS, how do you select elements by their class attribute?
The value that matches the one specified after the period symbol
In CSS, how do you select elements by their type?
Matches element names
In CSS, how do you select an element by its id attribute?
The value that matches the one specified after the pound symbol
Name three different types of values you can use to specify colors in CSS.
RGB values
Hex codes
Color names
What CSS properties make up the box model?
Border, margin, and padding
Which CSS property pushes boxes away from each other?
Margin
Which CSS property adds space between a box’s content and its border?
Padding
What is a pseudo-class?
Keyword added to a selector that specifies a special state of the selected
What are CSS pseudo-classes useful for?
Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree but also in relation to external factors
Name at least two units of type size in CSS.
px
%
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: all flex items will be on one line
Why do two div elements “vertically stack” on one another by default?
div element is a block-level element so it will take up the full width available
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 to an element affect document flow?
does not change document flow; allows you to control where the element appears relative to where it originally should be
How does setting position: relative on an element affect where it appears on the page?
does not change document flow; allows you to control where the element appears relative to where it originally should be
How does setting position: absolute on an element affect document flow?
takes it out of the document flow and moves the starting position of that document
How does setting position: absolute on an element affect where it appears on the page?
takes it out of the document flow and moves the starting position of that document
How do you constrain an absolutely positioned element to a containing block?
set the value of the position property to anything other than static for the containing block
What are the four box offset properties?
top, right, left, bottom
What are the four components of “the Cascade”
Source order, inheritance, specificity, !important
What does the term “source order” mean with respect to CSS?
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?
Inheritance is the process by which certain CSS properties on a child HTML element can receive value from a parent element
List the three selector types in order of increasing specificity.
element, class, id
Why is using !important considered bad practice?
!important makes debugging more difficult by breaking the natural cascading in your stylesheets
What does the transform property do?
The transform CSS property lets you rotate, scale, skew, or translate an element
It modifies the coordinate space of the CSS visual formatting model
The transition property is shorthand for which four CSS properties?
transition-property, transition-duration, transition-timing-function, and transition-delay
Give two examples of media features that you can query in an @media rule.
min-width
orientation
Which HTML meta tag is used in mobile-responsive web pages?
Viewport meta tag
What is a breakpoint in responsive Web design?
The points at which a media query is introduced are known as breakpoints
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?
Responds relative to the screen size while pixel is an absolute unit
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 source order component of the cascade
