XP

Formatting Text with HTML and CSS

Lesson 6

XP

Character-Level Tags

• Block-level tags control blocks of text such as headings, paragraphs, and lists – <p>, <h1>, <ul>

• Character-level tags affect individual sections of text – <b>, <strong>, <i>, <em>

2

XP

Logical vs. Physical Styles

• There are two types of character-level tags:

• Logical Styles: describe the meaning of the text within the

tag, not how it should be presented

Examples: <em>…</em>, <strong>…</strong>,

<code>…</code>

<p> The anteater is the <em>strangest</em> animal.</p>

• Physical Styles: changes the actual presentation of the textExamples: <b>…</b>, <i>…</i>, <u>…</u>

<p> Your homework is due at the <b>beginning</b> of class.</p>

3

XP

Preformatted Text

<pre>

…text goes here

Line breaks and formatting are preserved

</pre>

– Usually displayed in mono-spaced font

– Block-level tag

4

XP

Preformatted Text

<pre>Mary

had a

little

lamb</pre>

5

XP

<hr />

• Horizontal rule tag

• Stand-alone tag

• Attributes include: – size – height of the rule

<hr size=“10” />

– width – width of the rule in percent or pixels<hr width=“85%” />

– align – alignment of the rule<hr align=“right” />

– noshade – removes the shadow<hr noshade=“noshade” />

6

XP

<br />

…text goes here <br />This starts on a new line….

– Used to force a new line when the text on the web page document is displayed by a browser.

– Stand-alone tag

7

XP

<br />

<br />

Line break

8

XP

<address>

• HTML supports the address tag to indicate contact information. Most browsers display an address element in an italicized font, and some right-justify or indent addresses

9

XP

<blockquote>

<blockquote>

…text goes here

</blockquote>

– Used to indent a block of text for special emphasis.

– Text is indented from the left and right

10

XP

blockquote

<blockquote>

11

XP

HTML: Text Alignment

• align attribute

– Values are: left, right, center, justify

<p align=“center”>This text will be centered on

the page.</p>

• <div> … </div> used to align blocks of tags

<div align=“right”>

<p>All of this text</p>

<p>Will be right aligned</p>

</div>

12

XP

Special Characters

Display

special

characters

such as

quotes,

copyright

symbol, etc.

13

XP

HTML: Fonts and Font Sizes

<font> … </font>

• To change the font size (include the size attribute. Values are 1 to 7 or a relative value using + or -)

<p><font size=“4”>Change the font size</font></p>

• To change the font face (include the face attribute. Values are a set of font names)

<p><font face=“Arial, sans-serif”>This text

will be formatted in Arial or some kind of

sans-serif font.</font></p>

14

STYLE SHEETS

15

XP

Introduction to Style Sheets

• Style sheets are the preferred way to control the way web pages are formatted and displayed

• Cascading Style Sheets (CSS) is a style sheet language used on the Web

– CSS specifications are maintained by the World Wide Web Consortium (W3C)

– Several versions of CSS exist: CSS1, CSS2, CSS 2.1, and CSS3

16

XP

CSS Advantages

Greater typography and page layout control

Style is separate from structure

Styles can be stored in a separate document and linked to from the web page

Potentially smaller documents

Easier site maintenance

17

XP

18

Style Rule Syntax

h1 { color : purple; }

Selector Declaration

property value

All <h1> will be purple.

XP

Understanding the ‘Cascade’

• Cascading refers to which style rules the browser follows when it encounters conflicting CSS information

– Conflicts can occur when using multiple style sheets (such as inline and external)

• In general, more specific styles override more general styles (order of precedence)

19

XP

Applying a Style Sheet

• There are 3 ways to apply a style sheet to a web document:

– Inline

– Embedded

– External

20

XP

Inline

• Changes the style within an individual XHTML tag

• The style rules are placed directly within a tag in the body of the page using the style attribute

• Overrides embedded and external style sheets

21

XP

Using Inline Styles

To create and apply an inline style, you place the style code within the tag in the HTML document where you wish the style to take effect

22

<h2 style=“color: red; font-style: italic”>Style Sheets

Can Save a Lot of Work</h2>

<p>Styles sheets define HOW HTML elements are to be

displayed, just like the font tag and the color attribute

in HTML 3.2. Styles are normally saved in external .css

files. External style sheets enable you to change the

appearance and layout of all the pages in your Web, just

by editing one single CSS document!</p>

Inline style code

XP

Embedded

• Changes the style of one web page

• Style sheet rules are placed in the head of a document using the <style> tag

• Overrides external style sheets

23

24

Embedded style

XP

25

Using an External Style Sheet

• An external style sheet is a text file that contains style declarations.

– It can be linked to any page in the site, allowing the same style declaration to be applied to the entire site

• External style sheets have a .css extension

• To apply the style sheet to the page, use the <link> tag as

follows:<head>

<link rel=“stylesheet” type=“text/css”

href=“style.css”>

</head>

An external style sheet

XP

CSS Selectors

• A selector defines to what a particular style should be applied

• Most common selectors:

– (X)HTML element

– class

– id

27

XP

28

Element Selectors

