Chapter 12 Flashcards

Question

Relative keywords (font-size)

Answer 1

Used to shift the size of text relative to the size of the parent element text. The exact amount of the size change is determined by each browser and is out of your control.

Answer 2

Values: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800| 900 Default: normal Applies to: all elements Inherits: yes

Answer 3

If you want a text element to appear in bold, use the font-weight property to adjust the boldness of type. Uses descriptive terms and 9 numeric values. 600+ is bold. Normal is to unbold a font that is naturally bold.

Answer 4

Values: normal | italic | oblique Default: normal Applies to: all elements Inherits: yes

Answer 5

There is an oblique value that specifies a slanted version of the font; however, browsers generally display oblique exactly the same as italic.

Answer 6

The font-style property affects the posture of the text—that is, whether the letter shapes are vertical (normal) or slanted (italic and oblique). A common use is to make text that is italicized in the browser’s default styles display as normal.

Answer 7

Some typefaces come in a “small caps” variant. This is a separate font design that uses small uppercase-style letters in place of lowercase letters. Small caps characters are designed to match the size and density of lowercase text so they blend in. 3 or more capital letters in the flow of text- abbreviations or time. Browsers simulate small caps by scaling down uppercase letters in the current font. To typography sticklers, this is less than ideal and results in inconsistent stroke weights.

Answer 8

Tells the browser to select a normal, condensed, or extended font in the font family. If browser cannot find a matching font, it will not try to synthesize the width by stretching/squeezing text; it may just substitute a font of a different width.

Answer 9

Answer 10

Compiles all the font-related properties into one rule. The value of the font property is a list of values for all the font properties we just looked at, separated by character spaces. Order of values IS important. Must include font-size and font-family in that order- omitting one or putting them in the wrong order. No requirements after those two.

Answer 11

Answer 12

The font property also has a number of keyword values that represent system fonts, the fonts used by operating systems for things like labels for icons and menu items.

Answer 13

CSS3 Font Module greatly expanded the definition of font-variant. Now it can serve as a shorthand property for a number of font-variant- prefixed properties. These properties are still considered experimental. Nice to have but okay to lose, with exception of font-variant-position (has a specific purpose).

Answer 14

A ligature is a glyph that combines two or more characters into one symbol.

Answer 15

Allows the selection of small-cap glyphs (small-caps) from the font’s character set rather than simulating them in the browser. Other values: all-small-caps, unicase, tilting-caps, petite-caps and all-petite-caps. See book for more info.

Answer 16

Selects superscript or subscript glyphs from the font’s character set when available. Or, browser creates the symbols by shrinking and moving the character above/below baseline.

Answer 17

Allows the selection of various number character styles if they are available. Other values: proportional-numbers/tabular-numbers, old-style-nums, diagonal-fractions/stacked-fractions, ordinal, slashed-zero. See book for more info.

Answer 18

Fonts sometimes offer more than one glyph for a particular character. Font-variant-alternates provides a way to specify swashes and other alternative characters. Many of its values are font-specific and must be defined first with the @font-features-values at-rule.

Answer 19

Allows selection of particular Asian glyphs.

Answer 20

The size text looks on the page often has more to do with the height of the lowercase x (its x-height) than the specified size of the text. Allows the browser to adjust the size of a fallback font until its x-height matches the x-height of the first-choice font. Can ensure better legibility even when a fallback font needs to be used.

Answer 21

Kerning is the space between character glyphs. Fonts typically contain metadata about which letter pairs need to be cozied up together to make the spacing in a word look consistent. The font-kerning property allows the font’s kerning information to be applied (normal), turned off (none), or left to the browser’s discretion (auto).

Answer 22

This property gives authors the ability to control advanced typographic features in OpenType fonts that are not widely used (swashes, small, caps, ligatures, automatic fractions, and more). Spec recommends you use font-variant whenever possible and reserve font-feature-settings for edge cases. As of this writing, however, the font-feature-settings property has better browser support, so for the time being it may be a better option. But cascades poorly.

Answer 23

