CSS Flashcards
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
What does the term ”source order” mean with respect to CSS?
he order in which the css appears in
the code
How is it possible for the styles of an element to be applied to its children as well without an additional
CSS rule?
They inherit the format
List the three selector types in order of increasing specificity.
ID, Class, then Type
Why is using !important considered bad practice?
This command will override all other declarations
associated. So, it may ruin the style elsewhere in a page
What does the transform property do?
They allow us to modify something on a webpage
Give four examples of CSS transform functions.
matrix, translate, scale, rotate, skew, and scale-
translate
The transition property is shorthand for which four CSS properties?
It is a short hand for transition-property, transition-duration, transition-timing-function, and transition-delay.
Give two examples of media features that you can query in an @media rule.
media height and width
Which HTML meta tag is used in mobile-responsive web pages?
The viewport meta tag
What is a breakpoint in responsive Web design?
Breakpoint is a “point” at which a website’s content
and design will adapt in a certain way in order to provide the best possible user experience
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?
Using percentages will allows us to be able to always adapt
properly to the device the page is being viewed on
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 because the order in
which the rules are executed matter. Since the lower rule is being looked at later, that rule is the most
current one. This is called the source order of the cascade
