CSS Flashcards
what are the individual pieces of a css rule?
css selector (element, class, id, etc), declaration block; within declaration block is property and value
how to select elements by their class attribute?
.class-name {}
how to select elements by their type?
element-name {}
How to select elements by their id?
id-name{}
Three different types of values to choose color in CSS
hexcode, rgb(), hsla, prebaked css color
how do you link a css stylesheet to an index html?
link href=”location-of-stylesheet.css” rel=”stylesheet” type=”text/css”
What is a descendant combinator selector and how do you use it?
selects all elements that are descendants of the first element.
parent-element “ [single space] “ child-element {}
What is a child combinator selector and how do you use it?
only uses direct children of the parent element.
parent-element > child-element {}
what css properties make up the box model?
margin, padding, border
which css property pushes boxes away from each other?
margin
what css property adds space between a box’s content and its border?
padding
what is a pseudo class?
a selector that targets an element in a certain state (being hovered, active, focus)
what are pseudo-classes useful for?
for selecting targets in a certain state and applying additional properties (e.g. changing the color of a button when hovered)
2 types of units that can be used to adjust font-size
rem, em , px size
what css property controls font used for text?
font-family
What is a fall-back value for fonts?
backup font a browser typically has in case that browser or program does not have that font initially specified (typically serif/sans-serif)
Difference between sans-serif and serif?
serifs are the extra little flare at the end of letters (e.g. times new roman), refer to all fonts with it , sans-serif do not have the serif (arial)
What is the default direction of flex-box?
flex-direction: row
what is the default flex-wrap of a flex container?
no-wrap
what is the difference between justify content and align items?
same thing along different axes
difference between align items and align content
align items affects the single row that all the flex children are in, align content affects all the rows inside the larger container.
why do two div elements vertically stack on each other?
because they are block level elements; their width is automatically set to 100% of the page so the next block element is automatically bumped below
What is the default value for the position property of the HTML elements
static
How does setting position:relative on the element affect document flow
does not change document flow
How does setting position: relative on an element affect where it appears on the page?
setting position to relative without changing any other property values does not affect where the element appears on the page
How does setting position: absolute on a page affect document flow?
It is ignored by the document flow; it’s as if it’s not there
How does setting position absolute on an element affect where it appears on the page?
It goes to the top left corner of the closest non-static (usually relative, absolute) element.
How do you constrain an absolutely positioned element to a containing block
set the containing block to anything but static (usually relative/absolute)
What are the four box offset properties?
top bottom right left
what are the four components of “the cascade”
source order, inheritance, specificity and !important
what does the term “source order” mean with respect to css?
assuming the same specificity, in the case an element has been declared a value multiple times, the value last/lower down on the css style sheet is applied.
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
some properties are naturally inherited from the parent/ancestor elements
list three selector types in order of increasing specificty
type selector, class selector, id selector
why is using !important considered bad practice?
breaks the whole “cascade” system by overriding everything, makes it extremely hard to debug; the only thing that compete with !important is another !important
what does the transform property do
every css element is place in a coordinate space on the page, transform lets you adjust those coordinates
give four examples of css transform functions
matrix, translate, rotate, scale, skew
the transition property is shorthand for which four css properties?
transition-property, transition-duration, transition-timing-function, transition-delay
what is a breakpoint in responsive Web design
it is a certain point you want the style of your webpage to change at
what is the advantage of using percentage instead of a fixed width for a column class in a responsive layout?
It makes it more adaptive in relation to its parent class, if the viewport changes or its viewed on a different device, the column class wont , for example, take up the entire screen as it would if the width were at a fixed pixel count
if you introduce css rules for a smaller min-width after the style for a larger min-width, why would the css rules fo r the smaller min-width ‘win’?
because of source order - treated with the same specificity as css class selectors
