CSS Flashcards
What are the names of the individual pieces of a CSS rule?
Selectors and Declarations
Property and Value
In CSS, how do you select elements by their class attribute?
You put a period . in front of the class attribute value
.class-name
In CSS, how do you select elements by their type?
You put whatever element type is followed by curly braces
p {} h1 {} h2 {} div {} em {} span {}
In CSS, how do you select an element by its id attribute?
id-name
You put a pound symbol # in front of the id attribute value
Name three different types of values you can use to specify colors in CSS.
RGB Value, Hex Codes, Color Names
What CSS properties make up the box model?
border, margin, and padding
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 selector that specifies a special state of the selected element(s)
Pseudo-classes only apply when the element is in a certain state
What are CSS pseudo-classes useful for?
Webpage interaction
Pseudo-classes allow us to write less code
Name at least two units of type size in CSS.
Em, pixels, and percentages
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?
The default direction is row - from left to right
What is the default flex-wrap of a flex container?
No-wrap is the default which makes all the items try to fit on one line
Wrap allows the content to be displayed on multiple lines from top to bottom
Why do two div elements “vertically stack” on one another by default?
They are block elements so they begin on a new line
What is the default flex-direction of an element with display: flex?
Rows, from left to right
What is the default value for the position property of HTML elements?
Static - No difference from the normal flow
How does setting position: relative on an element affect document flow?
It does not. Other elements stay in the position they would be in normal flow
How does setting position: relative on an element affect where it appears on the page?
You can move the element top, right, bottom, or left of its original position
How does setting position: absolute on an element affect where it appears on the page?
It places the element in relation to its containing element. Absolute positioned elements will MOVE as you scroll on the page.
It no longer has a place in the document flow.
When it is positioned to absolute, it needs to be positioned to it’s parent element or class. It cannot be a static positioning.
How do you constrain an absolutely positioned element to a containing block?
It positions itself relative to the parent element or class, as long as the parent element or class is not static.
What are the four box offset properties?
Top, bottom, left, and right
What are the four components of “the Cascade” (What gets prioritized)?
Source Order, Specificity, Inheritance, !important
What does the term “source order” mean with respect to CSS?
Whichever class or element comes last in the stylesheet will be the rule that is applied
How is it possible for the styles of an element to be applied to it’s children as well without an additional CSS Rules?
Inheritance - Children elements inherit the parent elements css rule.
List three selector type in order of increasing specificity.
Type Selectors > Class Selectors > ID Selectors (Weakest to strongest specificity)
Why is using !important considered bad practice?
It makes debugging more difficult by breaking the natural cascading in your stylesheets
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, scale, skew, translate
The transition property is shorthand for which four CSS properties?
Delay, Duration, Property, Timing-Function
Give two examples of media features that you can query in an @media rule.
display mode, forced colors, height, hover, screen, print
Which HTML meta tag is used in the mobile-responsive web pages?
meta name=”viewport”
content=”width=device-width, initial-scale=1”
What is a breakpoint in responsive web design?
A breakpoint is the point at which a media query is introduced.
It’s where you want to snap your layout to a different set of proportions.
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
This allows you to adjust the size of the elements in comparison to the size of the browser or viewport instead of a static/hard coded pixel size
This influences a ‘fluid’ design rather than ‘static’ design
If you introduce CSS rules for a smaller min-width after the style for a larger min-width in your style sheet, the CSS rules for the smaller min-width will “win”. Why is that?
Source order.
