CSS Flashcards
What are the names of the individual pieces of a CSS rule? Describe the syntax.
Selector / Declaration block made up of Properties / Values
Selector followed by an opening curly brace.
Property, colon, value, semicolon. You can add as many properties and values you want to one rule. End the rule for that selector with the closing curly brace.
In CSS, how do you select elements by their type?
Element-type-name { }
EX: body { } - this selects the body element
in CSS, how do you select an element by its id attribute?
id-name { }
In CSS, how do you select elements by their class attribute?
.note { }
This will select any element whose class attribute has a value of “note”
What is a Universal Selector?
- { } - This targets all elements on the page
In CSS how do you select an element that is a child of another element?
li > a { } - This targets any < a > elements that are children of an < li > element (but not other < a > elements in the page and not the < li > element itself)
Name 3 different types of values you can use to specify colors in CSS
RGB Values (values for red, green, and blue are expressed as numbers between 0 and 255)
Hex Codes (Hex values represent values for red, green, and blue in a hexadecimal code)
Color Names (colors are represented by predefined names, however they are very limited in number)
What CSS properties make up the box model?
Margin, Border, Padding, 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 CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example :hover can be used to change a buttons color when the user’s pointer hovers over it.
What are CSS pseudo-classes useful for?
Pseudo-classes allow you to change the styling/ appearance of elements when a user is interacting with them.
Name at least 2 units of type size in CSS
Pixels (px), Percentages(%), Ems (em), REM
What CSS Property controls the font used for the text inside an element
font-family property
What is the default flex-direction of a flex container?
row - left to right
What is the default flex-wrap of a flex container?
nowrap - all flex items will be on one line
Why do two div elements “vertically stack” on one another by default?
Because div elements are block elements - so by default they start on a new line
What is the default flex-direction of an element with display: flex?
row - left to right
What is the default value for the position property of HTML elements?
Static = normal flow
How does setting position: relative on an element affect document flow?
Relative Positioning does not affect the document flow. The surrounding elements still observe the relative element as if they were in the same position.
How does setting position: relative on an element affect where it appears on the page?
Setting position:relative does not affect where it appears on the page. You must modify the box offset properties to change the positioning on the page.
How does setting position: absolute on an element affect document flow?
An element set with Absolute positioning is taken out of normal flow.
The document and surrounding elements to not observe that element exists
How does setting position: absolute on an element affect where it appears on the page?
Setting position:absolute is now positioned in relation to its containing element.
How do you constrain an absolutely positioned element to a containing block?
The parent containing element must not be static. (use relative)
What are the four box offset properties?
top, right, bottom, left
What are the 4 components of “the Cascade”?
Source order, specificity, inheritance, ! important
What does the term “source order” mean with respect to CSS?
The order that your CSS rules are written in your stylesheet. The styling provided for an element LAST in your stylesheet is the styling that will ultimately take effect.
How is it possible for the styles of an element to be applied to its children as well without and additional CSS rule?
By using and inherited property - a property which by default are set to the computed value of the parent element.
Why is using ! important considered bad practice?
It makes debugging more difficult by breaking the natural cascading in your stylesheets. ! important is very difficult to override.
What does the transform property do?
Transform property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
Give four examples of CSS transform functions.
translate( ); skew ( );
rotate ( ); scale ( );
The transition property is shorthand for which 4 CSS properties?
transition-property,
transition-duration,
transition-timing-function,
transition-delay
Give an example of media features that you can query in an @media rule.
width (min or max also) - most common — more on MDN
Which HTML meta tag is used in mobile-responsive web pages?
The Viewport meta tag.
< meta name=”viewport… >
What is the affect of setting an element to display: none ?
Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off.
What is a breakpoint in responsive Web design?
The point at which a media query is introduced.
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?
Using a percentage changes the size relative to the parent/s - which allows for scaleability
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?
Due to CSS source order - the last rule on the page will take effect and the rule for a larger width will not be read
