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?
a pseudo class is a keyword added to a selector that specifies a special state of the selected elements (pseudo classes are under the browser’s control)
CSS Pseudo Class:
What are CSS pseudo-classes useful for?
pseudo classes let you apply style to an element, makes it easier
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 is a boundary for content
CSS Positioning:
What is the default value for the position property of HTML elements?
static (normal)
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?
Box offset properties
Top or bottom and left or right
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
CSS Cascade:
What does the term “source order” mean with respect to CSS?
the order that your CSS rules are written in your stylesheet
the styling provided last for an element is the styling that 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 Transitions:
The transition property is shorthand for which four CSS properties?
transition property
transition duration
transition timing function
transition delay
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 Media Queries:
Give two examples of media features that you can query in an @media rule
color, width, min-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) 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) to the size of the screen
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 (order matters)
