CSS Flashcards
What CSS properties make up the box model?
Margin, Padding, border, width and height
Which CSS property pushes boxes away from eachother?
Margin
What CSS property adds space between a box’s content and its border?
padding
What are the names of individual pieces of a css rule set?
Selector and Declaration Block
CSS selector for id attribute?
id
CSS select elements by type?
element
CSS selector for element by class?
.class
What are the three different types of values you can use to specify colors in CSS?
RGB, Hexadecimal and color name
What is a pseudo-class?
pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).
Two types of units that. can be used to adjust font size in CSS
px, em, %
What CSS property controls the font used for the text inside an element?
font-family
Default direction of a flex cotainer/ direction of an element with display: flex
row
default flex wrap of flex container
nowrap
why do two divs vertically stack on one another by default?
block
Default value for the position property of HTML elements?
Static
How does setting position: relative affect document flow?
moves an element in relation to where it would have been in normal flow ex left: 10px;
how does position: absolute; affect normal flow?
taken out of normal flow and no longer affects other elements on a page
how do you constrain an absolutely positioned element to a containing block?
set its ancestor to position relative
what are the four box offset properties?
left right top bottom
the four components of the cascade
source order, inheritance, specificity and !imporant
what does the term source order mean with CSS?
the order from left to right of the styles applied to an element.
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
inherit property
List the three selector types in order of increasing specificity.
*Type selectors, class selectors, ID selectors
Why is using!importantconsidered bad practice?
it makes debugging more difficult by breaking the natural cascading in your stylesheets
- What does the transform property do?
- Lets you modify the coordinate space of the css visual formatting
- Give four examples of CSS transform functions.
- Rotate x rotate y , scale, transform.
- Name four transition properties
- Transition, duration, timing function, delay property
whats a breakpoint in responsive web design?
CSS breakpoints are the points added in the code, the website content responds to these points depending on the device screen size
- What is the advantage of using a percentage (e.g.50%)widthinstead of a fixed (e.g.px)widthfor a “column” class in a responsive layout?
its got wiggle room on different screen sizes within the media query
- If you introduce CSS rules for a smallermin-widthafterthe styles for a largermin-widthin your style sheet, the CSS rules for thesmallermin-widthwill “win”. Why is that?
source order
