CSS Flashcards
What are the names of the individual pieces of a CSS rule?
Selector, Property, and Value.
In CSS, how do you select elements by their class attribute?
.classname {
}
In CSS, how do you select elements by their type?
nameofelement {
}
In CSS, how do you select an element by its id attribute?
nameofid {
}
Name three different types of values you can use to specify colors in CSS.
RGBA CSS Function, Hex Codes, and Color Names.
What CSS properties make up the box model?
Border, Padding, and Margin.
Which CSS property pushes boxes away from each other?
The Margin property pushes boxes away from each other.
Which CSS property add space between a box’s content and its border?
The Padding property adds space between a box’s content and its border.
What is a pseudo-class?
Pseudo-class is a keyword added to a selector that specifies a special state of the selected element.
What are CSS pseudo-classes useful for?
To apply CSS for a special state of the element that is implied by the browser.
Ex: :hover
:nth-child(odd)
Name at least two units of type size in CSS.
Pixels, Percentages, and Ems.
What CSS property controls the font used for the text inside an element?
The font-family property controls the font used for the text inside an element.
What is the default flex-direction of a flex container?
row is the default flex-direction of a flex container.
What is the default flex-wrap of a flex container?
nowrap is the default flex-wrap of a flex container.
Why do two «a>div</a>> elements “vertically stack” on one another by default?
Two «a>div</a>> elements “vertically stack” on one another because they are block-level elements by default.
What is the default flex-direction of an element with display: flex?
The default flex-direction of an element with display: flex is row.
What is the default value for the position property of HTML elements?
Static is the default value for the position property of HTML elements.
How does setting position: relative on an element affect document flow?
Setting position: relative on an element does not affect the document flow.
How does setting position: relative on an element affect where it appears on the page?
Setting position: relative on an element does not affect where it appears on the page unless an offset value is given.
How does setting position: absolute on an element affect document flow?
Setting position: absolute on an element removes that element from the normal flow of documents.
How does setting position: absolute on an element affect where it appears on the page?
Setting position: absolute on an element moves that element to its own layer, and can be moved around with offset values.
How do you constrain an absolutely positioned element to a containing block?
You can constrain an absolutely positioned element to a containing block by using offset values.
What are the four box offset properties?
The four box offset properties are: top, bottom, left, and 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?
The order of the selectors in your stylesheet.
Lower css rules take precedence over higher css rules.
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
When an inherited property is used on the parent element, and a property isn’t declared on the child.
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.
Give four examples of CSS transform functions.
transform: matrix (1, 2, 3, 4, 5, 6)
transform: translate(120px, 50%)
transform: scale(2, 0.5)
transform: rotate(0.5 turn)
transform: skew(30deg, 20deg)
The transition property is shorthand for which four CSS properties?
transition-delay
transition-duration
transition-property
transition-timing-function
Give two examples of media features that you can query in an @media rule.
min-width max-width height width orientation etc.
Which HTML meta tag is used in mobile-responsive web pages?
The viewport meta tag.
What is a breakpoint in responsive Web design?
Point in styling to break to fit new form of styling.
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 matches the size of the viewport regardless of its size.
Container should have pixels.
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.
