CSS Flashcards
What are the names of the individual pieces of a CSS rule?
A CSS rule is made up of a Selector, Property, and Value (property and value stored in key-value pairs within the declaration block)
In CSS, how do you select elements by their class attribute?
.classname
denoted with a period
In CSS, how do you select elements by their tag name?
elementname
example:
h1 {
font-size: 24px;
}
In CSS, how do you select an element by its id attribute?
#idname
denoted with a hashtage (#)
example:
#language {
color: red;
}
Name three different types of values you can use to set color in CSS
Keywords (Color name)
Hex Codes
RGB
RGBA
HSL
HSLA
What CSS properties make up the box model?
Margin, Border, Padding, Height, Width
refers to how HTML elements are modeled in browser engines and how the dimensions of those HTML elements are derived from CSS properties
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 and what is it useful for?
a selector that specifies a special state of the selected element(s)
a class that cannot be forced but must be achieved with a special state (ex. user interaction)
Name two types of units that can be used to adjust font-size in CSS.
em, ch, ex, cm, rem
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 (left-to-right)
What is the default flex-wrap of a flex container?
nowrap
What are the three primary components of a page layout?
Container, Row, and Column
What is the minimum number of columns that you should put in a row?
At least one, even if that column takes up the full space
What is the purpose of a container?
It helps with grouping together the components within a page to make layout control easier.
What is the default value for the position property of HTML elements?
static
How does setting position: relative to an element affect document flow?
The element is positioned according to the normal flow of the document, and then offset relative to itself based on the box offset properties
How does setting position: relative on an element affect where it appears on the page?
The offset does not affect the position of any other elements in the document flow.
How does setting position: absolute on an element affect document flow?
Absolutely positioned elements are removed entirely from the document flow
How does setting position: absolute on an element affect where it appears on the page?
the element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block.
How do you constrain an absolutely positioned element to a containing block?
Define each offset property to define the boundary within the containing block
What are the four box offset properties?
top, bottom, left, right
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?
The order in which the rules are written, with rules written towards the bottom over-writing those on top.
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
Inheritance (set desired property to inherit from parent and apply style to parent if its not a property with inherit as a default)
List the three selector types in order of increasing specificity.
No value > Element Type > Class > ID
Why is using !important considered bad practice?
Since it overrides everything it would be difficult to debug, as well as defeat the purpose of the other three components of the Cascade. If rules are written respecting source order, inheritance, and specificity there should be no need to use !important.
The transition property is shorthand for which four CSS properties?
transition-property -selects property to apply transitiontransition-duration -sets duration of transition effecttransition-timing-function -sets acceleration curve of effecttransition-delay -sets delay before transition begins (can be negative)
What does the transform property do?
It allows you to rotate, scale, skew, or translate an element.
Give four examples of CSS transform functions.
rotate(); translate(); skew(); scale();
note that many are shorthands for function-axis such as rotateX() or translateY()
Give two examples of media features that you can query in an @media rule
width, height
link to list of media features
What is the affect of setting an element to display: none?
The element is not displayed and removed from the document flow.
What is a breakpoint in responsive Web design?
It is a point in which content starts to “break” from the viewport sizing.
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?
If it uses a percentage content will scale with viewport size instead of always being a set unit’s size.
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?
This is due to source order, with things at the bottom of the stylesheet taking more importance than those above it.
