XHTML Formatting font with a style declaration

Formatting Font HTML uses the font tag to change size and family of font But… the font tag is being deprecated – meaning it is being phased out The W3C is encouraging the use of style sheets instead One part of Cascading Style Sheets (CSS) is the style attribute

Formatting Font XHTML specifies the structure of a document, CSS specifies the style of the display The style attribute can be placed in almost any tag. It has many values, we will learn font-size, font-family, and color.

Style Attribute The value for style consists of style declarations, which are: A property followed by a colon : font-family: color: And then a value followed by a semicolon ; font-family: arial; color: #ff3399;

Font-Size Property Property: font-size: Specifies the size of the font. Value Use pixels Or, percentage of the surrounding text

Font-Size Property Examples: This is smaller text This is smaller text. This paragraph is 14 pixels

Font-Family Property font-family: Specifies the style of the font that will be used. If the computer does not have the font you specify, it will use a default. You may indicate more than one family- just separate them with a comma If the first font is not found on the computer, the next one will be used. Generic: serif and sans-serif

Font-Family Property Examples: Style in the body tag changes font for the entire web page

Font-Family Property This power point is Verdana Times New Roman font

Color Property color: Specifies the color of the font. Colors are represented in #RRGGBB numbers (There are some color names, but they may not be understood by all browsers) This is a red heading

Color on the Web - RGB Monitors create images on the screen by emitting red, green, and blue light – RGB color. These lights are emitted in varying intensities, giving different colors. Hexadecimal code indicates the intensity of each color. 00-ff for each color #00FF00 is green

Style Attributes and Values May combine the declarations where size is the size of words family is the style of words (font type) color is the color of words

Where to place styles Several Paragraphs that use the same style rule: text…. some heading another paragraph… All paragraph and heading text in div element will have red text

Where to place styles Changing one word, phrase or sentence use span element Here, one word will be red. Here, one word will be red

Summary – Where to add your styles Entire Page - Heading Several Paragraphs Single Paragraph Less than a paragraph

Assignment Open index.htm in Sun_Sand folder Change the body tag: Change the h1 tag: Sun &… Add the same color style to What you’ll find here: Then do guided practice on Using Styles