CSS Flashcards
What are the names of the individual pieces of a CSS rule?
selector & declaration (property & value)
In CSS, how do you select elements by their class attribute?
.classname { }
In CSS, how do you select elements by their type?
elementname { }
In CSS, how do you select an element by its id attribute?
idname { }
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?
border, margin, padding
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 element
What are CSS pseudo-classes useful for?
makes it easier to apply styling without having to add additional classes
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?
nowrap
Why do two div elements “vertically stack” on one another by default?
they are block-level elements that take up the entire width of the container
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?
does not affect document flow
How does setting position: relative on an element affect where it appears on the page?
no change, but can use box offset properties to move element; neighboring elements will not be affected
How does setting position: absolute on an element affect document flow?
takes element out of document flow
How does setting position: absolute on an element affect where it appears on the page?
must use box offset properties to specify where the element should appear in relation to the non-static container
How do you constrain an absolutely positioned element to a containing block?
set parent to position: relative
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?
the order that CSS rules are written 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?
inheritance - can occur if no CSS for that property is directly declared for the children
The transition property is shorthand for which four CSS properties?
transition-property, transition-duration, transition-timing-function, transition-delay
Give two examples of media features that you can query in an @media rule.
min-width; max-width
Which HTML meta tag is used in mobile-responsive web pages?
viewport
What is the event.target?
a reference to the object onto which the event was dispatched
Why is it possible to listen for events on one element that actually happen its descendent elements?
event flow (event bubbling)
What DOM element property tells you what type of element it is?
tagName
What does the element.closest( ) method take as its argument and what does it return?
takes a CSS selector string, returns itself or the closest parent node that matches the selector
How can you remove an element from the DOM?
ChildNode.remove( )
If you wanted to insert new clickable DOM elements into the page using JavaScript, how could you avoid adding an event listener to every new element individually?
add an event listener to the parent element, then check event.target to determine the actual clicked node
What is a breakpoint in responsive Web design?
the point at which a media query is introduced, usually selected to be the size where the content starts to break in some way
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?
so you don’t need to know the exact pixel count of the screen
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 - if two rules are declared for the same thing, the bottom one will always be used
What is JSON?
a standard text-based format for representing structured data based on JavaScript object syntax
What are serialization and deserialization?
serialization is converting a native object to a string so it can be transmitted across the network, and deserialization is converting a string to a native object
Why are serialization and deserialization useful?
so you can transmit data across a network
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify( )
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse( )
How do you store data in localStorage?
localStorage.setItem( keyName, keyValue)
How do you retrieve data from localStorage?
localStorage.getItem( keyName )
What data type can localStorage save in the browser?
string
When does the ‘beforeunload’ event fire on the window object?
when the window, the document, and its resources are about to be unloaded
