1. Formatting Text with HTML and CSS
Lesson 6

2. 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>

3. 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 text
Examples: <b>…</b>, <i>…</i>, <u>…</u>
<p> Your homework is due at the <b>beginning</b> of class.</p>

4. Preformatted Text <pre> …text goes here
Line breaks and formatting are preserved
</pre>
Usually displayed in mono-spaced font
Block-level tag

5. Preformatted Text
<pre>Mary
had a
little
lamb</pre>

6. <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” />

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

8. <br />
<br />
Line break

9. <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

10. <blockquote> <blockquote> …text goes here
Used to indent a block of text for special emphasis.
Text is indented from the left and right

11. <blockquote>
blockquote

12. 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>

13. Special Characters
Display special characters such as quotes, copyright symbol, etc.

14. 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>

15. Style Sheets

16. 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

17. 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

18. All <h1> will be purple.
Style Rule Syntax
Selector
Declaration
{ color : purple; } h1
property
value
All <h1> will be purple.

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

20. Applying a Style Sheet
There are 3 ways to apply a style sheet to a web document:
Inline
Embedded
External

21. 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

22. Using Inline Styles
<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
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

23. 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

24. Embedded style

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>

26. An external style sheet

27. CSS Selectors
A selector defines to what a particular style should be applied
Most common selectors:
(X)HTML element
class id

28. p {color: blue; font-size: 11px;}
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;}

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;}

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;}

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;}

32. Class Selectors (2)
To apply the class style to an element, use the class attribute:
<h2 class=“center”>This heading will be centered on the page</h2>
<p class=“center”>This paragraph will be centered on the page.</p>

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 id attribute
<div id=“footer”> Copyright 2006, Metro
</div>

34. Font Style Properties

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.

36. Sizes can be a keyword, percentage or measure (pt, em, in, cm, px).
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

38. Valid values are italic or normal.
font-style: style;
font-style: italic;
font-style: normal;
Valid values are italic or normal.

39. Valid values are normal or small-caps.
font-variant: value;
font-variant: normal;
font-variant: small-caps;
normal The normal value is the default. By declaring normal, you can ensure that any previous declaration will not effect a selected text.   small-caps The small-caps value renders the entire text as small capital letters.
Valid values are normal or small-caps.

40. Valid weights are lighter, bold, bolder or normal.
font-weight: weight;
font-weight: bold;
font-weight: normal;
Valid weights are lighter, bold, bolder or normal.

41. Text Style Properties

42. Defines the space between lines of text
line-height: length;
line-height: 1.5;
line-height: 90%;
Defines the space between lines of text

43. Line Height

44. letter-spacing: value;
letter-spacing: normal;
letter-spacing: 0.1em;
letter-spacing: -3px;
Increases/Decreases the white space between characters

45. text-align: value; text-align: left; text-align: right;
text-align: center;

46. text-transform: value;
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;

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.

48. Increases/Decreases the white space between words
word-spacing: value;
word-spacing: normal;
word-spacing: 30px;
word-spacing: -2px;
Increases/Decreases the white space between words

49. List Properties

50. list-style-type: type;
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: none;
<ul> lists
list-style-type: lower-alpha;
list-style-type: upper-alpha;
list-style-type: lower-roman;
list-style-type: upper-roman;
list-style-type: decimal;
list-style-type: none; gets rid of the marker
These are all the CSS1 values. None of the CSS2 values are currently supported. Details on them:
armenian Level 2 The armenian value uses traditional Armenian numbers as markers.   cjk-ideographic Level 2 The cjk-ideographic value uses plain ideographic numbers as markers.   georgian Level 2 The georgian value uses tradition Georgian numbers as markers.   lower-greek Level 2 The lower-greek value uses classic lower-case Greek characters as markers.  hebrew Level 2 The hebrew value uses traditional Hebrew numbers as markers.   hiragana Level 2 The hiragana value uses the Japanese Hiragana character list as markers.   hiragana-iroha Level 2 The hiragana-iroha value uses the Japanese Hiragana-iroha ordering as markers.   katakana Level 2 The katakana values uses the Japanese Katakana character list as markers.   katakana-iroha Level 2 The katakana-iroha value uses the Japanese Katakana-iroha ordering as markers.   lower-latin Level 2 The lower-latin value uses lower-case Latin characters as markers.   upper-latin Level 2 The upper-latin value uses upper-case Latin characters as markers.
<ol> lists

51. list-style-position: value;
list-style-position: inside;
list-style-position: outside;
inside   The inside value indents the list-item marker to the right into the list.   outside   The default outside value keeps the list-item marker extended to the left out of the list
Inside/Outside refers to the position of the marker with respect to each item in the list.

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.

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

54. W3C CSS Validation

55. 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

56. 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

57. End of Presentation