Basics of CSS Flashcards
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
What is the 2nd Tier of the CSS cascade?
Origin - where the rule was defined
What are the Origin types for the cascade?
- Website - which devs control
- User - personal settings
- Browser - built-in styles
(Note - for !important 1 & 3 are swtiched)
What is the 3rd Tier of the CSS Cascade?
Specificity - how specific a rule is
What are the levels of Specificity regarding selectors in the CSS cascade?
- Inline style - most specific
- id (#)
- class (.), attribute, pseudo-class (pseudo-selector)
- type (tag-type), pseudo-element
Do CSS combinators affect Specificity?
No, they have no effect on specificity.
What is an attribute selector in CSS
A selector that matches based on the presence of value of a certain attribute [href],[title]
Do the selectors specified inside the :not() pseudo-class affect specificity.
Yes, they do.
But the pseudo-class itself does not.
Does the universal selector (*) affect specificity?
No, it does not.
How are attribute selectors commonly used in CSS
They are used to select specific attributes of an HTML element (href link contents seem applicable)
How is specificity determined on rules with multiple selectors?
The selectors are “added” to determine the overall specificity of a rule or style
What is the 4th tier of the CSS cascade?
Order in the CSS document - rules defined later in the document “win” over earlier declarations
Generally speaking, what are the two directions that CSS uses
Vertical direction - blocks
Horizontal direction - inline
What is a more access philosophy when it comes to block direction and inline direction
Block direction - perpendicular to text
Inline direction - parallel to text
What are logical properties in regards to the flow of CSS elements?
Give an example.
Logical Properties are an alternative to the cardinal direction idea of flow.
margin-block-start, margin-inline-end are two examples
Describe four aspects of the box model in CSS layout.
- Content
- Padding
- Border
- Margin
What is special about img elements
Image elements are considered replaced elements, in that they exist as a element outside the effects of CSS.
What can we influence about a replaced element.
We can influence the way a containing box (wrapper) displays the replaced element, but not the contents of the replaced element itself.
Give examples of replaced elements in CSS
- iframes
- images
- video
- embed
Others are treated as replaced elements only in certain conditions
What is BEM in relation to CSS naming convention?
Block - Element - Modifier
- Block - a block of HTML that makes up a “component” like Card
- Element - an element of that block, a sub-component Card__image
- Modifier - something that modifies the original Block Card–light
How do block level elements position themselves in the flow of a page.
Block elements stack, even if there is room to move beside another element.
Should we use border or outline to help debug issues in CSS layout.
We should use outline because border can influence positioning of elements.
What are anonymous boxes in CSS layout.
Anonymous boxes are boxes that surround elements that do not have a corresponding HTML element tag
Think loose text in a div, outside a
element
How are anonymous boxes styled?
They inherit the style from their parent containing element, but cannot be directly styled themselves.
Can anonymous boxes be styled?
Not directly, they can only inherit their style from the parental element.
Can you set sizing options on inline elements (height, margin, etc).
No, you cannot set sizing options on inline elements.
Where do we use inline-block elements?
We use inline-block elements when we have an inline element that we want to style with sizing declarations (links for example)
What display declaration might we use with a link styled as a button?
We might use display: inline-block; so that we could add sizing styles to the link/button
How do we create a locally scoped CSS variable?
We create a locally scoped CSS variable by defining the variable in a containing element. Every contained element will have access to that variable
Do CSS custom properties need to be associated with a selector?
Yes, they need to be defined within a selector.
Typically we use :root
How do we set a fallback value for a CSS variable?
by following the var value with a comma and the fallback value.
var(–primary-clr, yellow)
How can we overlay a texture on a website but still make links and buttons accessible?
We can use:
pointer-events: none.
What are attributes in regards to CSS elements?
attributes, such as ‘class’, ‘id’, ‘src’, or ‘link’, add functionality to our elements
When beginning to write our style.css file, what might we consider doing first?
We might focus on the global styles first. Think about broad-reaching effects, on elements (not classes quite yet).
Consider striving for DRY code here. What font-families are shared, what colors, sizes, etc.
What is the critical rendering path?
The Critical Rendering Path is the sequence of steps the browser goes through to convert the HTML, CSS, and JavaScript into pixels on the screen.
Why is the critical rendering path important to consider?
The critical rendering path influences how quickly our webpage can render on the client browser. Having a quick CRP prevents jank.
What four aspects make up the CRP (Critical Rendering Path)?
- Document Object Model (DOM)
- CSS Object Model (CCSOM)
- Render Tree
- Layout
What is a render tree?
A render tree is basically how a browser combines the DOM and the CSSOM to priorities rendering.
What is a meta tag that we should include on all our projects to ensure that mobile sizes are rendered appropriately?
What is the difference between the values: currentColor and inherit?
inherit as a value will only work with text color, currentColor as a value will work on other properties, such as border.
