Chapter 12 Flashcards
CSS-wide keywords (general)
All CSS properties accept the three CSS-wide keywords: initial, inherit, and unset. Because they are shared by all properties, they are not listed with the values for individual property listings.
CSS-wide keywords (initial)
Explicitly sets the property to its default (initial) value.
CSS-wide keywords (inherit)
Allows you to explicitly force an element to inherit a style property from its parent. This may come in handy to override other styles applied to that element and to guarantee that the element always matches its parent.
CSS-wide keywords (unset)
Erases declared values occurring earlier in the cascade, setting the property to either inherit or initial, depending on whether it inherits or not.
Font-family (properties)
Use the font-family property to specify a font or list of fonts.
Values: one or more font or generic font family names, separated by commas
Default: depends on the browser
Applies to: all elements
Inherits: yes
Font-family syntax requirements
All font names, with the exception of generic font families, must be capitalized.
For example, use Arial instead of arial.
Use commas to separate multiple font names. Notice that font names that contain a character space must appear within quotation marks.
Font limitations (fallback)
If the browser can’t find your first choice of font (for example, if that font is not installed on the user’s computer or the provided web font fails to load), the browser uses its default font instead. To avoid this, CSS allows us to provide a list of back-up fonts should our first choice not be available. If the first specified font is not found, the browser tries the next one, and down through the list until it finds one that works. A generic font is applied at a last attempt.
The 5 Generic font family catagories
Serif, Sans Serif, Monospace, Cursive, and Fantasy are the 5 stylistic categories.
Generic font-family: Serif
Serif typefaces have decorative slab-like appendages (serifs) on the ends
of certain letter strokes.
Generic font-family: Sans-serif
Sans-serif typefaces have straight letter strokes that do not end in serifs.
Generic font-family: Monospace
In monospace (also called constant width) typefaces, all characters take up the same amount of space on a line.
Generic font-family: Cursive
Cursive fonts emulate a script or handwritten appearance.
Generic font-family: Fantasy
Fantasy fonts are purely decorative and would be appropriate for headlines and other display types.
Best practice for specifying fonts for web pages (fallback)
Start with your first choice, provide some similar alternatives, and then end with a generic font family that at least gets users in the right stylistic ballpark. A good font stack should include stylistically related fonts that are known to be installed on most computers.
Font-size (properties)
Values: length unit | percentage | xx-small | x-small | small | medium | large |
x-large | xx-large | smaller | larger
Default: medium
Applies to: all elements
Inherits: yes
Can specify size (in font-size) using… (4)
- CSS length units (em).
- Percents.
- Absolute keywords (xx-small, x-small, small, medium/default, large, x-large, xx-large).
- Relative keyword (larger or smaller) in relation to surrounding text.
Preferred sizing values (and non-preferred)
Preferred are em, rem, %. Can use px, but do not provide flexibility required. Unless creating for print, all other absolute units are out.
To maintain the browser’s default size…
Set the font-size of the root element to 100%. It is also common practice to set the body to 100%, but setting it on the html element is a more flexible approach.
Rem values
The rem unit, which stands for “root em,” is always relative to the size of the root (html) element. Because relative to the same element, they are the same size in the document and work like absolute. But, will resize proportionally if root is resized. Best of both worlds.
Em values
Em units are based on the font size of the current element. It will be relative to the inherited size for that element. Once the em is calculated for an element, it can be used for other measurements as that you want to always be relative to the size of the font.
Em values warning
Inconsistency, rounding errors on some platforms/browsers. Also, they are based on the inherited size of the element, which means that their size is based on the context in which they are applied. If you have elements nested several layers deep, the size increase or decrease compounds, which can create problems.
Percentage values (font-size)
Works by creating a size as a percentage of the specified default size.
To calculate % and em values, use this formula:
target size ÷ size of context = result.
Keywords (font-size)
The keywords do not correspond to particular measurements, but rather are scaled consistently in relation to one another.
Relative keywords (font-size)
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.
Font-weight (properties)
Values: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800| 900
Default: normal
Applies to: all elements
Inherits: yes
Font-weight definition/basics
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.
Font-style (Italics) (properties)
Values: normal | italic | oblique
Default: normal
Applies to: all elements
Inherits: yes
Oblique warning
There is an oblique value that specifies a slanted version of the font; however, browsers generally display oblique exactly the same as italic.
Font-style (Italics) definition/basics
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.
Font-variant CSS2.1 (properties)
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.
Font-stretch definition/basics
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.
Font-stretch (properties)
Values: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded |ultra-expanded
Default: normal
Applies to: all elements
Inherits: yes
Shortcut font Property
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.
Shortcut font (properties)
Values: font-style I font-weight I font-variant I font-stretch I font-size/line-height I font-family | caption | icon | menu | message-box | small-caption | status-bar
Default: depends on default value for each property listed
Applies to: all elements
Inherits: yes
Keyword values (shortcut font)
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.
