CSS Quiz Questions Flashcards
What are the names of the individual pieces of a CSS rule?
selector {
(declaration block)
property: value;
}
How are key/value pairs related to CSS?
within a declaration block
there are properties(keys) and values
Name three different types of values you can use to specify colors in CSS.
color keyword: (blue);
hexadecimal value: #ffffff
RGB function: rgb(255,255,255)
What are three important considerations for choosing fonts?
- Readability,
- Availability: if it is used as a default on certain browsers.
- Does it work with the theme of the website (professional/casual etc)
Why must you have backup fonts assigned when selecting custom fonts?
In case your first choice of font is not recognized by certain browsers/computers.
What CSS properties make up the box model?
Content > Padding > Border > Margin
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?
It determines what styling properties take priority and inheritance of others (ie: if there are two different values for the same property)
What is source order?
The order that the css rules are written
In what situations might you need to apply styling to a single element multiple times in one stylesheet?
ie: if you wanted to change the styling of content dynamically(with a button press)
What is inheritance?
Child elements will acquire the css rules from their parent elements
Why might CSS include this feature?
Makes things easier and more efficient
What is the purpose of !important?
Makes a css property supersede all other properties
When is !important a good tool to use?
Usually never
What is specificity?
The priority of which css rules take place on an element (selector strength)
How is specificity calculated?
There is a numeric value associated with every selector, and the higher value will take priority. If the values are equal then source order wins
Why might CSS include this feature?
To make sure certain styling does not get overwritten accidentally by other selectors
What is the order of selector strengths for CSS specificity (commonly referred to as the Specificity Hierarchy)?
* universal, div (element selector), .class selector, :pseudoclass, #id selector, style="inline-styling", !important Refer to SpeciFISHity bookmark
What is the CSS Cascade?
The whole umbrella of factors to determine html styling priorities such as: inheritance, specificity, importance.
What are CSS pseudo-classes useful for?
Changes appearance of elements when a user interacts with them
What does the transform property do?
Lets you rotate, scale, skew, or translate an element
What is the difference between the :first-child pseudo selector and the :last-child pseudo selector?
:first-child selects the first child of its parent element
:last-child selects the last child
:nth-child(n) selects nth child
What are 3 examples of what can be done with CSS transitions?
Change color of an element, translate, affect scale of an element, etc.
Why might transitions be a helpful effect for styling?
Makes the UI feel more comfortable for users
Are all properties able to be transitioned?
Only properties that are animatable can be transitioned
How do block-level elements affect the document flow?
They are put onto a new line and creates a block taking up the entire width of the line, and forces the next element to start on a new line
How do inline elements affect the document flow?
Only takes as much space as it needs, stays within the bounds of it’s previous element
What are the default width and height of a block-level element?
Default width is the entire length of the line it is on, and the height is : auto (the size of the content)
What are the default width and height of an inline element?
Height and width are both : auto (size of the content)
What accessibility considerations must be considered when choosing HTML elements?
Options for screenreaders: correct syntax for tags such as < strong > and < em >, < alt >
lang=”en” .
What is the initial display property of < div >s?
Block level
What is the difference between display: none and visibility: hidden?
Display:none removes the element from the flow of the page.
Visibility:hidden hides the element but still leaves space on the page where it used to be
What is the difference between the block, inline block, and inline display properties?
Block starts on a new line, inline starts on the same line, inline block is same as inline but the height and width can be changed.
Why are CSS resets helpful for cross browser compatibility?
Helps to standardize the layout for different browsers
Why is it important to be mindful of what you reset with your CSS resets?
Might reset something that could harm the page,
could add more unnecessary work,
What is an argument against using CSS resets?
Adds a little more load time
What is the default value for the position property of HTML elements?
Static
How does setting position: relative on an element affect document flow and where the element appears on the page?
Relative positions something from the point where it would have normally been
How does setting position: absolute on an element affect document flow and where the element appears on the page?
Absolute position will make something no longer exist in the page flow and other elements can overlap with it
What are the box offset properties?
Top, Right, Bottom, Left
What were floats originally designed for?
To allow for text to appear alongside or around an image like newspapers.
What are clears for with floats?
they prevent elements from touching the left or right sides of them
What are some of the downsides for using floats in layout design?
It removes elements from the DOM just like position:absolute. Forces you to use float for the entire page
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?
You need to have set sizing for everything, more for smaller portions of the page.
For the entire page, you should use a grid system normally.
Why is it important to use a grid system for CSS layouts?
Gives elements the proper ratios whether viewed on a monitor or phone. Makes it much more organized - divide work.
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?
You know exactly how much room you have (100%) and know how much space you have left. Percentages maintain aspect ratio on multiple devices
