CSS Flashcards
[CSS Syntax]
What are the names of the individual pieces of a CSS rule?
selector {declaration block}
property: value;
[CSS Syntax]
In CSS, how do you select elements by theirclassattribute?
a period before the element
.element
[CSS Syntax]
In CSS, how do you select elements by their type?
element name
[CSS Syntax]
In CSS, how do you select an element by itsidattribute?
poundsign / hashtag element name
#element
[CSS Colocs]
Name three different types of values you can use to specify colors in CSS.
Hex value, RGBA values, color name
[CSS Box Model]
What CSS properties make up the box model?
margin, border, padding, content/element
[CSS Box Model]
Which CSS property pushes boxes away from each other?
Margin
[CSS Box Model]
Which CSS property add space between a box’s content and its border?
Padding
[CSS Pseudo Classes]
What is a pseudo-class?
A class applied by the browser for special states or html structure
[CSS Pseudo Classes]
What are CSS pseudo-classes useful for?
For simplifying CSS and styling elements in relation to how they are interacted with
[CSS Fonts]
Name two types of units that can be used to adjustfont-sizein CSS.
px, em, rem, %
[CSS Fonts]
What CSS property controls the font used for the text inside an element?
font-family
Is a div a block-level element or inline?
Block-level element
[CSS Flexbox]
What is the default flex-direction of a flex container?
row (left to right)
[CSS Flexbox]
What is the default flex-wrap of a flex container?
no wrap (all flex items on one line)
What unit of size is best for sizing elements that grow and shrink?
rem
[CSS Layout classes]
Why do two div elements “vertically stack” on one another by default?
because they are block elements
[CSS Layout Classes]
What is the defaultflex-directionof an element withdisplay: flex?
row (left to right)
What is the purpose of a row class in an html layout?
sections content in vertical chunks
What is the purpose of a column class in an html layout?
sections content in horizontal chunks
What are utility classes in CSS?
class selectors with specific CSS properties to be easily repeated for multiple HTML elements by adding the class
[CSS Positioning]
What is thedefaultvalue for thepositionproperty of HTML elements?
position: static
[CSS Positioning]
How does settingposition: relativeon an element affect document flow?
everything stays the same as normal flow
[CSS Positioning]
How does settingposition: relativeon an element affect where it appears on the page?
The element will be then moved based on where it was originally placed in the document flow
[CSS Positioning]
How does settingposition: absoluteon an element affect document flow?
The element is taken out of the normal flow (surrounding elements will take up it’s place)
[CSS Positioning]
How does settingposition: absoluteon an element affect where it appears on the page?
It appears overlapping (like photoshop layers) elements on the page within the closest NON-static positioned container
[CSS Positioning]
How do you constrain an absolutely positioned element to a containing block?
Placing it inside a non-static positioned container
[CSS Positioning]
What are the four box offset properties?
top, bottom, left, right
[CSS Positioning]
What is position: fixed?
An element that will stay on the window; no matter how far a page is scrolled it will not move.
[CSS Cascade]
What are the four components of the Cascade?
Source order
Inheritance
Specificity
[CSS Cascade]
What does the term ‘source order’ mean with respect to CSS?
When all other things are equal, the lower a rule or file is declared, the stronger it is.
[CSS Cascade]
How is it possible for the styles of an element be applied to its children as well without an additional CSS rule?
inheritance (as a value)
[CSS Cascade]
List the three selector types in order of increasing specificity.
- ID selectors
- Class selectors
- Type selectors
[CSS Cascade]
Why is using !important considered bad practice?
It breaks the natural cascading in stylesheets, making debugging more difficult.
[CSS Transforms]
What does the transform property do?
allows for rotating, scaling, skewing or translating elements on a coordinate plane
[CSS Transforms]
Give four examples of CSS transform functions.
rotate()
translate()
scale()
skew()
[CSS Responsive Layouts]
What is a breakpoint in responsive web design?
It’s a condition for applying certain css rules
[CSS Responsive Layouts] What is the advantage of using a percentage width instead of a fixed width for a column class in responsive layout?
It will adjust the percentage according to the viewport size.
[CSS Responsive Layout]
If you introduce CSS rules for a smaller min-width after the styles for a larger min-width in your stylesheet, the CSS rules for the smaller min-width will ‘win’. Why is that?
because of source order
