CSS Flashcards
(33 cards)
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
