CSS Flashcards
Name three different types of values you can use to specific colors in CSS
- RGB values
- Hexcode values
- Color names
What are three important considerations for choosing fonts?
Possible answers:
- A browser will usually only display the font if it’s installed on the user’s computer
- Important to have a fallback option just in case
- typefaces are usually subject to copyright, so be careful to not infringe said copyright
- Remember to check what the fonts look like on Macs vs PC
- Readability
Why must you have backup fonts assigned when selecting custom fonts?
Just in case the browser doesn’t support the first choice 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 Cascade serve?
the CSS “Cascade” is the process which the CSS language determines what styling should ultimately be applied to an element
What is source order?
The order that your CSS rules are written in your stylesheet
In what situations might you need to apply styling to a single element multiple times in one stylesheet?
Mobile responsiveness mainly
What is inheritance?
Inheritance is when the child element takes on the values that the parent/grandparent elements have
What is the purpose of !important?
!important overrides styles that have been declared elsewhere in your CSS or inline HTML styling
When is !important a good tool to use?
As little as possible, because using it too much would result in your stylesheet being overrun by !important tags
When is !important a good tool to use?
As little as possible, because using it too much would result in your stylesheet being overrun by !important tags
What is the CSS Cascade?
The process of determining the order/priority of the CSS that gets applied
What does the transform property do?
The transform property allows you to visually manipulate an element by skewing/rotating/translating/scaling
What is the difference between the :first-child and the :last-child pseudo selector?
:first-class represents the very first element among a group of sibling elements, while the :last-class pseudo class represents the very last
What is the difference between the :first-child and the :last-child pseudo selector?
:first-class represents the very first element among a group of sibling elements, while the :last-class pseudo class represents the very last
What is the default value for the position property of HTML elements?
Static
How does the setting position relative on an element affect document flow and where the element appears on the page?
The element will move in relation to where it would have been in a normal, static, flow.
How does setting position absolute on an element affect document flow and where the element appears on the page?
The element will be completely taken out of normal flow and will not affect or be affected by the position of any other element on the page
What are the box offset properties?
Top, bottom, left, right
What are the box offset properties?
Top, bottom, left, right
What is the default flex-direction of a flex container?
Row
what is the default flex-wrap of a flex container?
No wrap
What were floats originally designed for?
Newspaper/Magazine layouts
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.
What are some of the downsides for using floats in layout design?
Floats are generally meant for pictures AND text, so relying on floats usually gets tricky
Why should flexbox not be used for building complete web page layouts?
Flexbox is best for a few items for a smaller portion of the page, instead of the entire web page.
Why is it important to use a grid system for CSS Layouts?
It makes sizing more consistent, and if you are working with others, its easier for each other to see/discern the shared 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?
Percentages keep the format proportional to each other and mobile responsive
