CSS Flashcards
CSS Syntax:
What are the names of the individual pieces of a CSS rule?
a selector and a declaration
(a declaration is made up of a property and property value)
CSS Syntax:
In CSS, how do you select elements by their class attribute?
.nameOfClassAttribute
CSS Syntax:
In CSS, how do you select elements by their tag name?
just their name
CSS Syntax:
In CSS, how do you select an element by its id attribute?
(pound)nameOfIdAttribute
CSS Colors:
Name three different types of values you can use to specify colors in CSS
rgb values, hex code, color names
CSS Box Model:
What CSS properties make up the box model?
margin, border, padding, and content (height/width)
CSS Box Model:
What 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 Class:
What is a pseudo-class?
it is a selector that selects elements that are in a specific state
CSS Pseudo Class:
What are CSS pseudo-classes useful for?
pseudo classes let you apply style to an elements that are in a specific state
CSS Fonts:
Name two types of units that can be used to adjust font-size in CSS
pixels, rem
CSS Fonts:
What CSS property controls the font used for the text inside an element?
font-family
CSS Flexbox:
What is the default flex-direction of a flex container?
left to right
CSS Flexbox:
What is the default flexwrap of a flex container?
nowrap, all on one line
CSS Layout Classes:
Why do two div elements “vertically stack” on one another by default?
They vertically stack because they are block elements
CSS Layout Classes:
What is the default flex-direction of an element with display: flex?
Row
CSS Layout Classes:
What are the three primary components of a page layout? (which helper classes do you need?)
Containers. Rows. Columns.
CSS Layout Classes:
What is the minimum number of columns that you should put in a row?
at least ONE
CSS Layout Classes:
What is the purpose of a container?
It sets a boundary for the layout (content) by giving it a max-width
CSS Positioning:
What is the default value for the position property of HTML elements?
static
CSS Positioning:
How does setting position: relative on an element affect document flow?
there is no affect to document flow
CSS Positioning:
How does setting position: relative on an element affect where it appears on the page?
it would move relative to where it exists in a static position
CSS Positioning:
How does setting position: absolute on an element affect document flow?
it becomes removed from the document flow completely
CSS Positioning:
How does setting position: absolute on an element affect where it appears on the page?
it’ll get positioned within the boundaries of its nearest non-static ancestor
CSS Positioning:
How do you constrain an absolutely positioned element to a containing block?
the container or parent has to be relative
CSS Positioning:
What are the four box offset properties?
top/bottom/left/right
CSS Cascade:
What are the four components of “the Cascade”?
source order, inheritance, specificity, and !important rule
CSS Cascade:
What does the term “source order” mean with respect to CSS?
it means that the styling provided closer to the bottom of the file will take affect
CSS Cascade:
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
through Inheritance:
when certain css properties on a child element can receive value from a parent element if no css for that property is declared on the child element
CSS Cascade:
List the three selector types in order of increasing specificity
Id 1-0-0 weight value (highest)
class 0-1-0 weight value
element type 0-0-1 weight value
no value (universal selector) (lowest)
CSS Cascade:
Why is using !important considered bad practice?
-it overrides any other declaration within the same cascade layer and origin
-it reverses the cascade order of stylesheets
as long as you understand the cascade, you won’t need to use the !important flag
CSS Transform:
What does the transform property do?
the transform property lets you modify an element (rotate, skew, scale, translate)
CSS Transform:
Give four examples of CSS transform functions
rotate, scale, skew, translate
CSS Transitions:
The transition property is shorthand for which four CSS properties?
transition property
transition duration
transition timing function
transition delay
CSS Media Queries:
Give two examples of media features that you can query in an @media rule
min-width, max-width
CSS Media Queries:
Which HTML meta tag is used in mobile-responsive web pages?
viewport
CSS Responsive Layout:
What is a breakpoint in responsive Web design?
points (boundaries, size of view page) where a media query is introduced
CSS Responsive Layout:
What is the advantage of using a percentage (e.g. 50%) width instead of a fixed width (e.g. px) width for a ‘column’ class in a responsive layout?
the layout of the page will adjust (scale) according to the size of the screen or web page
CSS Responsive Layout:
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 smaller one will win, because the rules that are closer to the bottom are seen as a priority (source order)
