CSS Flashcards
What are the names of the individual pieces of a CSS rule?
selector, declaration, inside the declaration block, there are properties and values.
In CSS, how do you select elements by their class attribute?
using the dot notation in front of the selector name.
In CSS, how do you select elements by their type?
using element name
In CSS, how do you select an element by its id attribute?
using hash notation in front of the selector name.
Name three different types of values you can use to specify colors in CSS.
RGB Values, Hex Codes, Color Names
What CSS properties make up the box model?
content, 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 added to a selector that specifies a special state of the selected element(s). classes applied by the browser under special circumstances.
What are CSS pseudo-classes useful for?
Pseudo-classes let you apply a style to an element under specific circumstances. apply styling as a result of user interaction.
Name at least two units of type size in CSS.
pixels, percentages, ems
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?
no wrap
Why do two div elements “vertically stack” on one another by default?
because div is a block level 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?
static
How does setting position relative on an element affect document flow?
normal document flow, other neighboring elements will stay the same. once the positioned element has taken its place in the normal flow, you can then modify its final position, including making it overlap other elements on the page.
How does setting position relative on an element affect where it appears on the page?
stays the same until top, right, bottom, left properties to modify the elements position.
How does setting position absolute on an element affect document flow?
not part of normal document flow and no space is created for the element in the page layout. It sits on its own layer separate from everything else.
How does setting position absolute on an element affect where it appears on the page?
It is positioned relative to its closest positioned ancestor, otherwise, it is placed relative to the initial containing block.
How do you constrain an absolutely positioned element to a containing block?
set its ancestor to any other position than static.
What are the four box offset properties?
top, right, bottom, left
What are the four components of “the Cascade”.
source order, specificity, inheritance, important.
What does the term “source order” mean with respect to CSS?
the order that your CSS rules are written in your stylesheet. style that comes lower in your stylesheet gets applied.
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 for an inherited property has been specified on an element, the element gets the computed value of that property on its parent element. Only the root element of the document gets the initial value given in the property’s summary.
List the three selector types in order of increasing specificity.
element selector, class selector, id selector.
Why is using !important considered bad practice?
it makes debugging difficult by breaking the natural cascading in your stylesheets.
What does the transform property do?
lets you rotate, scale, skew, or translate an element. Modifies the coordinate space of the css.
Give four examples of CSS transform functions.
matrix, translate, scale, rotate, skew
The transition property is shorthand for which four CSS properties?
transition property, transition duration, transition-timing-function, and transition-delay. transition property always needs to be on the normal rule, not on pseudo class.
What event is fired when a user places their cursor in a form control?
focus
What event is fired when a user’s cursor leaves a form control?
blur
What event is fired as a user changes the value of a form control?
input
What event is fired when a user clicks the “submit” button within a from element?
submit
What does the event.preventDefault method do?
the event does not get explicitly handled, its default action should not be taken as it normally would be. prevents default behavior for that element for that event.
What does submitting a form without event.preventDefault do?
prevent the browser from automatically reloading the page with the form’s values in the URL. page refreshes. without preventDefault.
What property of a form element object contains all of the form’s controls.
elements
What property of form a control object gets and sets its value?
elements.value
What is one risk of writing a lot of code without checking to see if it works so far?
it will be really hard to debug
What is an advantage of having your console open when writing a JavaScript program?
you can check your work and know when things are going wrong.
Give two examples of media features that you can query in an @media rule.
color, hover, height, min-width, max-width.
Which HTML meta tag is used in mobile-responsive web pages?
meta tag with content attribute, width equals device-width, initial-scale 1. viewport meta tag.
What is a breakpoint in responsive Web design?
point at which media query is introduced.
What is the advantage of using a percentage width instead of a fixed width for a “column” class in a responsive layout?
easier to structure the column because you are going based off % of the viewport, not px value. more flexible and easier to work with.
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, which ever styling comes later gets applied.
