CSS Flashcards
What are the names of the individual pieces of a CSS rule?
A selector and a declaration block made up of properties that have values.
In CSS, how do you select elements by their class attribute?
By using the CSS class selector which is a period (.) character, followed by the name of the class.
In CSS, how do you select elements by their tag name?
By using the CSS selector that is the name of the element.
In CSS, how do you select an element by its id attribute?
By using the CSS id selector which is a hashtag (#) character, followed by the name of the id.
Name three different types of values you can use to specify colors in CSS.
RGB, HEX, Color names
What CSS properties make up the box model?
Padding, margin, border, content
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 CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, the pseudo-class :hover can be used to select a button when a user’s pointer hovers over the button and this selected button can then be styled.
What are CSS pseudo-classes useful for?
styling elements only under certain conditions
Name two types of units that can be used to adjust font-size in CSS.
px,
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.
Left to right.
What is the default flex-wrap of a flex container?
Nowrap
Why do two div elements “vertically stack” on one another by default?
They are block-level elements.
What is the default flex-direction of an element with display: flex?
Row, left to right.
What are the three primary components of a page layout? (Which helper classes do you need?)
Container, Row, Column
What is the minimum number of columns that you should put in a row?
1
What is the purpose of a container?
to help style large chunks of content
What is the default value for the position property of HTML elements?
Static
How does setting position: relative on an element affect document flow?
The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static.
How does setting position: relative on an element affect where it appears on the page?
The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left.
How does setting position: absolute on an element affect document flow?
Removes it from the document flow. Other items ignore it.
How does setting position: absolute on an element affect where it appears on the page?
it appears where the next ancestor that is position relative. otherwise the body
How do you constrain an absolutely positioned element to a containing block?
Absolutely positioned elements position themselves within the first non-static ancestor they have.
What are the four box offset properties?
Top, Bottom, Left, Right
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.
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
Inheritable properties
List the three selector types in order of increasing specificity.
type, class, id
Why is using !important considered bad practice?
Understanding and effectively using specificity and the cascade can remove any need for the !important flag.
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.
rotate, translate, scale, skew, matrix
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.
width, height, min-width, max-width
Which HTML meta tag is used in mobile-responsive web pages?
viewport
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?
different viewing devices have different screen sizes.
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 it comes after, and css rules will read from top to bottom and the bottom one wins.
SOURCE ORDER.
