CSS Flashcards
What is the default value for the position property of HTML elements?
Position: static
How does setting position: relative on an element affect document flow?
It has no effect.
Relative positioning moves an element in relation to where it would have been in normal flow.
How does setting position: relative on an element affect where it appears on the page?
Has no effect on where it appears on the page
How does setting position: absolute on an element affect document flow?
It is completely removed. It is no longer part of normal document flow.
How does setting position: absolute on an element affect where it appears on the page?
An element set to position absolute will sit at the top-left corner of the parent element with the position that is non-static.
How do you constrain an absolutely positioned element to a containing block?
Set a value on an element (the parent) that is non-static.
When should you use absolute positioning?
When you need to layer things on top of others.
Ex. the meme exercise with the text and emoji layer
How do you read the CSS Ruleset:
.pokemon > img {}?
New css ruleset with the selector of an image element which is a direct child of an element with the class pokemon
How do you read the CSS ruleset:
border: 1px solid; ?
border SHORT HAND property with a value 1px and solid.
how do you read the CSS ruleset:
font-family: roboto, sans-serif
font-family property with the value roboto with a fallback value sans-serif
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 styling provided for an element last in your stylesheet is the styling that will ultimately take effect.
Why is using !important considered bad practice?
It overrides the cascade.
Understanding and effectively using specificity and the cascade can remove any need for the !important flag.
List the three selector types in order of increasing specificity.
- ID selector
- CLASS selector
- Element selector
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
It is possible because of inheritance.
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.
What does the transform property do?
The transform CSS property lets you rotate, scale, skew, or translate an element. By modifying coordinate space.
Give four examples of CSS transform functions.
- Matrix
- Translate
- Scale
- Rotate
The transition property is shorthand for which four CSS properties?
Transition-property
transition-timing-function
transition-delay
transition-duration
What event is fired when a user places their cursor in a form control?
focus event
What event is fired when a user’s cursor leaves a form control?
blur event
What event is fired as a user changes the value of a form control?
input event
What event is fired when a user clicks the “submit” button within a ?
submit event
What does the event.preventDefault() method do?
It prevents the browser from automatically reloading the page with the form’s values in the URL.
It prevents the default action of the browser.
What property of a form element object contains all of the form’s controls.
elements
elements collection property
ex. document.forms[index].elements[index] or dot notation
What property of a form control object gets and sets its value?
value property on the form control elements
ex. contactForm.elements.message.value <===
What is one risk of writing a lot of code without checking to see if it works so far?
It will be harder to find the bug
What is an advantage of having your console open when writing a JavaScript program?
It will be easier to prevent bugs since you are seeing what your code is doing as you are writing it
What does submitting a form without event.preventDefault() do?
It just reloads the page.
Every time you use a ‘submit’, ALWAYS use a preventDefault() method on the event object.
Does the document.createElement() method insert a new element into the page?
No, the element does not get added until you use the appendChild method
How do you add an element as a child to another element?
Use the the appendChild method
What do you pass as the arguments to the element.setAttribute() method?
Two strings.
- A string specifying the name of the attribute whose value is to be set (ex. class)
- A string containing the value to assign to the attribute
What steps do you need to take in order to insert a new element into the page?
Step 1: Create the element (createElement)
Step 2: Give it content (setAttribute or TextContent)
Step 3: Add it to the DOM (appendChild)
What is the textContent property of an element object for?
The textContent property represents the text content of the node and allows us to change the text content with the assignment operator
Name two ways to set the class attribute of a DOM element.
- Use the setAttribute method
2. use the className property
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
- The function is able to make a web page automatically
2. Saves time and money
Give two examples of media features that you can query in an @media rule.
- min-width
2. max-width
Which HTML meta tag is used in mobile-responsive web pages?
Viewport meta tag
What is the event.target?
It is 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?
Because the closest() method allows us to specify which children we would like to watch for
What DOM element property tells you what type of element it is?
event.target.tagName
What does the element.closest() method take as its argument and what does it return?
It takes in a selectors
Returns the closest ancestor element of itself, which matches the selectors
How can you remove an element from the DOM?
By using the remove method on the object for the dom element we want to remove.
Element.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 it to the parent
What is the event.target?
It is a reference to the object onto which the event was dispatched
What is the affect of setting an element to display: none?
It turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist).
All descendant elements also have their display turned off.
What does the element.matches() method take as an argument and what does it return?
The matches() method of the element tests whether the element would be selected by the specified CSS selector. The return is a boolean
How can you retrieve the value of an element’s attribute?
By using the getAttribute() method
The argument is a string of the attribute name
Element.getAttribute()
At what steps of the solution would it be helpful to log things to the console?
Start logging things to the console from the beginning
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?
Add an event listener for each individual tab.
This code is not scaleable
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?
By using a long list of if statement with a counter. Similar to the typing tutor challenge.
This code is not scaleable.
What is a breakpoint in responsive Web design?
Breakpoints were incorporated in responsive Web design to change the layout of the webpage at a specific point (breakpoint) in order to cater for the dimensions of every device.
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?
They are more flexible when creating a responsive layout because they are relative units.
For example, making something 50% wide means it will always take half of the screen. On the other hand, pixels will remain static (static units)
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
Where should media queries be in your CSS?
At the very bottom
