CSS Flashcards
What are the names of the individual pieces of a CSS rule?
first part is a selector
followed by opening curly brace of the declaration block
followed by the declaration (property then value)
followed by closing curly brace of the declaration block
In CSS, how do you select elements by their class attribute?
put a dot “.” in front of the class name when declaring the selector
In CSS, how do you select elements by their type?
put just the element name as the selector
In CSS, how do you select an element by its id attribute?
put a hash (#) symbol in front of the id
Name three different types of values you can use to specify colors in CSS.
RGB
hexcode
name of color
What CSS properties make up the box model?
Margin
border
padding
height
width
Which CSS property pushes boxes away from each other?
margin
Which CSS property adds space between a box’s content and its border?
padding
What is a pseudo-class?
a keyword added to a CSS selector that species a special state that the selector is in
What are CSS pseudo-classes useful for?
styling of elements in relation to external factors and in relation to the document tree
ie change appearance of elements when a user interacts with them
Name two types of units that can be used to adjust font-size in CSS.
px
em
percent (%)
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 (meaning all flex items will try to be kept on one line)
Why do two div elements “vertically stack” on one another by default?
because they are block elements meaning they start on a new line and take up that entire line
What is the default flex-direction of an element with display: flex?
row
What is the default value for the position property of HTML elements?
static (each block level element sits on top of the next one.)
How does setting position: relative on an element affect document flow?
it does not affect the document flow, relative position only affects the position of the element.
ie you move the element and it will shift over to wherever you tell it to without shifting any surrounding items
How does setting position: relative on an element affect where it appears on the page?
it shifts the targeted element a certain distance away from where its original position would have been in the normal flow
How does setting position: absolute on an element affect document flow?
absolute takes the element out of the normal flow and shifts the next element into its original spot.
How does setting position: absolute on an element affect where it appears on the page?
it will either lay on top or behind the surrounding elements.
How do you constrain an absolutely positioned element to a containing block?
set the position of the containing block to “relative”
What are the four box offset properties?
top
right
bottom
left
What are the four components of “the Cascade”
Source order
Inheritance
specificity
!important
What does the term “source order” mean with respect to CSS?
the order that CSS is written in the stylesheet.
the last ruleset on the list takes priority.
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
inheritance
apply the css rule to only the parent and no css rule to the children
the children will “inherit” the parents’ css styling if the children have no specified styling
List the three selector types in order of increasing specificity.
type selector (elements and pseudo elements) class selector (classes and pseudo classes ID selector
Why is using !important considered bad practice?
makes it harder to debug because it breaks the natural cascading of your stylesheet.
What does the transform property do?
lets you ‘transform’ the image by rotating, skewing, scaling, or translating an element
modifies the coordinate space of the css.
Give four examples of CSS transform functions.
matrix translate scale rotate skew
Give two examples of media features that you can query in an @media rule.
color
device-height
device-width
min-width
The transition property is shorthand for which four CSS properties?
transition-property
transition-duration
transition-timing-function
transition-delay
What is the effect of setting an element to display: none?
it “hides” the targeted element and all its descendants. it is removed from the document flow and is no longer visible.
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?
it scales down/up with the window if it is a percent. fixed width will try to keep the width the same size no matter what
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?
because of “cascading”. more specificity towards the rules closer to the bottom.
