CSS Flashcards
What are the names of the individual pieces of a CSS rule?
Selector and Declaration Block
In CSS, how do you select elements by their class attribute?
.class {
}
In CSS, how do you select elements by their type?
type {
}
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, name & hsl()
What CSS properties make up the box model?
width: ;
height: ;
padding: ;
border: ;
margin: ;
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 keyword used in selectors to specify special states of the targeted element(s), such as
:hover,
:checked,
:visited
What are CSS pseudo-classes useful for?
Allows you to apply style to a element not only in relation to the content of the document tree, but also in relation to external factors.
Name two types of units that can be used to adjust font-size in CSS.
px,
em,
pt
What CSS property controls the font used for the text inside an element?
font-family: ;
. column-full {
width: 100%;
}
on line 1 we have a new css rule set with a selector for the column-full class, and then the opnening curly braces for the declaration block;
on line 2 we have a width property with the value of 100%:
on line 3 we have the closing curly braces for the declaration block.
What is the default flex-direction of a flex container?
row
What is the default flex-wrap of a flex container?
nowrap
Why do two div elements “vertically stack” on one another by default?
Since they are block-elements, they occupy the full widht of their line and push to the next one any other element.
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?
it doesn’t.
How does setting position: relative on an element affect where it appears on the page?
it doesn’t.
How does setting position: absolute on an element affect document flow?
it removes it from the flow, making the other elements to rearrange themselves.
How does setting position: absolute on an element affect where it appears on the page?
the element appears on the top-left corner of it’s containing block
How do you constrain an absolutely positioned element to a containing block?
by having some non-static ancestor block around it
What are the four box offset properties?
top,
bottom,
left,
right
What are the four components of “the Cascade”.
Source Order, Inheritance, Specificity and !important
What does the term “source order” mean with respect to CSS?
It means that, the futher down the css document a rule set is written, all else being equal, it’ll have priority over prior rule set.
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
thanks to Inheritance
List the three selector types in order of increasing specificity.
type, .class and #id
Why is using !important considered bad practice?
it breaks with the rest of cascading priorities, and cannot be dealt with unless deleted
What does the transform property do?
lets you rotate, translate, scale or skew an element.
Give four examples of CSS transform functions.
transform: rotate();
transform: translate();
transform: skew();
transform: scale();
transform: matrix();
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.
(min-width: )
max-width:
Which HTML meta tag is used in mobile-responsive web pages?
< meta name=”viewport” >
