Formatting Text with HTML and CSS Lesson 6

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>

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>

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

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

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

<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

<br /> <br /> Line break

<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

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

<blockquote> blockquote

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>

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

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>

Style Sheets

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

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

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

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)

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

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

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

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

Embedded style

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

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

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

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

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

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

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>

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>

Font Style Properties

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.

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

Various font sizes

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

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.

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.

Text Style Properties

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

Line Height

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

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

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

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.

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

List Properties

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

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.

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.

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

W3C CSS Validation http://jigsaw.w3.org/css-validator/

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

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

End of Presentation