Cascading Style Sheets (Formatting)

Slide 2 Lecture Overview (1) At this point, you have learned how and where to create styles Internal, embedded, external You have not learned much about the styles themselves Formatting text is the topic of this lecture

Slide 3 Lecture Overview (2) A typography history lesson Text and fonts Letter and word spacing Borders

Slide 4 A Typography History Lesson What we now do digitally, we once did entirely on the printed page May of the concepts and terms have persisted from print to digital

Slide 5 A Typography History Lesson Gutenberg invented movable type in 15 th century Germany replacing handwritten type Characters were made of fixed size blocks that were assembled together to form a page We could spend significant time on the subject of typefaces, fonts, and their history

Slide 6 A Typography History Lesson In 1886, Ottmar Merganthaler invented the linotype (line of type) composing machine It mechanically created lead impressions one line at a time controlled character and word spacing via spacebands o o

Slide 7 A Typography History Lesson Linotype machine illustration

Slide 8 A Typography History Lesson The monotype machine worked like the linotype but read a punched paper tape The paper tape was run through a separate casting machine

Slide 9 A Typography History Lesson To linotype machine was used until phototypesetting became feasible in 1960

Slide 10 A Typography History Lesson And all of this has been replaced by the computer and digital imaging

Slide 11 So why is this important These machines adjusted the space between characters and words to fully justify lines Tracking and kerning We could adjust the space between lines Leading We had facets (brass castings) for different fonts

Slide 12 Length Units Length units are used in styles to define the unit of measure for a font, line height, etc.. cm – centimeter mm – millimeter pc – pica (1/6 inch) (12 points) pt – point (1/72 inch) px – pixel in – inches percentage units as in 150%

Slide 13 Length Units (2) In typography, an em is a relative unit of measure Derived from the size of the letter “m” A unit of measure equal to 12 points In CSS an em is a unit of measure relative to the current font size If the current font 16 pixels, then…

Slide 14 Length Units (3) Assuming the current font size is 16 pixels You can use x.x em 1 em = 16 pixels 2 em = 32 pixels 2.5 em = 40 pixels

Slide 15 Styling (Color 1) Color is an important part of any page The color property defines the color of the text The background-color defines the color of the background CSS 3 supports some enhanced color formatting like textures and gradients

Slide 16 Styling (Color 2) There are three ways to specify a color A color name, such as red, blue, green, etc… These are called named colors and there about 255 of them A HEX value such as “#FF0000”, which is red A RGB value such as rgb(255,0,0)

Slide 17 Styling (Color) (Best Practices) Make sure that there is adequate contrast between background and foreground colors Don’t use too many colors Use bright colors only for emphasis Remember that users might be color blind Here is a nice color picker asp asp

Slide 18 Styling Fonts - Serifs CSS supports control of fonts and font characteristics Fonts are categorized as serifs and sans serifs Literature suggests serifs are more readable in print Because the better distinguish the ends of letters such as I and L Sans serif fonts are easier to read online Especially larger fonts because of limited screen resolution

Slide 19 Styling Fonts - Serifs

Slide 20 Styling (Font Families) The font-family CSS property controls the font that will be used The value contains a prioritized list of font family names Families are ordered from the most specific to the least specific (fallbacks)

Slide 21 Styling (Font Attributes) Fonts have a style as follows ( font-style ) Text is shown normally ( normal ) Text is shown in italics ( italic ) Similar to italics ( oblique ) text-transform lowercase, uppercase, capitalize

Slide 22 Styling (Font Attributes) Fonts have a weight ( font-weight ) bold, bolder, lighter Values between 100 and 900 can also be used The default weight is is the same as bold

Slide 23 Styling (Leading) Pronounced “Leding” It’s the whitespace between lines of text The term is derived from strips of lead placed between lines in linotype machines

Slide 24 Styling (Leading) Best practices Too little leading makes text appear dark and hard to read Too much leading makes text light and hard to read too On computer screens, percent line height relative to font height is a good metric Use less leading with all caps Always used relative values in CSS

Slide 25 Styling (Leading) The line-height property defines the height of a line (leading) Use to increase or decrease the spacing between lines Always used relative values because of the way CSS processes font sizes Line height is 1.4 times the font height line-height:1.4;

Slide 26 Styling (Tracking) Tracking addresses the space between letters in a word and spacing between words Reducing tracking too much makes text too dark Increasing tracking too much makes text too light Best practices Increase tracking for acronyms and other all- caps situations Reduce tracking for very large font sizes and headings

Slide 27 Styling (Tracking)

Slide 28 Styling (Tracking) The letter-spacing property controls the whitespace between letters The word-spacing property control the amount of whitespace between words

Slide 29 Styling Size A box (paragraph) has a height and width Width can be set to an absolute value or a percentage Height is typically set to an absolute value Limited use for this property as we will see when we talk about flow

Slide 30 Styling (Text 1) The text-align property controls the alignment of text inside of the box Valid values are center, justify, left, right The text-decoration property controls how text is adorned underline, overline, line-through

Slide 31 Styling (Text 2) The text-indent property controls the indentation of text along the left margin of the box Only the first line is indented Positive values indent to the right Negative values indent to the left (outdent)

Slide 32 Styling (Text 3) The white-space property controls whitespace normalization How multiple spaces between other characters are normalized

Slide 33 Whitespace Handling

Slide 34 Styling Lists (Unordered)

Slide 35 Styling Lists (Ordered)

Slide 36 Styling Lists (Example) list-style-type denotes the style of the item number or bullet list-style-image allows you to add a picture to an image ul { list-style- image:url("/images/blueball.gif"); list-style-type:square; } See TextStyles.htm

Slide 37 Styling (Borders 1) This is the border surrounding the imaginary box (remember we mentioned the box model) The border has a style, which must be set for the border to display The border-style property has the following possible values dotted, dashed, solid, double, groove, ridge, inset, outset The visual effect depends on the border-width and border-color properties

Slide 38 Styling (Borders 2) We can control each side of the border border-top border-bottom border-left border-right

Slide 39 Styling (Borders 3) The border-width property controls the thickness of the border The border-color property controls the color of the border It’s possible to control the individual border sides border-top… See IS360CSSBorders.htm in the sample project

Slide 40 Styling (Borders 4) New to CSS 3, we can easily create rounded corners Use the border-radius property to crate rounded corners border-radius is a shorthand property for border-top-left-radius, border-top- right-radius, border-bottom-left- radius and border-bottom-right-radius

Slide 41 Styling (Borders 5)

Slide 42 Styling (Transformations) These are new to CSS3 There are 2D and 3D transformations translate rotate scale skew matrix