This experimental property controls the use of language-specific glyphs.

Answer 24

Use typical color property. Color is inherited. According to the CSS specification, it is used to change the foreground color of an element. The foreground of an element consists of both the text it contains as well as its border.

Answer 25

Changes the color of the border specifically.

Answer 26

Targets elements that are contained within (and therefore are descendants of) another element. It is a contextual selector because it selects the element based on its context or relation to another element. Descendant selectors are one of four types of contextual selectors. Indicated in a list separated by a character space. Ex. h1 em, h2 em, h3 em { color: red; } targets em when it appears under h1, h2, and h3.

Answer 27

Id attribute: gives an element a unique identifying name (its id reference). Can be used with any element, and it is commonly used to give meaning to the generic div and span. ID selectors allow you to target elements by their id values. The hash symbol indicates the id selector. Because id values must be unique in the document, it is acceptable to omit the element name. Can be li#sleestak { color: olive; } or #sleestak { color: olive; } because this li is the only one receiving this id.

Answer 28

A style is applied only to elements that appear within the element identified as “resources.” In this way, you can treat links in the element named “resources” differently than all the other links on the page without any additional markup. Ex. #resources a { text-decoration: none; }

Answer 29

Similar to a descendant selector, but it targets only the direct children of a given element. There may be no other hierarchical levels in between. They are indicated with greater-than symbol. Ex. p > em {font-weight: bold;}

Answer 30

Targets an element that comes directly after another element with the same parent. It is indicated with a plus sign. h1 + p {font-style: italic;}

Answer 31

Selects an element that shares a parent with the specified element and occurs after it in the source order. They do not need to follow one another directly. The following rule selects any h2 that both shares a parent element (such as a section or article) with an h1 and appears after it in the document. Ex. h1 ~ h2 {font-weight: normal;}

Answer 32

Targets elements belonging to the same class. Class names are indicated with a period at the beginning of the selector. To be more specific and select all paragraphs with class="special", use this selector (the period indicates the following word is a class selector): p.special { color: orange; }

Answer 33

Which refers to the fact that more specific selectors have more weight when it comes to handling style rule conflicts.

Answer 34

1. Inline styles with the style attribute are more specific than (and will override...). 2. ID selectors, which are more specific than (and will override...). 3. Class selectors, which are more specific than (and will override...). 4. Individual element selectors.

Answer 35

To calculate specificity of a particular piece of content: Box 1 is number of IDs as selector, Box 2 is the number of class/pseudo-classes in the selector, and Box 3 is number of element names. The first box that is not a tie determines which selector wins. Any number in the first box is more specific than many numbers in boxes 2 and 3 of another.

Answer 36

Matches any element- like a wildcard in programming languages. It is also useful as a contextual selector. Be aware that every element will be selected with the universal selector, including some that you might not be expecting to style. The safest bet is to avoid the universal selector.

Answer 37

Values: number | length measurement | percentage | normal Default: normal Applies to: all elements Inherits: yes

Answer 38

Defines the minimum distance from baseline to baseline in text. Instead of space being added between lines, the extra space is split above and below the text. The result is that line-height defines the height of a line-box in which the text line is vertically centered.

Answer 39

When a number is specified alone, it acts as a scaling factor that is multiplied by the current font size to calculate the line-height value.

Answer 40

The difference between using a scaling factor (number value) and a relative value (em or %) is how they inherit. If you set the line height with a scaling factor for a whole document on the body element, its descendants inherit the multiplier. If you set the line-height on the body element using ems or percentages, its descendants inherit the calculated size based on the body’s font size. This is likely not the effect you are after, making number values a more intuitive option.

Answer 41

Values: length measurement | percentage Default: 0 Applies to: block containers Inherits: yes

Answer 42

Indents the first line of text by a specified amount. Indents just the first line of a block. Percentage values are calculated based on the width of the parent element, and are passed down to their descendant elements as percentage values (not calculated values). Negative values are fine, they just cause the first line to hang out to the left of the left text edge (called a hanging indent).

Answer 43

