Basics of CSS Flashcards
(63 cards)
What is a property in a CSS rule?
Properties are the attributes that you can specify values for.
Things like, height, color, text-transform.
What is a Selector in a CSS rule?
A selector is a descriptor that allows you to target specific elements on a page.
p, .className, #idName are selectors
What is a CSS declaration?
A declaration is a combination of a Property and a Value
What is a CSS rule?
AKA a Style, a Rule is a collection of Declarations targeting one or more Selectors:
What are we saying with the following rule:
@media (max-width: 300px){
body {color: grey;}
}
We are saying that between 0 and 300px of width, text color of the body should be grey.
How is min-width used in a Media Rule.
Min-width indicates that, from the declared width and above the rule should take effect.
@media (max-width: 300px)
Is the max-width here a CSS declaration?
No, in this case it is a “media feature”. Not all CSS elements can be used as a media feature and queried like this.
How do we typically use pseudo-classes in CSS.
What is the syntax of using a pseudo-class in a selector
We use pseudo-classes to affect a certain state of an element.
We use element:state as the selector
Name 4 pseudo-classes.
- :hover
- :focus
- :active
- :checked
How are pseudo-elements used in CSS?
Pseudo-elements are used to target “sub-elements” of an element
For example (input::placeholder, ::before, ::after)
Why are pseudo-elements called pseudo-elements?
They are termed pseudo-elements because they target elements in the DOM that we have not created with HTML tags
What declaration is needed when using ::before or ::after
We need to use content: when using ::before and ::after
What is a “combinator” in CSS
A combinator is a character used to combine multiple selectors in a CSS rule (a whitespace, > or + are all examples of combinators)
What does the > combinator do in a CSS rule.
The > combinator is the Child combinator applies the rule only to the child or children of the leading element.
What does the + combinator do in a CSS rule.
The + is the Adjacent Sibling rule and selects the element immediately following the leading element. Sibling elements must have the same parent element
What is the descendant combinator in a CSS rule?
The Descendant combinator is a white-space between two elements and selects the second element of the rule when it has an ancestor of the first element of the rule.
(Parent, Grandparent, Great-grandparent)
How would you describe the :root selector and its use?
The :root selector is a pseudo-class selector that matches the root element of a tree representing the document.
It is identical to the html selector except it has a higher specificity.
How is the General Sibling Combinator Used?
What is its form?
The ~ is the general sibling combinator.
It is used to select all siblings of an element, regardless of whether they are adjacent or not.
What is the difference between selecting a child and selecting a sibling?
Siblings have the same parent but are on the same level (nested inside the parent)
Children are nested inside the parent.
How do em’s determine the size of the attribute they are assigned to?
em’s are cumulative, in that they base their size off the base size of their parent elements font-size.
How do rem’s determine the size of the attribute they are assigned to?
rem’s base their size on the html or :root font-size. It is not cumulative
What is the CSS cascade?
The cascade is the way CSS browsers resolve competing CSS declarations
What is the 1st Tier of the CSS Cascade?
The 1st Tier is type of declaration or rule we are looking at.
Name the four basic types of declarations and their priority in regards to the cascade?
- Transition - apply an active transition
- !important
- Animation - apply an active animation
- Normal - almost all other rules
