CSS Flashcards
body {
color: #090302;
font-family: sans-serif;
}
- CSS rule set
- body (selector) (CSS selector for the body element)
- opening curly brace for declaration block (block of declarations)
- color: #090302; (declaration)
- color (property)
- # 090302; (value)
shorthand property
multiple values
What are the names of the individual pieces of a CSS rule?
selector, declaration block, property, value
In CSS, how do you select elements by their class attribute?
.
In CSS, how do you select elements by their tag name?
element name
In CSS, how do you select an element by its id attribute?
#
Name three different types of values you can use to specify colors in CSS.
rgb, hsl, hcv, color keywords
rgb (244,249,251)
css function rgb with arguments 244 249 251
What CSS properties make up the box model?
It consists of: height, width, margins, borders, padding, and the actual content.
Which CSS property pushes boxes away from each other?
margin (puffy jacket, you’re same size)
Which CSS property add space between a box’s content and its border?
padding (weight you put on) (pee-pad)
What is a pseudo-class?
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, the pseudo-class :hover can be used to select a button when a user’s pointer hovers over the button and this selected button can then be styled.
What are CSS pseudo-classes useful for?
Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on certain form elements), or the position of the mouse (like :hover, which lets you know if the mouse is over an element or not).
Name two types of units that can be used to adjust font-size in CSS.
pixels, percentage, ems
preferred: rem
What CSS property controls the font used for the text inside an element?
font-family
What is the default flex-direction of a flex container?
row - horizontal
What is the default flex-wrap of a flex container?
default flex-wrap: nowrap
Why do two div elements “vertically stack” on one another by default?
block element
What is the default flex-direction of an element with display: flex?
row-horizontal
What are the three primary components of a page layout? (Which helper classes do you need?)
container, column, row
What is the minimum number of columns that you should put in a row?
at least 1
What is the purpose of a container?
boundary for content
container class
only max-width: (800px) and margin: 0 auto;
.column-full
always flex-basis: 100%
donkey and mario
calc(200% / 3)
What is the default value for the position property of HTML elements?
Normal flow (static)
Every block-level element
appears on a new line, causing
each item to appear lower down
the page than the previous one.
How does setting position: relative on an element affect document flow?
Relative Positioning (out of body experience)
This moves an element from the
position it would be in normal
flow, shifting it to the top, right,
bottom, or left of where it
would have been placed. This
does not affect the position of
surrounding elements; they stay
in the position they would be in
in normal flow
How does setting position: relative on an element affect where it appears on the page?
This moves an element from the
position it would be in normal
flow, shifting it to the top, right,
bottom, or left of where it
would have been placed.
How does setting position: absolute on an element affect document flow?
Absolute positioning
This positions the element
in relation to its containing
element. 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).
Absolutely positioned elements
move as users scroll up and
down the page.
The heading is positioned to the
top right, and the paragraphs
start at the top of the screen (as
if the heading were not there).
How does setting position: absolute on an element affect where it appears on the page?
This positions the element
in relation to its containing
element. 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).
(looks for a non static ancestor)
(use only to layer something on top of another element)
How do you constrain an absolutely positioned element to a containing block?
Floating Elements
Floating an element allows
you to take that element out
of normal flow and position
it to the far left or right of a
containing box. The floated
element becomes a block-level
element around which other
content can flow
What are the four box offset properties?
offset
properties (top or bottom and
left or right)
.pokemon > img {
}
img direct child of pokemon
Give two examples of media features that you can query in an @media rule.
min-width & orientation
Which HTML meta tag is used in mobile-responsive web pages?
<meta></meta>
What is a breakpoint in responsive Web design?
There are now far too many devices, with a huge variety of sizes, to make that feasible. This means that instead of targeting specific sizes for all designs, a better approach is to change the design at the size where the content starts to break in some way.
What is the advantage of using a percentage (e.g. 50%) width instead of a fixed (e.g. px) width for a “column” class in a responsive layout?
scaling
If you introduce CSS rules for a smaller min-width after the styles for a larger min-width in your style sheet, the CSS rules for the smaller min-width will “win”. Why is that?
source order
What are the four components of “the Cascade”.
source order / inheritance /specificity / !important
What does the term “source order” mean with respect to CSS?
Source order is, simply put, the order that your CSS rules are written in your stylesheet. The styling provided for an element last(bottom) in your stylesheet is the styling that will ultimately take effect.
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.
no value -> type -> class -> ID
Why is using !important considered bad practice?
When conflicting declarations from the same origin and cascade layer with the !important flag are applied to the same element, the declaration with a greater specificity is applied.
The transition property is shorthand for which four CSS properties?
The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.
What does the transform property do?
The transform CSS property lets you rotate, scale, skew, or translate an element.
Give four examples of CSS transform functions.
matrix, perspective, scale, skew (translate/rotate most common)
