CSS Flashcards
Name three different types of values you can use to specify colors in CSS.
Color names
Hex codes
RGB values
What are the names of the individual pieces of a CSS rule?
selector { declaration property name: declaration property value; }
How are key/value pairs related to CSS?
key/value = name/value
In CSS: property name / property value
What are three important considerations for choosing fonts?
Readability
Installed fonts
Sticking with theme
Why must you have backup fonts assigned when selecting custom fonts?
Fallback fonts in case the selected font is not installed on user’s computer
Read the code.
background-color : rgb (0, 0, 0)
There is a property of background color with the value of rgb css function and three parameters of 0, 0 0
What CSS properties make up the box model?
Margin
Border
Padding
Content
What CSS property pushes boxes away from each other?
Margin property
What CSS property pushes box content away from its border?
Padding property
What purpose does the CSS Cascade serve?
Determines what styling will be applied to an element
What is source order?
The order CSS rules are written in a stylesheet
In what situations might you need to apply styling to a single element multiple times in one stylesheet?
Mobile responsiveness
What is inheritance?
For certain properties, when applied to a parent element will also get taken on by any child elements
*usually font or text related
Why might CSS include inheritance?
Save developers time & keep code DRY
What is the purpose of !important?
Highest level of importance for CSS rule
When is !important a good tool to use?
Almost never
What is specificity?
The weight or importance placed on different types of selectors
How is specificity calculated?
Numerical:
0.0.0
(tag selector, class selector, id selector)
Why might CSS include specificity?
Gives a tool to add more specificity if needed
To override specificity of an element
What is the order of selector strengths for CSS specificity?
Tag selectors
Class selectors
ID selectors
What is CSS Cascade?
How CSS determines in what order to apply styling to elements, depending on source order and specificity
What are CSS pseudo-classes good for?
Can apply styles to an element in a changed state (like hover) without affecting the DOM
What does the transform property do?
Manipulates an element
What is the difference between the :first-child pseudo selector and the :last-child pseudo selector?
:first-child - applies styling to the first element of the specified element type
:last-child - applies styling to the last element of the specified element type
What are 3 examples of what can be done with CSS transitions?
- Changing button colors fluidly
- Resizing images to make an emphasis
- Hiding an element slowly
movement, scale, rotate - small movements
Why might transitions be a helpful effect for styling?
More visually appealing for the user, more fluid, UI feel more comfortable for users
Are all properties able to be transitioned?
No, only ones that are animatable
*usually ones that have px rem em
What are the default width and height of a block-level element?
Width - parent container (all available area)
Height - content (auto)
starts on new line
What are the default width and height of an inline element?
Height - auto
Width - auto
What is the initial display property of “div”?
Block
What is the difference between display: none and visibility: hidden?
display: none - removes element from flow of document
visibility: hidden - does not affect the flow of webpage
What is the difference between block, inline block, inline?
Block - takes all the space
Inline - takes only as much space as needed
Inline block - still can adjust size but only takes as much space needed
Why are CSS resets helpful for cross browser compatibility?
Helps to create consistency among default styling across browsers and lets you start off with the same blank slate instead of trying to fight the browser styling
* Leaving very little up to browser stylesheet
Why is it important to be mindful of what you reset with your CSS resets?
Sometimes you could reset something you don’t mean to or harm the page
What is an argument against using CSS resets?
It slows down the load times of webpage
Might end up resetting that value again anyway
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 and where the element appears on the page?
Element appears relative to where it was originally
Original space remains there, does not affect document flow
How does setting position absolute on an element affect document flow and where the element appears on the page?
Element appears relative to it’s parent container/element (whose position isn’t static)
Taken out of the document flow
What are the box offset properties?
Top Right Bottom Left * affect the positioning of the element when not static
What were floats originally designed for?
Originally designed to allow developers to float text around image element like in print
What are clears for with floats?
No other element within the same parent container can touch the left or right (or both) sides
What is the default flex-direction of a flex container?
flex-direction: row;
What is the default flex-wrap of a flex container?
flex-wrap: no-wrap;
Why should flexbox not be used for building complete web page layouts?
Mostly good for one dimensional layouts (single row or column)
Needs to have set sizing
Why is it important to use a grid system for CSS layouts?
To maintain proper sizing & spacing
Working on a team because allows you better understand code
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?
More flexible/responsive - px would require more work to change
Evenly spaced across container
What is a modal?
CSS display property value that allows you to overlay an element over a parent element or website
** Pop up window in the viewport that we are in control of
What are some use cases for modals?
Error alert Warning before proceeding Ad Verification, login When a news site wants you to subscribe before you can read their news article or turn off adblocker
Why does a modal usually need to occupy the entire height and width of the viewport?
To prevent the user from interacting with the site before you want them to
Give two examples of media features that you can query in an @media rule.
Color, width, height
Which HTML meta tag is used in mobile-responsive web pages?
< meta name=”viewport” content=”width=device-width, initial-scale=1” >
