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 a pseudo-class?
a class applied to a selector that specifies a special state of the selected element
What are CSS pseudo-classes useful for?
applying styling based on user actions not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on certain form elements), or the position of the mouse
What are some examples of a pseudo-class?
:hover, :active, :focus, :link, :visited
Name at least two units of type size in CSS.
rem, px, pt
What CSS property controls the font used for the text inside an element?
font-family
What are the names of the individual pieces of a CSS rule?
selector {property: value}
…declaration = property:value
In CSS, how do you select elements by their class attribute?
.class-name {
property: value
}
In CSS, how do you select elements by their type?
p {
property: value
}
In CSS, how do you select an element by its id attribute?
#id-element {
property: value
}Name three different types of values you can use to specify colors in CSS.
rgb/a, color keywords (black, red, blue, etc), hex codes
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?
divs are block 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?
position: static
How does setting position: relative on an element affect document flow?
the element remains a part of the normal document flow
How does setting position: relative on an element affect where it appears on the page?
- relative positioning moves an element in relation to where it would have been in normal flow
- if there are no other elements, there would be no change to its movement
How does setting position: absolute on an element affect document flow?
the element is taken out of the document flow and no longer affects the position of other elements on the page
How does setting position: absolute on an element affect where it appears on the page?
“top, bottom, left, and right” now tells us the distance the element should be from the containing element. rather than its relative position in the normal document flow
How do you constrain an absolutely positioned element to a containing block?
“position: relative” on the element and container
What are the four box offset properties?
top, bottom, left, right
What are the four components of “the Cascade”?
- source order
- inheritance
- specificity
- important rule
What does the term “source order” mean with respect to CSS?
the rule that comes last is the one that will be applied
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
inheritance: child elements inherit the property values of its parent element
- extra note: not all properties are inheritable!
List the three selector types in order of increasing specificity
- tag (type) selectors
- class selectors
- id selectors
Why is using !important considered bad practice?
breaks the natural cascading in your stylesheets and makes debugging more difficult
What does the “all” property indicate as a CSS rule?
allows you to control inheritance for all properties at once
e.g. p { all: revert; } would revert the style of p elements to the default
What does the transform property do?
allows you to modify the appearance of HTML elements
Give four examples of CSS transform functions.
- transform: translate();
- transform: scale();
- transform: rotate();
- transform: 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.
width, min-width, height, color, etc
Which HTML meta tag is used in mobile-responsive web pages?
viewport meta tag
What is a breakpoint in responsive Web design?
the point of dimension at which the layout or design of the website will change
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?
- a percentage will change based on how wide the screen currently is
- a fixed width is static and will not change
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?
source order (order matters in CSS rules )
