CSS Flashcards
What are the names of the individual pieces of a CSS rule?
selector, declaration block {property, value}
In CSS, how do you select elements by their class attribute?
.className
In CSS, how do you select elements by their type?
write the element name
In CSS, how do you select an element by its id attribute?
id
Name three different types of values you can use to specify colors in CSS.
RGB
Hexadecimal
Color Name
What CSS properties make up the box model?
border, margin, padding, width, height
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?
keyword added to a selector that specifies a special state of the selected element(s)/changes the appearance of elements when a user is interacting with them
What are CSS pseudo-classes useful for?
applying styling based on user interaction
applying styling based on the structure of the html document (nth child)
Name two types of units that can be used to adjust font-size in CSS
px
rem
em
percentage
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?
Flex items with all try to fit onto one line (nowrap)
Why do two div elements “vertically stack” on one another by default?
Because they are block elements and each element takes up the full available width.
What is the default flex-direction of an element with display: flex?
row
What two pieces of styling are added to the container class?
margin: auto
max-width
What type of styling is applied to a row class?
display: flex
What’s the purpose of the container class?
To set the boundaries that’s going to hold the content
What’s the purpose of the row class?
to set up vertical content
What’s the purpose of the column class?
To set up the boundaries of horizontal content
What is the default value for the position property of HTML elements?
static
everything flows normally
How does setting position: relative on an element affect where it appears on the page?
It moves an element in relation to where it would have been in normal flow, shifting it to the top, right bottom or left of where it would have been place (dependent on the settings that you choose)
How does setting position: relative on an element affect document flow?
It doesn’t affect the position of surrounding elements; they stay in the position they would be in normal flow
How does setting position: absolute on an element affect document flow?
It does not affect the position of any surrounding elements (they simply ignore the space it would’ve taken up). Absolutely positioned elements move as users scroll up and down the page.
No longer a part of normal document flow–everything ignores it as if it doesn’t exist
How does setting position: absolute on an element affect where it appears on the page?
It positions the element in relation to its containing element.
Sits at the top of its nearest ancestor that is not static
How do you constrain an absolutely positioned element to a containing block?
Set a position property on the container element (the ancestor element) that’s not static
What are the four box offset properties?
top
left
right
bottom
Which positioning property causes the least amount of affect/chaos?
relative
What are the four components of “the Cascade”.
- Source order
- Inheritance
- Specificity
- !important
What does the term “source order” mean with respect to CSS?
Source order is, simply put, the order that your CSS rules are written in your stylesheet. The styling provided for an element last in your stylesheet is the styling that will ultimately take effect.
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
inheritance
List the three selector types in order of increasing specificity.
type –> class –> id
Why is using !important considered bad practice?
You’re bypassing all the preset rules
What does the transform property do?
lets you rotate, scale, skew, or translate an element by modifying the coordinate space of the CSS visual formatting model. (where it is in coordinate space)
Give four examples of CSS transform functions.
translate
scale
rotate
skew
Give two examples of media features that you can query in an @media rule.
width
height
Reading:
Media ruleset only media type “screen” and media feature “min-width” with value 768 px
@media only screen and (min-width: 768 px) {
What is a breakpoint in responsive Web design?
The point at which you want to use a media query to change the design to a better one for the space you have available
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?
It’s relative to whatever device/screen you’re on (adaptability)
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 source order-the bottom one wins out
