CSS Flashcards
If there are two or more rules that apply to the same element, which rule takes precedence?
Last rule= The latter if selectors are identical.
Specificity= If one selector is more specific that another.
Important = !important is considered more important that other rules.
What are some properties inherited by child elements automatically?
Font color, font family
What are some properties not inherited by child elements automatically?
Background-color, border properties
How do you force inheritance onto a child element?
Use inherit as the value of a property.
Why use external style sheets?
All pages can share the same style sheet.
Easier editing.
When might you use CSS in the HTML document instead of its own file?
If you are creating a single page with little code just to keep everything together, however it is still considered best practice to create a separate file.
How does CSS treat each HTML element?
It treats it as though each element is inside its own box.
What do selectors allow you to do?
Target your rules at different elements.
What are the two parts of a declaration?
The properties of the element you want to change, and the values of those properties.
Where do CSS rules generally appear?
CSS rules generally appear in a separate document, but sometimes may appear within the HTML page.
Name three different types of values you can use to specify colors in CSS.
RGB values
HEX codes
Color names
HSLA
What is a grouped selector?
A grouped selector is when you have multiple selectors chosen to style.
What CSS properties make up the box model?
Content
Border
Margin
Padding
What CSS property pushes boxes away from each other?
Margin
Which CSS property add spaces between a box’s content and its border?
Padding
How does the overflow property work?
Hidden: Hides any extra content the box cannot contain
Scroll: Adds a scrollbar to the box so users can see the rest of the content.
What is a pseudo-class?
A secondary class used to select specific attributes of an element.
What are CSS pseudo-classes useful for?
Changing the appearance of elements under special circumstances
What does :hover do?
Changes the appearance when a user hovers over something with a mouse.
What does :active do?
This changes the appearance when the user activates a button or link.
What does :nth-child() do?
Matches elements based on their position in a group of siblings.
What does :nth-child() do?
Matches elements based on their position in a group of siblings.
Name some units of type size in CSS
pixels, percentages, ems, rem, vh, vw, pts, etc
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 they are block elements
What is the default flex-direction of an element with a display: flex?
row
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 does not affect the FLOW of the element
How does setting position: relative on an element affect where it appears on the page?
It will not affect the page unless you add offset values.
How does setting position: absolute on an element affect document flow?
The box is taken out of normal flow and no longer affects the position of other elements on the page.
How does setting position: absolute on an element affect where it appears on the page
It appears over the non static parent that it encounters.
How do you constrain an absolutely positioned element to a containing block?
Any non-static value parent (usually a relative positioned parent)
What are the four box offset properties?
top, right, bottom, left
How does fixed position work?
It positions the element in relation to the browser window.
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 your CSS rules are written in your 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
List the three selector types in order of increasing specificity.
Element type selectors
Class selectors
ID selectors
Why is using !important considered bad practice?
It makes debugging more difficult by breaking the natural cascading in your stylesheets
What does the transform property do?
The transform property lets you rotate, scale, skew, or translate an element.
Give four examples of CSS transform functions.
translate
rotate
scale
skew
The transition property is shorthand for which four css properties?
transition-property
transition-timing-function
transition-duration
transition-delay
Give two examples of media features that you can query in an @media rule.
width
height
look at documentation for full list.
Which HTML meta tag is used in mobile-responsive web pages?
viewport meta element
What is a breakpoint in responsive web design?
The points at which a media query is introduced.
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?
Percentages scale while pixels will always stay the same size.
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
What is JSON?
It is a text-based data format following 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.
Deserialization is converting a string to a native object.
Why are serialization and deserialization useful?
Send data over a network or store it in memory.
How do you serialize a data structure into a JSON string using JavaScript?
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()
How do you retrieve data from localStorage?
localStorage.getItem()
What data type can localStorage save in the browser?
strings
When does the ‘beforeunload’ event fire on the window object?
When the window, the document and its resources are about to be unloaded (closed)