You can align text for web pages just as you would in a word processing or desktop publishing program with the text-align property.

Answer 44

text-align: left Aligns text on the left margin text-align: right Aligns text on the right margin text-align: center Centers the text in the text block text-align: justify Aligns text on both right and left margins

Answer 45

Answer 46

Values: none | underline | overline | line-through | blink Default: none Applies to: all elements Inherits: no, but since lines are drawn across child elements, they may look like they are “decorated” too.

Answer 47

For putting lines under, over, or through text. The most popular use of the text-decoration property is turning off the underlines that appear automatically under linked text (none).

Answer 48

1. First, if you get rid of the underlines under links, be sure there are other cues to compensate, such as color and weight. 2. On the flip side, because underlines are such a strong visual cue to “click here,” underlining text that is not a link may be misleading and frustrating. Consider whether italics may be an acceptable alternative. 3. Finally, there is no reason to make your text blink. Browser makers agree and therefore have dropped support for blinking text.

Answer 49

Values: none | capitalize | lowercase | uppercase | full-width Default: none Applies to: all elements Inherits: yes

Answer 50

Changes its capitalization when it renders without changing the way it is typed in the source.

Answer 51

Values: 1. none As it is typed in the source. 2. capitalize Capitalizes the first letter of each word. 3. lowercase Makes all letters lowercase. 4. uppercase Makes all letters uppercase. 5. full-width Chooses a “full-width” version of a character if one exists (not well supported).

Answer 52

Used to insert space between letters (letter-spacing). Values: length measurement | normal Default: normal Applies to: all elements Inherits: yes

Answer 53

Used to insert space between words (word-spacing). Values: length measurement | normal Default: normal Applies to: all elements Inherits: yes

Answer 54

When you specify em measurements, the calculated size is passed down to child elements, even if they have a smaller font size than the parent.

Answer 55

Values: ‘horizontal offset’ ‘vertical offset’ ‘blur radius’ ‘color’ | none Default: none Applies to: all elements Inherits: yes

Answer 56

Adds a “shadow” below your text that makes it seem to hover or pop out above the page. Has gone out of fashion, but still sometimes useful. The value for the text-shadow property is two or three measurements (a horizontal offset, vertical offset, and an optional blur radius) and a color.

Answer 57

Horizontal offset: Positions the shadow to the right of the text (a negative value pulls the shadow to the left of the text). Vertical offset: Moves the shadow down by the specified amount (a negative value moves the shadow up). Blur radius: 0 is no blur, and the blur gets softer with higher values.

Answer 58

It is possible to apply several text shadows to the same element. If you vary the position and blur amounts, you can give the text the appearance of multiple light sources.

Answer 59

1. Can make text difficult to read. 2. Can slow down page performance (scrolling, mouse interactions, etc.). 3. Be careful that your text doesn’t require a shadow in order to be visible. Folks with non-supporting browsers won’t see a thing. Use drop shadows as an enhancement.

Answer 60

Answer 61

Apply the property to the ul, ol, or li element select the type of marker that appears before each list item. Commonly, people use list-style-type property with its value set to none to remove bullets or numbers altogether.

Answer 62

Unfortunately, there is no way to change the appearance (size, color, etc.) of generated bullets, so you’re stuck with the browser’s default rendering.

Answer 63

Values: inside | outside | hanging Default: outside Applies to: ul, ol, and li (or elements whose display value is list-item) Inherits: yes

Answer 64

By default, the marker hangs outside the content area for the list item, displaying as a hanging indent. This property allows you to pull the bullet inside the content area so it runs into the list content.

Answer 65

It is similar to inside, but the markers appear outside and abutting the left edge of the shaded area.

Answer 66

Values: url(location) | none Default: none Applies to: ul, ol, and li (or elements whose display value is list-item) Inherits: yes

Answer 67

Use to create your own bullets. Use a list-style-type option as a backup in addition in case not supported.

Answer 68

Combines the values for type, position, and image, in any order. For example: ul {list-style: url(/images/rainbow.gif) disc outside;}

Chapter 12 Flashcards

(92 cards)