CSS Flashcards
What are the names of individual pieces of a CSS rule?
selector, curly brackets, property, value
In CSS, how do you select elements by their class attribute?
.class
In CSS, how do you select elements by their type?
element {}
In CSS how do you select an element by its id attribute?
id {}
Name three different types of values you can use to specify colors in CSS.
hex, rgb, color name(keyword)
bonus points rgba, hsl, hsla
What CSS properties make up the box model?
border, margin, padding
Which CSS property pushes boes away from each other?
margin
Which CSS property adds space between a box’s content and its border?
padding
What is a pseudo-class?
keyword that specifies a special state of the selected element
eg: button:hover{}
What are CSS pseudo-classes useful for?
lets you apply styling to elements in relation to external factors
Name at least two units of type size in CSS
px, em, rem, pt
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?
no wrap (everything on one line)
Why do two div elements “vertically stack” on one another by default?
div elements are block elements
What is the default flex-direction of an element with display:flex
row (left to right)
What is the default value for the position property of HTML elements?
static
How does setting position: relative on an element affect document flow?
allows us to move the element relative to where it should be
does not change document flow - purely visual
How does setting position: relative on an element affect where it appears on the page?
with no other augments - it would be the same
needs top, bottom, left, right to modify
How does setting position: absolute on an element affect document flow?
it is removed from the normal flow - doesn’t affect position of surroundings (used to place elements on top of other elements)
How does setting position: absolute on an element affect where it appears on the page?
positions relative to the boundary of the previous parent non-statically positioned element
How do you constrain an absolutely positioned element to a containing block?
set the containing block to be a non static element (usually 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 rule
What does the term “source order” mean with respect to CSS?
styling lower in the style sheet takes priority
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
inheritance rule
List the three selector types in order of increasing specificity.
element/type > class > id
Why is using !important considered bad practice?
overrides cascade
What does the transform property do?
lets you rotate, scale, skew, or translate an element
Give four examples of CSS transform functions.
rotate, scale, skew, translate
The transition property is shorthand for which four CSS properties?
transition-property, transition-duration, transition-timing-function, transition-delay
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 ?
submit
What does the event.preventDefault() method do?
if the event does not get explicitly handled, the default action should not be taken as it normally would be
ie a default behavior of type checkbox is to be checked, preventDefault() prevents box from being checked
What does submitting a form without event.preventDefault() do?
Automatically load the form values.
What property of a form element object contains all of the form’s controls.
elements property
What property of form a control object gets and sets its value?
value
What is one risk of writing a lot of code without checking to see if it works so far?
no way to know where the code is bugged
What is an advantage of having your console open when writing a JavaScript program?
immediate feedback
Does the document.createElement() method insert a new element into the page?
no, it has to be appended first
How do you add an element as a child to another element?
element.appendChild()
What do you pass as the arguments to the element.setAttribute() method?
(‘name of the attribute’, ‘attribute value’)
What steps do you need to take in order to insert a new element into the page?
1) query select element to be appended to
2) create element
3) append element
What is the textContent property of an element object for?
gets the text content of the element
also allows us to set the text content of the element
Name two ways to set the class attribute of a DOM element.
element.setAttribute() and className property and classList property
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
reusability
Give two examples of media features that you can query in an @media rule
min width, max width, height, etc
Which HTML meta tag is used in mobile-responsive web pages?
viewport
Where should media queries go?
at the bottom of the css sheet to override existing defaults for web
What is the event.target?
returns the object (dom element) that the event is attached to/where the event originated from
Why is it possible to listen for events on one element that actually happen its descendent elements?
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 selector and returns closest node that matches the selector
How can you remove an element from the DOM?
remove() ON the element that you want to be removed
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?
take advantage of bubbling and put event listener on the parent element
What is the event.target?
the object for the element where the event originated from
What is the affect of setting an element to display: none?
does not show the element on the web page
What does the element.matches() method take as an argument and what does it return?
takes a selector as an argument, returns a boolean
How can you retrieve the value of an element’s attribute?
getAttribute()
At what steps of the solution would it be helpful to log things to the console?
verifying element location, values of attributes
If you were to add another tab and view to your HTML, but you didn’t use event delegation, how would your JavaScript code be written instead?
would need to include event listeners for each individual element
If you didn’t use a loop to conditionally show or hide the views in the page, how would your JavaScript code be written instead?
a huge if conditional code block
What is a breakpoint in responsive Web design?
breakpoints determine where the styling would change (any media features)
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?
with percentages the layout adapts to the exact dimensions of the viewport’s 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?
The lower one wins due to css rules
What is JSON
text-based data format
What are serialization and deserialization?
how data is transformed into bytes and back
Why are serialization and deserialization useful?
Allows for storage and withdrawal from storage
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
