CSS Flashcards
What are the names of the individual pieces of a CSS rule?
Ruleset | Declaration block
selector {
declaration;
property: value;
}In CSS, how do you select elements by theirclassattribute?
.class { }
In CSS, how do you select elements by their type?
element { }
In CSS, how do you select an element by itsidattribute?
id { }
Name three different types of values you can use to specify colors in CSS.
RGB values - rgb(100,100,90) - express colors in terms of how much red, green, and blue are used to make up it up, 0 - 255
Hex codes - #ee3e80 - six-digit codes that represent the amount of red, green, and blue in a color, preceded by a #
Color names - 147 predefined color names that are recognized by the browser
RGBA, HSL, HSLA
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 add space between a box’s content and its border?
Padding
What is a pseudo-class?
A keyword added to a selector that specifies a special state of the selected elements
Pseudo classes are applied by browsers, not written by developers
:hover, :active, :focus, :visited, :checked
What are CSS pseudo-classes useful for?
Lets you apply a style to an element not only in relation to the content of the document tree, but also in relation to eternal factors like that history of the navigator (:visited), the status of its content (:checked), or the position of the mouse (:hover)
Name two types of units that can be used to adjustfont-sizein CSS.
Pixels - very precise control over how much space their text takes up Percentages - default size of text in browsers is 16px
Ems - is equivalent to the width of a letter m
Rems - based on root 16px
What CSS property controls the font used for the text inside an element?
font-family
What is the defaultflex-directionof aflexcontainer?
flex-direction: row
What is the defaultflex-wrapof aflexcontainer?
flex-wrap: nowrap
Why do two div elements “vertically stack” on one another by default?
div elements are block-level element
What is the defaultflex-directionof an element withdisplay: flex?
row
What is thedefaultvalue for thepositionproperty of HTML elements?
position: static
How does settingposition: relativeon an element affect document flow?
Does not affect the position of surrounding elements; they stay in the position they would be in normal flow
How does settingposition: relativeon an element affect where it appears on the page?
Relative positioning moves an element in relation to where it would have been in normal flow
How does settingposition: absoluteon an element affect document flow?
It is taken out of normal flow, meaning that it does not affect the position of any surrounding elements (as they simply ignore the space it would have taken up. Positions elements in relation to its containing element.
How does settingposition: absoluteon an element affect where it appears on the page?
Absolutely positioned elements sits at the top left corner of the nearest ancestor element with position property value set to non static values
How do you constrain an absolutely positioned element to a containing block?
Set containing block (ancestor element) to position property: relative
Relative has least amount of repercussion to document flow
What are the four box offset properties?
top, bottom, left, right
What are the four components of “the Cascade”.
Source order, specificity, inheritance, importance
What does the term “source order” mean with respect to CSS?
When the specificity weight of the rules is the same, then ruleset that comes last in the CSS will win.
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
Inheritance
List the three selector types in order of increasing specificity.
Element, Class, ID
Why is using!importantconsidered bad practice?
Overrides cascade
What does the transform property do?
Lets you rotate, scale, skew, or translate and element, modifies the coordinate space of the CSS visual formatting model
Give four examples of CSS transform functions.
translate(length-percentage values) rotate(angle) scale() skew() matrix()
Thetransitionproperty is shorthand for which four CSS properties?
Transition-delay
Transition-duration
Transition-property
Transition-timing-function
What is abreakpointin responsive Web design?
The points at which a media query is introduced
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?
Percentages will give wiggle room vs fixed width will remain at specified width regardless of the size of the browser
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
*Media queries should be at the bottom of the same file as original rule
