CSS Quiz Questions Flashcards
What are the names of the individual pieces of a CSS rule?
A selector, declaration block, property, value
How are key/value pairs related to CSS?
They allow you to edit elements on an HTML page
What are three important considerations for choosing fonts?
Readability, theme, fallback fonts
Why must you have backup fonts assigned when selecting custom fonts?
Incase the computer does not have the selected font
What CSS properties make up the box model?
margin, border, padding, content
Which CSS property pushes boxes away from each other?
margin
Which CSS property pushes box content away from its border?
padding
What purpose does the CSS Cascade serve?
What styling will take priority
What is source order?
The order the css has been written
In what situations might you need to apply styling to a single element multiple times in one stylesheet?
Mobile responsiveness (Phones)
What is inheritance?
When a child of an element gets a computed value that has been declared in the parent element
Why might CSS include the inheritance feature?
Timeliness
Is inheritance a good tool to use for styling? If so, on what occasions?
Yes. It cuts down on the amount of code you have to use, which saves time
What is the purpose of !important?
To override every style that has taken place prior
When is !important a good tool to use?
When it is crucial, but it is almost never to be used
What is specificity?
The strength of a specific css selector
How is specificity calculated?
through the weight of a css selector in the specificity hierarchy
Why might CSS include this feature?
To be more specific in choosing an element to style.
What is the order of selector strengths for CSS specificity (commonly referred to as the Specificity Hierarchy)?
id, class, element from greatest specificity to least
What is the CSS Cascade?
inheritance, source order, specificity, and importance
What are CSS pseudo-classes useful for?
added to a selector that specifies a special state of the selected element(s)
What does the transform property do?
It allows you to adjust how an element will look on the DOM
What is the difference between the first-child pseudo selector and the last-child pseudo selector?
The first-child represents the first element among a group of sibling elements where as last represents the last element
What is the LVHA order?
Link, visit, hover, active
What are 3 examples of what can be done with CSS transitions?
color slowly changing into different color, make an image grow or shrink, rotation of an element
Why might transitions be a helpful effect for styling?
Helping your UI feel more comfortable for your user
Are all properties able to be transitioned?
No not all properties are animatable
What is the initial display property of divs?
block element
What is the difference between display: none and visibility: hidden?
display none is not visible on the page and doesn’t take up any space. Visibility hidden can’t be seen, but still takes up space on the document
What is the difference between the block, inline block, and inline display properties?
block starts on a new line, inline starts on same line, and inline block is the same as inline, but can be resized
Why are CSS resets helpful for cross browser compatibility?
It will make css more consistent with other browsers
Why is it important to be mindful of what you reset with your CSS resets?
It can change your page in ways you wouldn’t want
What is an argument against using CSS resets?
It can slow down pages
What is the default value for the position property of HTML elements?
Static positioning
How does setting position relative on an element affect document flow and where the element appears on the page?
It moves it relative to where it would have started out. It does not affect document flow entirely.
How does setting position absolute on an element affect document flow and where the element appears on the page?
It gets removed from the page completely and snaps to the first non-static object.
What are the box offset properties?
Top, bottom, left, and right
What were floats originally designed for?
Float was originally designed to allow developers to float text around image elements similar to the way newspapers and magazines would display text.
What are clears for with floats?
The clear property allows you to say that no element (within the same containing element) should touch the left or righthand sides of a box, which will start a new line
What are some of the downsides for using floats in layout design?
Floats are a lot of work and its complicated.
What is the default flex-direction of a flex container?
row
What is the default flex-wrap of a flex container?
nowrap
Why should flexbox not be used for building complete web page layouts?
Flexbox should be used for smaller design items rather than the whole webpage.
Why is it important to use a grid system for CSS layouts?
Code is easier to read in a grid system.
What are the three core parts of a grid system?
Container, row, column
Why is it a good idea to use percentages for grid column widths?
Percentages are useful for mobile responsiveness.
What is a modal?
modal box is a scripted effect that allows you to overlay a small element over a website
What are some use cases for modals?
Error: To alert users of an error.
Warning: To warn users of potentially harmful situations.
Data: To collect data from users.
Confirm or Prompt: To remind users to do something before moving on.
Helper: To inform users of important information.
Why does a modal usually need to occupy the entire height and width of the viewport?
So it can’t be scrolled past
fun fact: you can sometimes delete the modal in the dev tools
Give two examples of media features that you can query in a media rule.
width and color
Which HTML meta tag is used in mobile-responsive web pages?
meta viewport tag
