Cascading Style Sheets

(Formatting)

Slide 2

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

Slide 3

Lecture Overview (2) Text and Fonts Spacing Borders

Slide 4

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

Slide 5

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 6

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 7

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 8

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

Slide 9

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 10

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

Slide 11

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

Slide 12

Whitespace HandlingValue Descriptionnormal 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

Slide 13

Styling (Fonts 1) We can also control fonts font-family

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

Slide 14

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

Slide 15

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

Slide 16

Styling Lists (Unordered)

Value Description

none No markerdisc Default. The marker is a filled circlecircle The marker is a circle

square The marker is a square

Slide 17

Styling Lists (Ordered)armenian The marker is traditional Armenian

numberingDecimal 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.)

Slide 18

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 19

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 20

Styling (Borders 2) We can control each side of the border

border-top border-bottom border-left border-right

Slide 21

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 22

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 23

Styling (Borders 5)

Slide 24

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