CSS Flashcards
What are the names of the individual pieces of a CSS rule?
rule set –> selector { property : value; }
In CSS, how do you select elements by their class attribute?
.selector
In CSS, how do you select elements by their type?
selector
In CSS, how do you select an element by its id attribute?
selector
Name three different types of values you can use to specify colors in CSS.
rgb() hsl() hex
What CSS properties make up the box model?
margin border padding height width
what does height and width affect for border proeprties
content
Which CSS property pushes boxes away from each other?
Which CSS property add space between a box’s content and its border?
Margin, padding
What is a pseudo-class?
keyword added to a selector that specifies a special state of the selected element(s) … hover… active… focus..
selector: pseudo-class { declaration block }
What are CSS pseudo-classes useful for?
let you apply a style to an element with relation to external factors like interaction
Name two types of units that can be used to adjust font-size in CSS.
px em %
What is the default flex-direction of a flex container?
row (left to right)
What is the default flex-wrap of a flex container?
Wrap
flexbox components
container and items inside
Why do two div elements “vertically stack” on one another by default?
because divs are block elements and take up a whole width and creates new lines in terms of document flow
What is the default flex-direction of an element with display: flex?
row (left to right)
flexbox properties that affect the container and what do they do
display: flex : defines a flex container,
flex-direction: specifies direction of flex (row, row-reverse, column, column-reverse,
flex-wrap: allows items to be put in multiple lines,
flex-flow: shorthand for previous two,
justify-content: defines the alignment along the main axis,
align-items: justify content version for cross axis,
align-content: aligns the containers lines,
gap: controls the space between flex items
flexbox properties affecting items in container and what do they do
order: controls item order,
flex-grow: increases item size compared to other items,
flex-shrink: shrink item size,
flex-basis: control sizing of items,
flex: shorthand for previous three flex-,
align-self: allows the default alignment (or the one specified by align-items) to be overridden for individual flex items
What is the default value for the position property of HTML elements?
position: static;
How does setting position: relative on an element affect document flow?
How does setting position: relative on an element affect where it appears on the page?
same document flow as if static but can change position relative to original place with top bottom left right property with some value.
How does setting position: absolute on an element affect document flow?
How does setting position: absolute on an element affect where it appears on the page?
position absolute becomes almost like a floating entity and is ignored by the document flow.
position can be changed through top bottom left right property and some value
How do you constrain an absolutely positioned element to a containing block?
can use position relative as parent and have it “floating” in the relative block element and change direction with t b l r properties.
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 order of the class list that is applied to the element
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
inheritance if the css property allows it
List the three selector types in order of increasing specificity.
type selector class selector id selector
Why is using !important considered bad practice?
disrupts cascading
The transition property is shorthand for which four CSS properties?
transition-property, transition-duration, transition-timing-function, and transition-delay.
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
@media syntax?
@media ~only media-type ~and (media-feature: value) {
css rule set
}
What is the affect of setting an element to display: none?
it does not show anything for that element
What is a breakpoint in responsive Web design?
points at which a media query is introduced are known as breakpoints. where media query changes trigger the css rule inside –>
setting min-width and such,
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 is flexible to the size of the parent element and changes along with it. depending on the current screen 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?
because of cascading rule that last rule will take precedent over the ones before it.
