CSS Flashcards
- {}
target all the element on the page
what is “selector” and what is “delectation”?
xx {???}
xx is the “selector” and ??? is the “delectation”
what is “property” and what is “value”?
h1,h2 { font-family: xxx; color: ???}
font-family and color is the “property”
xxx and ??? is the “value”
declaration block
a set of rules, code
xxx {} is class or id?
(#) is ID
. is Class
.xxx {} is a class or id?
. is class
(#) is id
- {} mean?
universal selector
target all elements on the page
h1, h2, h3 {} means the css rule for which selector?
Type selector
target h1, h2, h3 elements
body {
font-family: roboto, sans-serif, helvetica}
sans-serif in here means a *fallback value.
When font style roboto is not available , sans-serif will apply.
sans fails, helvetica
always set font family with two type.
Mac for roboto
Win for sans-serif
rgb(red,green,blue)
hul(x,x,x)
they are css function
x.?? {} means the css rule for which selector?
a class selector.
means all the x with ?? class
xx>?? {} means the css rule for which selector?
Child selector
target any ?? that are the children of xx (but no other ?? in the page)
x(blank space)? {} means the css rule for which selector?
x ? {}
Descendant selector
target any ? elements that are sit inside the x element
x+? {} means the css rule for which selector?
ADJACENT SIBLING SELECTOR
target the first ? element right after x element (but not other x elements)
x~? {} means the css rule for which selector?
General SIBLING SELECTOR
target all the ? elements after x elements
rem
2rem means 200% of html initial value (which is 16px, can be adjust by css)
3 rem means 300%
em
2em means 200% of parent value
<div font-size 16px
cross axies (align-items)
top to bottom
main axies(justify-content)
left to right
align-items to control the single row in flexbox
aligh-content control all the rows in flexbox
box-sizing: content -box
content keeps the same size, just add width and height according to the padding, border, margin.
box-sizing: border-box
content will shrink for the space for padding, border, margin.
row
a vertical space. every line
column
a horizontal space left to right, a small part of row
What are the four components of “the Cascade”.
source order, inheritance, !important, Specificity
transform
element in broswer is 3d
scale is shift rotate on z
rotate is turn around on x
translate is change origin point (top left)
rotateXY Zmaybe on Y?
What are the names of the individual pieces of a CSS rule?
css rule declaration block
In CSS, how do you select elements by their class attribute?
Dot (.) + class name
In CSS, how do you select elements by their tag name?
write the name of element directly
In CSS, how do you select an element by its id attribute?
To select an element with a specific id, write a hash (#) character, followed by the id of the element.
Name three different types of values you can use to specify colors in CSS.
rgb, hue , hex
colors that can make transparent?
rgba, huea
What CSS properties make up the box model?
margins, borders, padding, and the actual content.
Which CSS property pushes boxes away from each other?
margin
Which CSS property add space between a box’s content and its border?
padding
What is a pseudo-class?
A pseudo-class is a selector that selects elements that are in a specific state, e.g. they are the first element of their type, or they are being hovered over by the mouse pointer.
A pseudo-class is used to define a special state of an element.
For example, it can be used to:
Style an element when a user mouses over it
Style visited and unvisited links differently
Style an element when it gets focus
What are CSS pseudo-classes useful for?
When a user points to an object on a web page with a mouse, it’s helpful if that object responds in some way. For example, when a user hovers over a link, the color and background-color of that link could be reversed.
Name two types of units that can be used to adjust font-size in CSS.
font-size
font-family
font-weight
What CSS property controls the font used for the text inside an element?
font-family
What is the default flex-direction of a flex container?
row
What is the default flex-wrap of a flex container?
nowrap
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 moves the item it was applied to, but doesn’t affect the rest of the document flow.
relative positioning doesn’t affect the layout, the positioned element is still in its initial place logically, hence the occupied space is reserved. But it could be displaced visually by top , right , bottom , left offsets/properties.
Positioning allows you to take elements out of normal document flow and make them behave differently, for example, by sitting on top of one another or by always remaining in the same place inside the browser viewport.
How does setting position: relative on an element affect where it appears on the page?
relative positioning doesn’t affect the layout, the positioned element is still in its initial place logically, hence the occupied space is reserved. But it could be displaced visually by top , right , bottom , left offsets/properties.
It makes the element get positioned relative to where it would be in the normal document flow.
How does setting position: absolute on an element affect document flow?
Absolutely positioned elements are removed entirely from the document flow. That means they have no effect at all on their parent element or on the elements that occur after them in the source code. An absolutely positioned element will therefore overlap other content unless you take action to prevent it.
Surrounding elements ignore the space the absolute positioned element would have taken up. The absolute item no longer has a place in the document flow.
How does setting position: absolute on an element affect where it appears on the page?
it will follow the parent which is set to display:flex. if parents not , grandparents . it can be put in anywhere of flex div without affect normal stuff.
The element is placed relative to where it is in its containing element, so make sure the containing element is set to relative also. It will go back to the first HTML element that is not static.
How do you constrain an absolutely positioned element to a containing block?
by setting its parent to display:flex
What are the four box offset properties?
top, right, bottom. left
What are the four components of “the Cascade”.
source order, inheritance, !important, Specificity
What does the term “source order” mean with respect to CSS?
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
List the three selector types in order of increasing specificity.
tag, class, id
Why is using !important considered bad practice?
important property is considered a bad practice. That’s because it breaks the natural cascading of stylesheets, which makes maintaining and debugging your website much more difficult. However, there are specific use cases in which using the ! important property is ideal.
What does the transform property do?
The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.
Give four examples of CSS transform functions.
rotate, scale, skew, or translate
The transition property is shorthand for which four CSS properties?
The transition CSS property is a shorthand property for transition-property , transition-duration , transition-timing-function , and transition-delay .
<meta></meta>
name=”viewport”—this meta deal with viewport
content=”width=device-width — this content width is exact same as device
initial-scale=1— scale is 1 and cannot change
@media
Give two examples of media features that you can query in an @media rule.
Which HTML meta tag is used in mobile-responsive web pages?
<meta></meta>
What is a breakpoint in responsive Web design?
the exact pixel the page will break
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?
less media rules, flex
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?
less media ruls
