CSS Flashcards
What are the names of the individual pieces of a CSS rule?
selectors
declaration block
property:value (also called declaration)
In CSS, how do you select elements by their class attribute?
using a “.” in front of the class name
In CSS, how do you select elements by their tag name?
use an element name
In CSS, how do you select an element by its id attribute?
using # in front of the id name
Name three different types of values you can use to specify colors in CSS.
RBG
HEX
Color name
What CSS properties make up the box model?
width
height
padding
border
margin
Which CSS property pushes boxes away from each other?
margin –> youre like gaining weight
Which CSS property add space between a box’s content and its border?
padding –> it’s like wearing a big puffy jacket
things inside is the same but outside is getting bigger
What is a pseudo-class?
it is a class that gives a special effect to the selector whether it’s for the user or where it falls on html document.
What are CSS pseudo-classes useful for?
allows style changes and it allows users to interact with the elements
Name two types of units that can be used to adjust font-size in CSS.
px
%
em
What CSS property controls the font used for the text inside an element?
font-size
What is the default flex-direction of a flex container?
row
what is the default flex-wrap of a flex container?
try to fit in one line but it can wrap as needed
Why do two div elements “vertically stack” on one another by default?
because div is a block element
What is the default flex-direction of an element with display: flex?
to make the direction into a row –> left to right
What are the three primary components of a page layout? (Which helper classes do you need?)
container
row
column
What is the minimum number of columns that you should put in a row?
1
What is the purpose of a container?
to confine all the content into one box
what is the purpose of the row class
to declare that there is a new row formed on the page layout
one vertical chunk and there is a row
What is the default value for the position property of HTML elements?
static
How does setting position: relative on an element affect document flow?
it allows the element to move relative to where it was supposed to be
if you move it around, the sibling will still think that you are in the same place still even if it’s not
How does setting position: relative on an element affect where it appears on the page?
it moves relative to its original position
How does setting position: absolute on an element affect document flow?
the element will stay on the page position while the page move up and down
element removed from the page - act as if it’s not there from the document
absolute is useful for layering
How does setting position: absolute on an element affect where it appears on the page?
the absolute element is encapsulated by the closest ancestor element that’s
position:relative – nearest non-static ancestor or parent element
How do you constrain an absolutely positioned element to a containing block?
assign it to the position: fixed or position: relative (more desireable)
as long as they are not static but relative has less consequences
What are the four box offset properties?
top, right, bottom, and left
What are the four components of “the Cascade”.
inheritance, specificity, source order, !important
What does the term “source order” mean with respect to CSS?
whatever is written the most recent is what takes priority
governs the priority in the stylesheet
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?
because there’s no turning back once it is used!!!
What does the transform property do?
Let’s you rote, scale, skew, or translate an element
modifies the coordinate space of the CSS formatting model
Give four examples of CSS transform functions.
rotate, scale, translate, skew, matrix
The transition property is shorthand for which four CSS properties?
transition-duration
transition timing function
transition delay
transition preoperty
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?
viewport-meta tag
What is the affect of setting an element to display: none?
got removed from the document flow
What is a breakpoint in responsive Web design?
the points at which a media query is introduced
styling changes in the specific moment**
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?
it’s able to adapt to its new environment when width changes size
when its px, your layout would look weird faster when you change the size
when you use %, you have more wiggle room so you don’t need that many @media query
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?
due to the source order
the lower styling is stronger than the before
