Use LEFT and RIGHT arrow keys to navigate between flashcards;
Use UP and DOWN arrow keys to flip the card;
H to show hint;
A reads text to speech;
21 Cards in this Set
- Front
- Back
- 3rd side (hint)
Name the main 3 CSS selector types |
Type, Class, ID |
<>, ., # |
|
Describe the descendant selector |
By combining selectors together, you can match nested elements. Eg: ul p a will only select anchor tags within paragraph tags within unordered list tags. Also, > is the direct descendant selector |
|
|
Describe the adjacent selector |
It matches all siblings next to an element, eg: ul + h1 would select all h4 elements directly next to a ul; Ul ~ h1 is less strict |
Ul + h1, ul ~ h1 |
|
Describe the attribute selector |
Matches an element with the specified attribute, eg: input[type="checkbox"] will select all input elements with type of checkbox |
An attribute is a key-value pair in an html element, like href="google.com" or placeholder="John" |
|
Describe the nth-of type selector |
Selects the nth number of the given element, eg: Ul:nth-of-type(even) will select the even number ul in every group |
Ul:nth-of-type(3) |
|
Explain specificity |
Due to the nature of CSS, elements will inherit properties from their parents, but in the case of conflicting style rules, the rule with greater specificity will override. Specificity is calculated: element+pseudo-element has the least with a value of 1, class+pseudoclass+attribute has 10, and id has 100, and inline styles have 1000. Combination selectors follow this too: ul .special would have 1+10 = 11. This isn't the exact rule, but this roughly approximates it |
|
|
Explain the difference between pseudo-classes and pseudo-elements |
Pseudo-classes (:) style the different states of an element (hover, disabled) or relative elements (nth of type). Pseudo-elements (::) style parts of an element (before, after, first-line, first-letter) |
: vs :: |
|
Name the 4 parts of the box model |
Content, padding, border, margin |
|
|
Name the three main ways to include CSS |
1) inline 2) internal inside <style> tags 3) link to external stylesheet |
|
|
When linking a stylesheet, name the three attributes that are used with the <link> tag. Also include the values |
1) href="main.css" 2) rel="stylesheet" 3) type="text/css" |
|
|
Explain CSS inheritance |
Child elements will inherit properties from parents. Some properties (eg background-color or border) are not inherited, but can be made to do so using the "inherit" value on a property (eg padding: inherit) |
|
|
Name four formats for color values |
1) RGB values 2) Hex codes 3) Color names 4) HSLA (CSS3 only) |
|
|
Name some typeface styles |
Serif, sans-serif, cursive, fantasy, monospace |
|
|
Name four units of measurement for font sizes |
1) px 2) % 3) em 4) rem |
|
|
Name some values for font-weight |
Normal (400), bold (700), extra bold, or 100-900 |
|
|
Name some values for font-style |
Normal, italic, oblique |
|
|
Uppercase, lowercase, and capitalize are values for what CSS property? |
Text-transform |
|
|
Underline, overline, line-through, and none are values for which CSS property? |
Text-decoration |
|
|
Name the three properties that control font leading, kerning, and word spacing respectively |
Line-height, letter-spacing, word-spacing |
|
|
Describe how leading, line-height, and font-size interplay. |
Leading + font-size = line-height |
Leading is measured from the descender of one line to the ascender of the next |
|
Left, right, center, and justify are values of what CSS property? |
Text-align |
|