CSS Flashcards
What are the names of the individual pieces of CSS rules
Selector and declaration
In CSS, how do you select elements by their class attribute?
.classname
In CSS, how do you select elements by their type?
Using the elements name
In CSS, how do you select elements by its id attribute?
idname
Name three different types of values you can use to specify colors in CSS
Rgb, hex codes, color names
What CSS properties make up the box model
Border, margin, padding, content
Which CSS property pushes boxes away from each other
Margin
Which CSS property adds space between a box’s content and its border?
Padding
What is a pseudo-class?
** class applied by the browser A keyword added to a selector that specifies a special state of the selected element
What are CSS pseudo-classes useful for?
Useful to style elements based of their state alone or when the user interacts with the selected element on the page
Name at least two units of type size in CSS
px, rem, em
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
Nowrap
Why do two div elements vertically stack on one another by default?
They are block line elements
What is the default flex-direction of an element with display of flex
Row
What is the default value for the position property of HTML elements
Static
How does setting position: relative on an element affect document flow
No effect on document flow
How does setting position: relative on and element affect where it appears on the page
It appears where it would in normal flow but can be positioned using box offset properties
How does setting position: absolute on an element affect document flow
It acts as if that element doesn’t exist and continues its normal flow without including that element
How does setting position: absolute on an element affect where it appears on the page
It will place it in the nearest non-static parent and positions itself there; if they can’t find themselves a non-static parent, they will position themselves in the viewport or html
How do you do train a n absolutely positioned element to a containing block?
Set it’s containing elements display to something other than static; needs to be non-static element
What are the four components of “the Cascade”.
source order, inheritance, specificity, !important
What does the term “source order” mean with respect to CSS?
the order your CSS rules are written in your stylesheet; the lower it is in the stylesheet, the stronger it is in the stylesheet
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
when no value on an inherited property is specified then it will inherit its parent’s property
normally only applies to text related stuff; direct styling on an element overrides inheritance
List the three selector types in order of increasing specificity.
type, class, id
Why is using !important considered bad practice?
makes debugging more difficult because it breaks the natural cascading of the document; don’t use it
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.
min-width (most common)
max-width (most common)
aspect ratio
height (of viewport)
Which HTML meta tag is used in mobile-responsive web pages?
viewport metatag
What is a breakpoint in responsive Web design?
mark of some sort where new styling will take effect that wasn’t present on another format (often at a certain width)
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 takes effect in the cascade
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?
allows for more flexibility