• Element Selectors refer to a specific tag(s). In the example below, the text color for all paragraphs will be blue.

p {color: blue;}

• If you wish to specify more than one property, you must separate each property with a semicolon. In the example below, the text color for all paragraphs will be blue and the font size will be 11 pixels.

p {color: blue; font-size: 11px;}

XP

29

Grouping Selectors

To apply a property to multiple tags, separate tags

with commas. In the example below, the text for all

p, h1, and h3 elements will be red.

p, h1, h3 {color: red;}

XP

30

Contextual Selectors

Contextual selectors are used to apply styles to elements only when they are nested within other specific elements. In the example below, the style only applies to ol elements that are nested within p elements:

p ol {color:blue;}

XP

31

Class Selectors (1)

• Class Selectors give you the ability to create groups and define style attributes for them.

• Class Selectors can be sub-groups of tags:h2.center {text-align: center;}

• Or groups that can be applied to any tag:.center {text-align: center;}

XP

32

Class Selectors (2)

• To apply the class style to an element, use the classattribute:

<h2 class=“center”>This heading will be centered on the page</h2>

<p class=“center”>This paragraph will be centered on the page.</p>

XP

33

ID Selectors

Used when you want to specify styles for one element in a style sheet.

#footer {font-size: small;}

To apply the style to an element, use the idattribute

<div id=“footer”>

Copyright 2006, Metro

</div>

Font Style Properties

34

XP

35

font-family: typeface;

• font-family: Arial, sans-serif;

• font-family: “Times New Roman”,

Georgia, serif;

Font families consist of a list of fonts for the browser to choose from.

The first available font (read from left to right) is chosen.

Font names consisting of more than one word must be enclosed in

double quotation marks.

XP

36

font-size: size;

• font-size: small;

• font-size: 85%;

• font-size: 12px;

Sizes can be a keyword, percentage or measure (pt, em, in, cm, px).

37

Various

font sizes

XP

38

font-style: style;

• font-style: italic;

• font-style: normal;

Valid values are italic or normal.

XP

39

font-variant: value;

• font-variant: normal;

• font-variant: small-caps;

Valid values are normal or small-caps.

XP

40

font-weight: weight;

• font-weight: bold;

• font-weight: normal;

Valid weights are lighter, bold, bolder or normal.

Text Style Properties

41

XP

42

line-height: length;

• line-height: 1.5;

• line-height: 90%;

Defines the space between lines of text

43

Line Height

XP

44

letter-spacing: value;

• letter-spacing: normal;

• letter-spacing: 0.1em;

• letter-spacing: -3px;

Increases/Decreases the white space between characters

XP

45

text-align: value;

• text-align: left;

• text-align: right;

• text-align: center;

XP

46

text-transform: value;

• text-transform: uppercase;

• text-transform: lowercase;

• text-transform: capitalize;

XP

47

text-decoration: type;

• text-decoration: none;

• text-decoration: underline;

• text-decoration: overline;

• text-decoration: line-through;

• text-decoration: blink;

Blink is not supported by most browsers.

XP

48

word-spacing: value;

• word-spacing: normal;

• word-spacing: 30px;

• word-spacing: -2px;

Increases/Decreases the white space between words

List Properties

49

XP

50

list-style-type: type;

• list-style-type: disc;

• list-style-type: circle;

• list-style-type: square;

• list-style-type: none;

• list-style-type: lower-alpha;

• list-style-type: upper-alpha;

• list-style-type: lower-roman;

• list-style-type: upper-roman;

• list-style-type: decimal;

<ul> lists

<ol> lists

XP

51

list-style-position: value;

• list-style-position: inside;

• list-style-position: outside;

Inside/Outside refers to the position of the marker with

respect to each item in the list.

XP

52

list-style-image: url(image);

• list-style-image:

url(../images/button.jpg);

• list-style-image: url(redpin.jpg);

This can be applied to unordered list items.

XP

53

list-style: image position type;

• list-style: url(button.jpg) inside;

• list-style: inside circle;

Allows you to combine list-style-image, list-style-position

and list-style-type into one element

XP

W3C CSS Validation

• http://jigsaw.w3.org/css-validator/

XP

CSS Guidelines – Getting Started

• Review the design of the page

– Configure global font and color properties for the body selector

– Identify typical elements (such as <h1>, <h3>, and so on) and declare style rules for these if needed.

– Identify page areas such as logo, navigation, footer, and so on –configure an appropriate class or id for each.

• Create one prototype page that contains most of the elements you plan to use and test.

– Revise your CSS as needed.

– Once your design is set – move styles to an external .css file

• Planning and testing are important activities when designing a Web site

XP

CSS Troubleshooting Tips

• Verify you are using the : and ; symbols in the right spots—they are easy to confuse.

• Check that you are not using = signs instead of : between each property and its value.

• Verify that the { and } symbols are properly placed

• Check the syntax of your selectors, their properties, and property values for correct usage.

• If part of your CSS works, and part doesn’t:– Review your CSS

– Determine the first rule that is not applied. Often the error is in the rule above the rule that is not applied.

• Validate your CSS at http://jigsaw.w3.org/css-validator

XP

End of Presentation

57