CSS Flashcards
(38 cards)
What are the names of the individual pieces of a CSS rule?
selector { property: value; }
the property-value pairs are called declarations
the curly braces and their contents are called the declaration block
In CSS, how do you select elements by their class attribute?
. className { … }
In CSS, how do you select elements by their type?
elementName { … }
In CSS, how do you select an element by its id attribute?
elementId { … }
Name three different types of values you can use to specify colors in CSS.
RGB values, hex codes, color names
Name at least two units of type size in CSS.
Pixels, percentages, em, rem…
What CSS property controls the font used for the text inside an element?
font-family
What is a pseudo-class?
A selector that selects for the state an element is in {ie. active, focus, hover, visited)
What are CSS pseudo-classes useful for?
Allow you to apply styles based on user events (like click, hover, visited link) and based on an element’s relation to other elements
What CSS properties make up the box model?
padding, border, margin
Content is also a part of the box model but it’s not a property.
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 the default flex-direction of a flex container?
row
What is the default flex-wrap of a flex container?
nowrap
What are the four components of “the CSS Cascade”.
- source order
- inheritance
- specificity
- !important
What does the term “source order” mean with respect to CSS?
It is the order in which CSS rules appear in the stylesheet.
The rule that appears further down in the stylesheet is the one that applies.
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
Inheritance - elements can inherit CSS property values from their parents; some CSS properties are inherited by default, others can be inherited from the parent using the inherit keyword on the property of the child
List the three selector types in order of increasing specificity.
type selector -> class selector -> id selector least specific most specific
Why is using !important considered bad practice?
The !important keyword has the highest specificity possible so it is near impossible to override a declaration with !important in it. This makes it difficult if you need to change styling afterwards.
Also using !important ‘breaks the cascade’ and this might affect other rules in unexpected ways.
What is the default value for the position property of HTML elements?
static
How does setting position: relative on an element affect document flow?
Does not affect the position of surrounding elements/document flow.
How does setting position: relative on an element affect where it appears on the page?
By itself position: relative doesn’t change an element’s position on the page. But it allows you the change the position of the element relative to its position in the normal document flow using the box offset properties.
How does setting position: absolute on an element affect document flow?
Removes element from document flow, meaning it no longer affect position of surrounding elements;
How does setting position: absolute on an element affect where it appears on the page?
Lets you offset it relative to the first non-static ancestry container using box offset properties.
