Css

Front 1

Name the main 3 CSS selector types

Back 1

Type, Class, ID

Hint 1

<>, ., #

Front 2

Describe the descendant selector

Back 2

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

Front 3

Describe the adjacent selector

Back 3

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

Hint 3

Ul + h1, ul ~ h1

Front 4

Describe the attribute selector

Back 4

Matches an element with the specified attribute, eg: input[type="checkbox"] will select all input elements with type of checkbox

Hint 4

An attribute is a key-value pair in an html element, like href="google.com" or placeholder="John"

Front 5

Describe the nth-of type selector

Back 5

Selects the nth number of the given element, eg: Ul:nth-of-type(even) will select the even number ul in every group

Hint 5

Ul:nth-of-type(3)

Front 6

Explain specificity

Back 6

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

Front 7

Explain the difference between pseudo-classes and pseudo-elements

Back 7

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)

Hint 7

: vs ::

Front 8

Name the 4 parts of the box model

Back 8

Content, padding, border, margin

Front 9

Name the three main ways to include CSS

Back 9

1) inline

2) internal inside <style> tags

3) link to external stylesheet

Front 10

When linking a stylesheet, name the three attributes that are used with the <link> tag. Also include the values

Back 10

1) href="main.css"

2) rel="stylesheet"

3) type="text/css"

Front 11

Explain CSS inheritance

Back 11

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)

Front 12

Name four formats for color values

Back 12

1) RGB values

2) Hex codes

3) Color names

4) HSLA (CSS3 only)

Front 13

Name some typeface styles

Back 13

Serif, sans-serif, cursive, fantasy, monospace

Front 14

Name four units of measurement for font sizes

Back 14

1) px

2) %

3) em

4) rem

Front 15

Name some values for font-weight

Back 15

Normal (400), bold (700), extra bold, or 100-900

Front 16

Name some values for font-style

Back 16

Normal, italic, oblique

Front 17

Uppercase, lowercase, and capitalize are values for what CSS property?

Back 17

Text-transform

Front 18

Underline, overline, line-through, and none are values for which CSS property?

Back 18

Text-decoration

Front 19

Name the three properties that control font leading, kerning, and word spacing respectively

Back 19

Line-height, letter-spacing, word-spacing

Front 20

Describe how leading, line-height, and font-size interplay.

Back 20

Leading + font-size = line-height

Hint 20

Leading is measured from the descender of one line to the ascender of the next

Front 21

Left, right, center, and justify are values of what CSS property?

Back 21

Text-align