CSS Flashcards
@media screen {}
@media print {}
allow you to provide different css rules for when content is on a screen or when content is printed
Block level element
A block-level element starts on a new line and stretches out to the left and right as far as it can.
inline element
An inline element can wrap some text inside a paragraph without disrupting the flow of that paragraph. The a element is the most common inline element that has extra functionality, since you use them for links.
display property
sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid or flex.
main {
max-width: 600px;
margin: 0 auto;
}
Centers the element with id=”main” and allows it to resize if under 600px wide
box-sizing: “border-box”
When you set “box-sizing” to the value of “border-box” on an element, the padding and border of that element no longer increase its width.
Many authors just set “border-box” on all elements on all their pages.
- { box-sizing: border-box; }
position: relative property
Causes the element to be adjusted from other elements as specified
.relative-and-obvious {
position: relative;
top: -20px;
left: 20px;
}
position: fixed property
A “fixed” element is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. As with relative, the “top”, “right”, “bottom”, and “left” properties are used.
position: absolute property
The value “absolute” behaves like “fixed” except relative to the nearest positioned ancestor instead of relative to the viewport. If an absolutely-positioned element has no positioned ancestors, it uses the document body, and still moves along with page scrolling.
inline-block display property
You can use “inline-block” for total page layout.
Elements with “inline-block” are affected by the “vertical-align” property, which you probably want set to top.
You need to set the width of each column
There will be a gap between the columns if there is any whitespace between them in the HTML
CSS Transitions
CSS transitions let you decide which properties to animate (by listing them explicitly), when the animation will start (by setting a delay), how long the transition will last (by setting a duration), and how the transition will run (by defining a timing function, e.g. linearly or quick at the beginning, slow at the end).
delay {
font-size: 14px;
transition-property: font-size;
transition-duration: 4s;
transition-delay: 2s;
}
font-size: 36px;
}
This example performs a four-second font size transition with a two-second delay between the time the user mouses over the element and the beginning of the animation effect
When the mouse hovers over it, after a delay of two seconds, a four-second transition begins which changes the font size of the text from its normal size to 36px.
justify-content property
aligns items horizontally and accepts the following values:
flex-start: Items align to the left side of the container.
flex-end: Items align to the right side of the container.
center: Items align at the center of the container.
space-between: Items display with equal spacing between them.
space-around: Items display with equal spacing around them.
align-items property
aligns items vertically and accepts the following values:
flex-start: Items align to the top of the container.
flex-end: Items align to the bottom of the container.
center: Items align at the vertical center of the container.
baseline: Items display at the baseline of the container.
stretch: Items are stretched to fit the container.
flex-direction property
defines the direction items are placed in the container, and accepts the following values:
row: Items are placed the same as the text direction.
row-reverse: Items are placed opposite to the text direction.
column: Items are placed top to bottom.
column-reverse: Items are placed bottom to top.
