CSS Flashcards
What are the names of the individual pieces of a CSS rule?
selector {declaration} declaration = (property:) (value)
In CSS, how do you select elements by their class attribute?
using the .class selector
In CSS, how do you select elements by their tag name?
just using the tag type
In CSS, how do you select an element by its id attribute?
using the #id selector
What CSS properties make up the box model?
margin, padding, border, height, width
Which CSS property pushes boxes away from each other?
Margin
Which CSS property add space between a box’s content and its border?
padding
Name three different types of values you can use to specify colors in CSS.
rgba, rgb, hexcode, color
What is a pseudo-class?
Class that comes from a special state. under the browser’s control. You can prepare for them but not control them.
What are CSS pseudo-classes useful for?
they make things easier as they allow interaction with the user.
What is the default flex-direction of a flex container?
row
What is the default flex-wrap of a flex container?
no wrap.
Why do two div elements “vertically stack” on one another by default?
div elements are block elements and take up the entire row
What is the default flex-direction of an element with display: flex?
row
What are the three primary components of a page layout? (Which helper classes do you need?)
container, column, row
What is the minimum number of columns that you should put in a row?
1
What is the purpose of a container?
boundary of content
What is the default value for the position property of HTML elements?
static
How does setting position: relative on an element affect document flow?
no effect on document flow. like a out of body feeling.
How does setting position: relative on an element affect where it appears on the page?
move relative where it would normally exist if static.
How does setting position: absolute on an element affect document flow?
it affects it as if it doesn’t exist.
How does setting position: absolute on an element affect where it appears on the page?
absolutes are taken off of the page entirely so it finds an environment to exist in so it’s looking for any position layout.
How do you constrain an absolutely positioned element to a containing block?
its positioned against its first non static ancestor, But if not found, it positioned against page.
What are the four box offset properties?
top, bottom, left, right.
Name two types of units that can be used to adjust font-size in CSS.
em, rem
What CSS property controls the font used for the text inside an element?
font-family
What is the purpose of variables?
How do you declare a variable?
with the key word var const or let set to a value
How do you initialize (assign a value to) a variable?
=
What characters are allowed in variable names?
Var name rules must start with _ $ or a letter but no numbers. can contain anything - or . within name. no keywords or reserved words.
no same name. Should describe what is stored and should be in camelcase.
What does it mean to say that variable names are “case sensitive”?
same names with different cases are considered different variables
What is the purpose of a string?
to store numbers, letters, and other characters
What is the purpose of a number?
to store a number for arithmetics
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 bottom css source with the same weight value will have its property inherited.
Styling closer to the bottom has higher priority.
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
inheritance.
List the three selector types in order of increasing specificity.
type, class, id
Why is using !important considered bad practice?
It is applied no matter the specificity so same layers will be applied to greater specificity.
The transition property is shorthand for which four CSS properties?
transition-property, transition-duration, transition-timing-function, and transition-delay.
What does the transform property do?
It lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
Give four examples of CSS transform functions.
matrix translate rotate skew scale
What is a breakpoint in responsive Web design?
It is the point were the content and design will adapt.
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?
for the sake of it scaling instead of being stuck looking nice under one size
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?
source order
Which HTML meta tag is used in mobile-responsive web pages?
<meta></meta>
Give two examples of media features that you can query in an @media rule.
print and screen
