CSS Flashcards
What are the names of the individual pieces of a CSS rule?
Inside a CSS ruleset:
Selector + Declaration Block
Inside the Declaration Block:
Opening.Curly Braces ( { ) + Property + Value + Closing Curly Braces ( } )Inside a CSS ruleset:
Selector + Declaration Block
Inside the Declaration Block:
Opening.Curly Braces ( { ) + Property + Value + Closing Curly Braces ( } )
In CSS, how do you select elements by their class attribute?
period (dot) before class title
e.g. .class_name { };
In CSS, how do you select elements by their type?
Element name { } ;
In CSS, how do you select an element by its id attribute?
Hash-tag before the id title
e.g. #id_title { };
Name three different types of values you can use to specify colors in CSS.
Hex
RGBa
RGB
HSL (Hue Saturation Lighting)
HSLa
Color Name
What CSS properties make up the box model?
Margin
Border
Padding
Which 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?
A pseudo-class is added to a selector to specify a certain interaction that occurs when the user interacts with the selected element/id/class specified.
:hover
:focus
:active
What are CSS pseudo-classes useful for?
CSS pseudo-class is useful for changing the appearance of elements when a user is interacting with them.
Name two types of units that can be used to adjust font-size in CSS.
px - pixels
rem - root em (approx. 16px)
% - percentage
What CSS property controls the font used for the text inside an element?
font-family property
What is the default flex-direction of a flex container?
flex-direction: row (default)
Default direction is left to right which is in a “row”
What is the default flex-wrap of a flex container?
flex-wrap: no-wrap (default)
default flex-wrap for a container is no-wrap which means all on one line
Why do two div elements “vertically stack” on one another by default?
div elements are block-type elements and so will start a new line when “stacked” on one another
What is the default flex-direction of an element with display: flex?
flex-direction: row (default)
Left to Right
What is the default value for the position property of HTML elements?
position: static (default)
How does setting position: relative on an element affect document flow?
Relative position does not affect document flow and only affects the elements own positioning based on its original/relative spot.
How does setting position: relative on an element affect where it appears on the page?
position: relative shifts the element relative to its original location
How does setting position: absolute on an element affect document flow?
Absolute positioning removes the element from the flow of the document
How does setting position: absolute on an element affect where it appears on the page?
Positions the element according to either an ancestor element with position:relative or to the entire page
How do you constrain an absolutely positioned element to a containing block?
Applying position: relative to its containing block
What are the four box offset properties?
position: static;
position: relative;
position: absolute;
position: fixed;
What are the four components of “the Cascade”.
Source Order
Inheritance
Specificity
!important
What does the term “source order” mean with respect to CSS?
The order that your CSS rules are written in your stylesheet
Lower the ruleset, the more priority it has
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
Inheritance means that certain CSS properties on a child HTML element can receive value from a parent element if no CSS for that property is directly declared on the child element
List the three selector types in order of increasing specificity.
1) ID Selector
2) Class Selector
3) Element Selector
Why is using !important considered bad practice?
Putting !important on a CSS ruleset may throw away all cascade components of the stylesheet and may ruin the organization of a CSS stylesheet
Give two examples of media features that you can query in an @media rule.
min-width
max-width
Which HTML meta tag is used in mobile-responsive web pages?
< meta = “viewport” >
Viewport meta tag
What is a breakpoint in responsive Web design?
Breakpoint is a point in the viewport size where the layout would change
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?
% width adapts to the viewport sizing
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?
