CSS Flashcards
What are the names of the individual pieces of a CSS rule?
A ruleset has a selector and a declaration block
A declaration block consists of at least 1 declaration
A declaration is one property and one value
In CSS, how do you select elements by their class attribute?
“.className”
In CSS, how do you select elements by their type?
Just state it
In CSS, how do you select an element by its id attribute?
“#elementId”
Name 3 different types of values you can use to specify colors in CSS.
- hexadecimals
- colors
- RGB
What CSS properties make up the box model?
- margin
- border
- padding
What 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?
Keyword added to CSS selectors to target elements under certain states
What are CSS pseudo-classes useful for?
Helps with responding to users, making the page feel more interactive
Name 2 types of units that can be used to adjust font-size in CSS.
- px
- em
What CSS property controls the font used for the text inside the element?
Font-family
What is the default flex-direction of a flex container?
Row, which means items will be arranged horizontally from left to right
What is the default flex-wrap of a flex container?
No-wrap, which means all items will fit on one line
Why do two div elements “vertically stack” on one another by default?
Div elements are block elements
What is the default flex-direction of an element with display:flex?
Row (left to right)
What is the purpose of the “container” class in the layout class system?
Holds the rows and columns of the page layout. Generally contains ‘max-width’ and ‘margin’
What is the purpose of the “row” class in the layout class system?
Sections off vertical chunks of content in the page
Row class contains display: flex
Contains column
What is the purpose of the “column” class in the layout class system?
Sections off horizontal chunks of content in the page
Column class contains width value
Can contain rows (which could contain further columns)
What is the default value for the position property of HTML elements?
Position: static
How does setting position:relative on an element affect document flow?
It doesn’t affect document flow
How does position relative on an element affect where it appears on the page?
It doesn’t affect where it appears, but the element can be shifted from that position using ‘top’, ‘bottom’, ‘left’, ‘right’
How does setting position:absolute on an element affect document flow?
The element is taken out of the document flow and other elements act as if it wasn’t there
How does setting position:absolute on an element affect where it appears on the page?
Once the other elements are in place, the absolute element that was taken out of place is now relative to the first non-static parent
If there is no non-static parent, the element is positioned relative to its containing block
How do you constrain an absolutely positioned element to a containing block?
Because absolutely positioned elements are positioned relative to the closest non-static parent, you would make the containing block non-static
What are the 4 box offset properties?
- top
- bottom
- left
- right
What are the 4 components of “the Cascade”.
- Source order
- Inheritance
- Specificity
- !important
What does the term “source order” mean with respect to CSS?`
If an element has 2 competing CSS rules with the same level of specificity applied, the one that comes later in the stylesheet 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?
Some CSS properties are inherently inherited from parent elements if not speficied
List 3 selector types in order of increasing specificity.
element < class < id
Why is using !important considered bad practice?
It breaks the natural cascade which makes it difficult to debug issues.
What does the transform property do?
It allows an element to be scaled, skewed, rotated, to transformed depending on what transform function is being used for the value
Give 4 examples of CSS transform functions.
- Rotate
- TranslateY
- TranslateX
- Scale
The ‘transition’ property is shorthand for which 4 CSS properties?
- Transition property
- Transition duration
- Transition delay
- Transition timing function
Give 2 examples of media features that you can query in a @media rule.
- Screen width (min width)
- Screen height
Which HTML meta tag is used in mobile-responsive web pages?
Viewport meta tag
What is a breakpoint in responsive Web design?
A breakpoint is a condition that, when met, will adjust the CSS of the page to be responsive to the device/conditions
What is the advantage of using a percentage (ex- 50%) width instead of a fixed (ex- px) width for a column class in a responsive layout?
Using pixels could lead to inconsistent breakpoint across devices since not all devices operate on the same scaling rules. Percentages provide more consistency
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?
The source order
