CSS Flashcards
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?
It has no effect.
Relative positioning moves an element in relation to where it would have been in normal flow.
How does setting position: relative on an element affect where it appears on the page?
Has no effect on where it appears on the page
How does setting position: absolute on an element affect document flow?
It is completely removed. It is no longer part of normal document flow.
How does setting position: absolute on an element affect where it appears on the page?
An element set to position absolute will sit at the top-left corner of the parent element with the position that is non-static.
How do you constrain an absolutely positioned element to a containing block?
Set a value on an element (the parent) that is non-static.
When should you use absolute positioning?
When you need to layer things on top of others.
Ex. the meme exercise with the text and emoji layer
How do you read the CSS Ruleset:
.pokemon > img {}?
New css ruleset with the selector of an image element which is a direct child of an element with the class pokemon
How do you read the CSS ruleset:
border: 1px solid; ?
border SHORT HAND property with a value 1px and solid.
how do you read the CSS ruleset:
font-family: roboto, sans-serif
font-family property with the value roboto with a fallback value sans-serif
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 styling provided for an element last in your stylesheet is the styling that will ultimately take effect.
Why is using !important considered bad practice?
It overrides the cascade.
Understanding and effectively using specificity and the cascade can remove any need for the !important flag.
List the three selector types in order of increasing specificity.
- ID selector
- CLASS selector
- Element selector
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
It is possible because of inheritance.
When no value for an inherited property has been specified on an element, the element gets the computed value of that property on its parent element.
What does the transform property do?
The transform CSS property lets you rotate, scale, skew, or translate an element. By modifying coordinate space.
Give four examples of CSS transform functions.
- Matrix
- Translate
- Scale
- Rotate
The transition property is shorthand for which four CSS properties?
Transition-property
transition-timing-function
transition-delay
transition-duration
What event is fired when a user places their cursor in a form control?
focus event
What event is fired when a user’s cursor leaves a form control?
blur event
What event is fired as a user changes the value of a form control?
input event