CSS Flashcards
CSS - SYNTAX
What are the names of the individual pieces of a CSS rule?
selector, declaration blocks, property, values
CSS - SYNTAX
In CSS, how do you select elements by their class attribute?
put a period before the element
CSS - SYNTAX
In CSS, how do you select elements by their type?
just the element
CSS - SYNTAX
In CSS, how do you select an element by its id attribute?
put a # before the element name
CSS-COLORS
Name three different types of values you can use to specify colors in CSS.
- the name of the color
- # FFFFFF;
- rbg(0,0,0)
CSS-BOX-MODEL
What CSS properties make up the box model?
padding, border, margin
CSS-BOX-MODEL
Which CSS property pushes boxes away from each other?
margin
CSS-BOX-MODEL
Which CSS property adds space between a box’s content and its border?
padding
CSS-PSEUDO-CLASS
What is a pseudo-class?
is a class applied by the browsers under certain circumstances
CSS-PSEUDO-CLASS
What are CSS pseudo-classes useful for?
- a class that allows users to change the appearance when interacting with elements.
- makes CSS easier by not having to apply certain classes to each individual element.
CSS-FONTS
Name two types of units that can be used to adjust font-size in CSS.
pixels and rems
CSS-FONTS
What CSS property controls the font used for the text inside an element?
font-family property
CSS-FLEXBOX
What is the default flex-direction of a flex container?
row
CSS-FLEXBOX
What is the default flex-wrap of a flex container?
nowrap
CSS-LAYOUT-CLASSES
Why do two div elements “vertically stack” on one another by default?
because they are block elements
CSS-LAYOUT-CLASSES
What is the default flex-direction of an element with display: flex?
row
CSS-LAYOUT-CLASSES
What should containers classes alway have?
max-width: px
margin: 0 auto
CSS-LAYOUT-CLASSES
What should row classes alway have?
display: flex
CSS-POSITIONING
What is the default value for the position property of HTML elements?
static
CSS-POSITIONING
How does setting position: relative on an element affect document flow?
it doesnt
CSS-POSITIONING
How does setting position: relative on an element affect where it appears on the page?
only use if you want to move things slightly to the left, right, down or up
CSS-POSITIONING
How does setting position: absolute on an element affect where it appears on the page?
sticks to the closest ancestry that is non-static
CSS-POSITIONING
How do you constrain an absolutely positioned element to a containing block?
change the ancestor element, parent div has to be other than static
CSS-POSITIONING
What are the four box offset properties?
top, bottom, left, right
CSS-CASCADE
What are the four components of “the Cascade”.
Source order, specificity, importance, inheritance
CSS-CASCADE
What does the term “source order” mean with respect to CSS?
order that css uses in order, ruleset that is lower on the ccs page is used
CSS-CASCADE
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
apply it to the parent element (inheritance)
CSS-CASCADE
List the three selector types in order of increasing specificity.
id > class > element
CSS-CASCADE
Why is using !important considered bad practice?
makes debugging harder by breaking the order of things
CSS-TRANSFORMS
What does the transform property do?
lets you rotate, scale, skew, or translate an element
CSS-TRANSFORMS
Give four examples of CSS transform functions.
translateX, translateY, rotate, scale
CSS-TRANSITION
The transition property is shorthand for which four CSS properties?
transition-property, transition-duration, transition-timing-function, and transition-delay.
CSS-MEDIA-QUERIES
Give two examples of media features that you can query in an @media rule.
min-height, min-width
CSS-MEDIA-QUERIES
Which HTML meta tag is used in mobile-responsive web pages?
viewport meta tag
CSS-RESPONSIVE-LAYOUT
What is a breakpoint in responsive Web design?
a point in the viewport size where the layout will change
CSS-RESPONSIVE-LAYOUT
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?
will adapt to the viewpoint sizing
CSS-RESPONSIVE-LAYOUT
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?
css rulesets are loaded in top to bottom so bottom one always wins (source order)
