Cascading Style Sheets (Formatting)

Lecture Overview (1) At this point, you have learned how and where to create styles You have not learned much about the styles themselves That’s the topic of this lecture

Lecture Overview (2) Text and Fonts Spacing Borders

Length Units Length units are used in styles to define the unit of measure cm – centimeter mm – millimeter pc – pica (1/6 inch) px – point (1/72 inch) in – inches Percentage units as in 150% See IS360CSSFormatting.html

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

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

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)

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 colorblind Here is a nice color picker http://www.w3schools.com/tags/ref_colorpicker.asp

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

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) The letter-spacing and word-spacing properties control the amount of whitespace between letters and words respectively

Styling (Text 3) The white-space property controls whitespace normalization How multiple spaces between other characters are normalized The line-height property defines the height of a line Use to increase or decrease the spacing between lines

Whitespace Handling Value Description normal Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default nowrap Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br /> tag is encountered pre Whitespace is preserved by the browser. Text will only wrap on line breaks Acts like the <pre> tag in HTML pre-line Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks pre-wrap Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks inherit Specifies that the value of the white-space property should be inherited from the parent element

Styling (Fonts 1) We can also control fonts font-family text-transform This controls the font that will be used Note the difference between serif and sans-serif fonts We use fallbacks in case the browser does not support the desired font text-transform lowercase, uppercase, capitalize

Styling (Fonts 2) Fonts have a style as follows (font-style) Text is shown normally (normal) Text is shown in italics (italic) Similar to italics (oblique) Fonts have a size (font-size) You can use explicit sizes You an use x.x em 1 em = 16 pixels 2 em = 32 pixels 2.5 em = 40 pixels Percentages can also be used

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

Styling Lists (Unordered) Value Description none No marker disc Default. The marker is a filled circle circle The marker is a circle square The marker is a square

Styling Lists (Ordered) armenian The marker is traditional Armenian numbering Decimal The marker is a number decimal-leading-zero The marker is a number padded by initial zeros (01, 02, 03, etc.) georgian The marker is traditional Georgian numbering (an, ban, gan, etc.) lower-alpha The marker is lower-alpha (a, b, c, d, e, etc.) lower-greek The marker is lower-greek (alpha, beta, gamma, etc.) lower-latin The marker is lower-latin (a, b, c, d, e, etc.) lower-roman The marker is lower-roman (i, ii, iii, iv, v, etc.) upper-alpha The marker is upper-alpha (A, B, C, D, E, etc.)  upper-latin The marker is upper-latin (A, B, C, D, E, etc.) upper-roman The marker is upper-roman (I, II, III, IV, V, etc.)

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

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

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

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

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

Styling (Borders 5)

Styling (Transformations) These are new to CSS3 There are 2D and 3D transformations translate rotate scale skew matrix http://www.w3schools.com/css/css3_2dtransforms.asp