CSS Flashcards
What are the names of the individual pieces of a CSS rule?
css declarations:
selector { declaration }
declaration consists of {property: value}
In CSS, how do you select elements by their class attribute?
.classname { }
In CSS, how do you select elements by their type?
elementname { ]
In CSS, how do you select an element by its id attribute?
idname { }
Name three different types of values you can use to specify colors in CSS.
rgb values
ex: rgb (200, 200,200)
hex codes
ex: #ee3e80
colors names
ex: white
hsl
ex: hsl(hue, saturation, lightness)
What CSS properties make up the box model?
- Content
- Padding: distance between inside content and border
- Border
- Margin: space between border and outside edge of the element
Which CSS property pushes boxes away from each other?
margin
What is a pseudo-class?
a keyword added to a selector that specifies a special state of the selected element(s)
What are CSS pseudo-classes useful for?
allows us to apply style to an element in relation to external factors, like the history of the navigator (:visited), the status of its content(:, or position of the mouse (:hover)
What are CSS pseudo-classes useful for?
allows us to apply style to an element in relation to external factors, like the history of the navigator (:visited), the status of its content, or position of the mouse (:hover)
extended functionality
Name two types of units that can be used to adjust font-size in CSS.
px - pixels
% - percentages
em - width of a letter m
What CSS property controls the font used for the text inside an element?
font or font-family
What are the four components of “the Cascade”.
source order
inheritance
specificity
important
What does the term “source order” mean with respect to CSS?
prioritizing the bottom properties, as styles.css is read from top to bottom
Why is using !important considered bad practice?
you can end up in a weird place where everything is important, so nothing is important. it just gets too confusing
List the three selector types in order of increasing specificity.
tag
class
id
What is the default flex-direction of a flex container?
row
What is the default flex-wrap of a flex container?
nowrap
Why do two div elements “vertically stack” on one another by default?
because div elements are block elements
What is the default flex-direction of an element with display: flex?
row
What is the default value for the position property of HTML elements?
position static
normal flow - every block-level element appears on a new line
How does setting position: relative on an element affect document flow?
does not affect the position of surrounding elements; they treat like it is where it would normally be
How does setting position: relative on an element affect where it appears on the page?
moves an element from the position it would be in normal flow, shifting it to the top, right, bottom, or left of where it would have been placed
How does setting position: absolute on an element affect document flow?
it does not affect the position
of any surrounding elements (as they simply ignore the space it would have taken up)
will always cause other elements around it to move, since they no longer treat it like it exists
How does setting position: absolute on an element affect where it appears on the page?
it stays where you set it to and moves as users scroll up and down on a page.
How do you constrain an absolutely positioned element to a containing block?
set the parent container to absolute: relative
or any non-static properties
What are the four box offset properties?
top
bottom
left
right
The transition property is shorthand for which four CSS properties?
transition-property: sets any CSS property (ex: background-color to which the effect is applied
transition-duration: how long it’ll take to complete transition // by default it’s 0, so always make sure to set something
transition-timing-function: speed of the function
transition-delay: how to long wait before a transition begins
Give two examples of media features that you can query in an @media rule.
color
width
height
Which HTML meta tag is used in mobile-responsive web pages?
super important. if you don’t use this, it will be using “virtual viewport” (old school)
What is a breakpoint in responsive Web design?
points at which a media query is introduced (adjusting for changes in screen size)
mobile first responsive design - working with a smaller width first and adding @media as the screen grows larger (best practice)
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 will keep adjusting to the screen size as it changes
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 - css rules are read from top to bottom, so last one will take priority
