1 / 125

New Perspectives on Creating Web Pages with HTML

New Perspectives on Creating Web Pages with HTML. Tutorial 7: Working with Cascading Style Sheets. Tutorial Objectives. Learn about the history and theory of cascading style sheets Create inline styles, embedded styles, and style sheets Understand style precedence and style inheritance

constantine
Download Presentation

New Perspectives on Creating Web Pages with HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. New Perspectives on Creating Web Pages with HTML Tutorial 7: Working with Cascading Style Sheets Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  2. Tutorial Objectives • Learn about the history and theory of cascading style sheets • Create inline styles, embedded styles, and style sheets • Understand style precedence and style inheritance • Use cascading style sheets to format paragraphs, lists, and headings Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  3. Tutorial Objectives Continued • Design a style for hyertext links in their four conditions • Define document content with the class and id attributes and create styles for them • Mark document content with the <div> and <span> tags and create styles for them • Use cascading styles to design page layout Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  4. HTML and Page Layout • Early versions of HTML had little support for Web page design. • The philosophy was to: • use basic text files that could be quickly downloaded • rely on Web browsers to format the document’s appearance • The simplicity of HTML tags made creating Web pages easier and made pages load faster. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  5. HTML and Page Layout • Web authors looked for ways to deliver more visually interesting documents. This has been done chiefly in three ways: • using HTML tag extensions • converting text to images • controlling page layout with tables Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  6. HTML and Page Layout Upside • HTML tag extensions: Provide the Web author with more choices in layout and design. • Converting text to images: Don’t have to worry whether a browser will support a particular font. Place in specific locations on the Web page. • Tables: Use as a layout tool. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  7. HTML and Page Layout Downside • HTML tag extensions: Not all browsers support the various tag extensions. • Converting text to images: You are limited in the number of inline images you can use and still have the page downloaded in a timely fashion. Moreover, it’s difficult to make quick changes to the page’s content if you have to edit the inline graphics first. • Tables: This makes the HTML files more complicated to write and to interpret. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  8. History and Support of CSS • One principle of design theory is to separate the content of a document from its design. • A style defines the appearance of a document element. • The collection of styles for a Web page or Website is known as a style sheet. • Style sheets use a common language and syntax. • The main style sheet standard is Cascading Style Sheets (CSS). Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  9. Cascading Style Sheets (CSS) • Like HTML, style sheets must use a common language and follow common rules. This language is known as Cascading Style Sheets, or more simply, CSS. • CSS has been developed by the WWW Consortium (www.w3c.org), the same organization that develops standards for HTML. • CSS is designed to augment HTML, not replace it. • CSS is a whole new way of formatting Web pages. • CSS provides several tools not available with standard HTML. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  10. CSS Versions • CSS1 was released in 1996. • CSS2 was released in 1998. • CSS3, the latest standard is being developed. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  11. Browser Support for CSS • Browser support for CSS has proven to be uneven. • Internet Explorer • Internet Explorer 4.0 provides support for CSS1 standard. • Internet Explorer 5.0 provides the best support for CSS1, there are still buys in the implementation of Internet Explorer. • Netscape • Netscape’s support for CSS1 has been spotty. • Netscape has been pushing their own style sheet language over CSS. • Netscape is not considered CSS1-compliant, However, Netscape 5.0 may end up supporting CSS1. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  12. Benefits of Style Sheets • Use as a design tool. • Makes website more flexible. • Easier to maintain and modify. • More aesthetically interesting. • Consistent look. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  13. Web Sites with Information on Cascading Style Sheets This figure displays websites that provide more information about the compliance of browsers with CSS1 and CSS2, and for information about the standards themselves. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  14. Style Types • There are three ways of employing CSS in Web pages: • inline styles in which styles are added to each tag within the HTML file. The style affects that particular tag but does not affect other tags in the document. • embedded or global styles applied to an entire HTML file, allowing the Web designer to modify the appearance of any tag in the document. • linked or external style sheets placed in an external file and linked with pages in the Web site, allowing the Web designer to modify the appearance of tags in several documents • Which approach you choose depends on the Web site’s design.. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  15. Using Inline Styles • If you need to format a single section in a Web page, you’d probably use an inline style. • To create in inline style, add the style attribute to the HTML tag using the following syntax: <tag style=“style declarations”> • tag is the name of the tag (h1, h2, etc) • style declarations are the styles you’ll define for a particular tag • style declaration must be enclosed within double quotation marks Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  16. A Style Declaration • A style declaration consists of attribute names that specify such features as: • font size • color • font type • Attributes are followed by a colon and then the value of the attribute. • Multiple attributes can be used as long as you separate each one by a semicolon. • The general syntax for the style declaration is: attribute1:value1; attribute2:value2; Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  17. Inserting an Inline Style This figure shows how to insert an inline style. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  18. Heading with New Style This figure shows the heading with the new style. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  19. Creating an Embedded Style • An embedded style is a style applied to various sections within a Web page. • Insert a <style> tag within the head section of the HTML file. • Within the <style> tag, enclose the style declarations needed for the entire Web page. • The syntax of an embedded style is: <style type=“style sheet language”> style declarations </style> • style sheet language identifies the type of style language used in the document • The default, is “text/css” for use with CSS Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  20. Selectors and Declarations • Style declaration within the <style> tags obey the following syntax: selector {attribute1:value1; attribute2;value2; ...} • selector identifies an element in your document, such as a heading or paragraph, and the attributes and values within the curly braces indicate the styles applied to all the occurrences of that element • this collection of attributes and values is also referred to as the declaration of the selector Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  21. Selectors and Declarations Continued • For example, to display all h1 headings in the HTML document using a gold sans-serif font, use the following embedded style: <style> h1 {color: gold; font-family: sans-serif} </style> • h1 is the selector and the text enclosed in the braces is the declaration Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  22. Defining a Global Style The type attribute was not included within the <style> tag. This is because “text/css” is the default style language , and unless you specify a different style language, you don’t need to enter the type attribute. When using the <style> tags, you don’t need to include double quotes around the attributes and attribute values. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  23. Grouping Selectors • You can apply the same declaration to a group of selectors by including all of the selector names separated by commas. • The following is a sample style declaration to format all headings in a gold sans-serif font: <style> h1, h2, h3, h4, h5, h6 {color:gold; font-family:sans-serif} </style> Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  24. The Same Style Applied to Two Headings Even though the same style is used for all heading tags, there are still some differences in how the browser displayed text formatted with these tags. Most notably, the styles did not affect the relative sizes of the text. Text formatted with the <h1> tag is still larger than text formatted in the <h2> tag. This is because the size of the heading text was not defined, so that attribute is left to the browser. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  25. Using an External Style Sheet • Create styles that apply to an entire Web site by creating a text file containing style declarations. • Most style sheets have the extension “.css”, though this is not a requirement. • Within a style sheet, you don’t need <style> tags, just the style declarations. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  26. Linking to Style Sheets with the <link> Tag • Use the <link> tag to link Web pages to a style sheet. • The general syntax for using the <link> tag is as follows: <link href=“URL” rel=“relation_type” type=“link_type”> • URL is the URL of the linked document • relation_type establishes the relationship between the linked document and the Web page • link_type indicates the language used in the linked document • In order to link to a style sheet, the value of the rel attribute should be “stylesheet” and the value of the type attribute should be “text/css”. • To link to a style sheet named “mws.css,” the <link> tag would be: <link href=“mws.css” rel=“stylesheet” type=“text/css”> Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  27. Linking to Style Sheetswith @import • Another way to link to a style sheet is to use the @import command, which accesses the style sheet definitions from another file. • To use @import with styles, enclose the @import command within the embedded <style> tags as follows: <style> @import url(stylesheet.css); style declarations </style> • stylesheet.css is the URL of the style sheet file Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  28. The @import Command • The @import command provides greater flexibility than the <link> tag when working with multiple style sheets. • The @import command has limited browser support. • Unless you have a compelling reason to use @import, you are probably better off using the <link> tag. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  29. Resolving Style Precedence • In cases where the styles conflict, precedence is determined in the following order: • an inline style overrides any embedded style or external style sheet • an embedded style overrides an external style sheet • an external style sheet overrides the internal style rules set by the Web browser • any style attributes left undefined by an inline style, an embedded style, or an external style sheet are left to the Web browser Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  30. Changing Styles • As a change is made to a style at one level, the changes are cascaded through to the other levels (hence the term, cascading style sheets). • Where a different font has not been specified, changes will cascaded through the embedded and inline styles. • As you define more styles for a Web site, you need to keep track of the inline, embedded, and external style sheets to correctly predict the impact that style changes have on the appearance of each page. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  31. Working with Style Inheritance • Web pages invariably have elements placed within other elements. • for example, a Web page might have a bold tag, <b>, placed within a paragraph tag, <p>, to create boldface text within the paragraph. The paragraph tag is likewise placed within the <body> tag. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  32. Sample Tree Structureof HTML Elements This figure displays the HTML element relationship using a tree diagram. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  33. Parent and Descendant Elements • An element that lies within another element is called a descendant or descendant element. • An element that contains another element is called the parent or parent element. • An example of a parent is the <body> tag, which contains all of the other tags used to format the content of a Web page. • Using the principle of inheritance, styles defined for each parent tag are transferred to its descendants. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  34. Contextual Selectors • Use the tree structure concept to better control how styles are applied to a Web page. • CSS provides ways of fine-tuning the context in which the selector is applied. • if you want to apply a style only to the direct descendant of a parent element, use the syntax: e1 > e2 • el and e2 are the names of HTML elements and e2 is directly below the e1 in the hierarchy of elements in the document • for example: li > b {color:blue} Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  35. Contextual Selectors Continued • Not all browsers support contextual selectors • Always test Web page using various browsers and browser versions. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  36. Using Font Families • The font-family attribute allows you to choose a font face for use in Web pages. • CSS works with two types of font faces: • a specificfont, which is a font such as Arial, Garamond, or Times New Roman that is actually installed on a user’s computer. • a generic font, which is a general description of a font, allowing the operating system to determine which installed font best matches it. • CSS supports five generic font types: serif, sans-serif, monospace, cursive, and fantasy. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  37. Generic Fonts This figure shows examples of each generic type. For each generic font there can be a wide range of designs. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  38. Generic and Specific Fonts • One issue with generic fonts is that you cannot be sure which specific font the Web browser uses to display your text. • Whenever possible, it is a good idea to use specific fonts. • Provide the Web browser with several fonts to choose from. • Browsers that don’t have access to the font you specified as your first choice may have your second or third choice available. • List specific font names first, followed by a generic font name for the browser to use if none of the specific fonts can be found. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  39. Managing Font Size • The <address> tag can format address information on a Web page. • by default, text formatted with the <address> tag is displayed in normal-sized type, italicized, and aligned with the left edge of the Web page. • A common method for specifying font sizes with HTML is to use the size attribute of the <font> tag. • The size attribute limits you to only seven font sizes. • Browsers can display font sizes quite differently. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  40. Managing Font Size Continued • In CSS, you use the font-size attribute to manage font sizes. Font sizes can be expressed: • as a unit of length • with a keyword description • as a percentage of the parent element • with a keyword expressing the size relative to the font size of the parent element Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  41. Absolute and Relative Units • If you choose to express size as a unit of length, you can use absolute units or relative units. • absolute units define the font size based on one of the following standard units of measurement: mm (millimeter), cm (centimeter), in (inch), pt (point), and pc (pica). • use a relative unit, which expresses the font size relative to a size of a standard character. There are two standard typesetting characters, referred to as “em” and “ex.” • the em unit is equal to the width of the capital letter “M” in the browser’s default font size • the ex unit is equal to the height of a small “x” in the default font Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  42. The EM and EX Units The em unit is more useful for page design, because 1 em is equal to the browser’s default font size for body text. This is true no matter what font is being used (unlike the ex unit, whose size changes based on the font face being used). Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  43. The EM and EX Units • As with absolute units, you can specify factional values for the em and ex units. • Unlike the absolute units, em and ex units are scalable in that they retain their relative proportions regardless of the monitor size or resolution. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  44. Pixels • Pixels give you the greatest control over size. • A pixel is the smallest element recognized by the monitor. • Pixels should be used with some caution. • Text that is 10 pixels high may be perfectly readable at a monitor resolution of 640 x 480, but it can become unreadable if the monitor is set to 1024 x 768. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  45. Descriptive Keywords • If you are uncomfortable dealing with units of length, you can use one of the seven descriptive keywords: • xx-small • x-small • small • medium • large • x-large • xx-large • These keywords correspond to the seven values of the size attribute in the <font> tag. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  46. Expressing Font Sizeas a Percentage of the Parent Tag This figure shows the impact of such a style definition on boldface text in a Web page. The style has the same impact within a heading, since the heading is the parent element, and the boldface text is increased to 150% of the surrounding heading text. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  47. Express a Font Sizeusing Keywords • Express a font size using the keywords “larger” and “smaller,” which makes the font one size larger or smaller than the size of the parent element. • for example, to make the h2 heading one size larger than the body text, you could use the following style: body {font-size: medium} h2 {font-size: larger} Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  48. Specifying Word, Letter,and Line Spacing • Use CSS font attributes to control the spacing between letters, words, and lines of text. • To set the space between individual letters, you use the letter-spacing attribute, with the syntax: letter-spacing: size • size can either have the value “normal”, which allows the browser to determine the letter spacing based on the font being used, or a number expressed in the same measuring units used to describe font size (inches, millimeters, centimeters, em units, etc.) Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  49. Specifying Word, Letter,and Line Spacing Continued • Another technique to change the spacing between individual words is the word-spacing attribute, with the syntax: word-spacing: size • size is either equal to “normal,” to allow the browser to set the word spacing, or to a specific length using the standard units of measure • Use the line-height attribute to modify the vertical space between lines of text. • Graphic designers may know this spacing as leading. • The line-height attribute specifies the minimum distance between the baselines of adjacent lines. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

  50. Comparison of Line Height to Font Size This figure shows how the line height relates to the font size. The line height is usually larger than the font size to leave additional space between lines of text. Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 7

More Related