CSS Flashcards
(36 cards)
What are the names of the individual pieces of a CSS rule
Each new rule is called a rule set. A rule set consist of a selector, followed by a declaration. Inside a declaration, we have a property followed
by a value
In CSS, how do you select elements by their class attribute?
Class attributes are selected by starting with a . followed by a value. ie, .note selects all elements with class attribute that has a value of note
In CSS, how do you select elements by their tag name?
We would type the element name as the selector
In CSS, how do you select an element by its id attribute?
ID attributes are selected by # followed by
their value. ie, #introduction targets elements whose id attributes has a value of introduction
Name three different types of values you can use to specify colors in CSS.
RGB values, hex codes, and color names
What CSS properties make up the box model?
Content, padding, border, and margin makes up the
box model
Which CSS property pushes boxes away from each other?
The margin pushes boxes away from each
other
Which CSS property add space between a box’s content and its border?
Padding adds space between a box’s content and its border
What is a pseudo-class?
They are classes that allow changes in appearance for an element when a user
is interacting with them. They are :hover, :active, and :focus
What are CSS pseudo-classes useful for?
They are useful for responding to user inputs and adding
effects due to user interaction
Name two types of units that can be used to adjust font-size in CSS.
Pixels, percentages (default web
browser is 16 px. This gives us a percentage of the default), em (this is allowing us to change the text
size based off of being relative to the parent class), rem
What CSS property controls the font used for the text inside an element?
font-family controls the font
used for the text inside an element
What is the default flex-direction of a flex container?
The default flex-direction of a flex container is
row
What is the default flex-wrap of a flex container?
nowrap is default. This will insure all flex items will
be on one line
Why do two div elements ”vertically stack” on one another by default?
this is because they are display block elements and takes up the whole space on a row
What is the default flex-direction of an element with display: flex?
Flex row is the default direction
What is the default value for the position property of HTML elements?
The default value is static
How does setting position: relative on an element affect document flow
This will not affect document
flow. However, This moves the an element from the position where it would normally be to any
direction without affecting the surrounding elements. It is like, taking up the same space it would
normally does, but visually it will be displaced
How does setting position: relative on an element affect where it appears on the page
It will be shifted
vertically/horizontally from it’s normal position
How does setting position: absolute on an element affect document flow?
The element with absolute
positioning is taken out of the normal flow. It will have no affect on the other elements in the flow
How does setting position: absolute on an element affect where it appears on the page?
The absolute
element will position to be the closest non-static ancesto
How do you constrain an absolutely positioned element to a containing block?
We can use the containing element by giving it a position of non-static. This will give a boundary to their decedents. They
are used to be a container for their children
What are the four box offset properties?
The four box offset properties are: top, bottom, left, and
right
What are the four components of ”the Cascade”.
Source order, inheritance, specificity, and important
