1 / 25

Tutorial 2 Using Styles to Format Web Pages

Tutorial 2 Using Styles to Format Web Pages. Objectives. Identify the differences between HTML and CSS Write CSS styles Choose the correct style to format a Web page Create an embedded style Specify fonts with font properties Control line spacing and white space

coral
Download Presentation

Tutorial 2 Using Styles to Format Web Pages

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. Tutorial 2Using Styles to Format Web Pages

  2. Objectives • Identify the differences between HTML and CSS • Write CSS styles • Choose the correct style to format a Web page • Create an embedded style • Specify fonts with font properties • Control line spacing and white space • Change text and background color on a Web page • Create and apply inline styles New Perspectives on Blended HTML, XHTML, and CSS

  3. Introducing Cascading Style Sheets • With Cascading Style Sheets (CSS), you can create one or more documents that control the appearance of some or all the pages at your Web site • Greater consistency in your Web site • Easily modified code • More flexible formatting • Across-the-board compatibility with all browsers is called cross-browser support • No browser supports all features of CSS New Perspectives on Blended HTML, XHTML, and CSS

  4. Comparing HTML Code to CSS Code New Perspectives on Blended HTML, XHTML, and CSS

  5. Creating a CSS Rule • In a text document, type the selector followed by a left brace, as in the following code, and then press the Enter key. selector { • Type the declarations, separating a property from a value with a colon, and then type a semicolon, as in the following code. property:value; • Type a right brace to end the declaration list. The following code shows the syntax for a complete rule selector { property1:value; property2:value; } New Perspectives on Blended HTML, XHTML, and CSS

  6. Guidelines for Writing CSS Rules • When writing CSS rules, make sure you include the following parts of the code: • Left brace before the declaration list • Colon between each property and its value • Semicolon at the end of each declaration • Right brace at the end of the declaration list • Spacing, indentation, line returns, or the position of the braces are irrelevant New Perspectives on Blended HTML, XHTML, and CSS

  7. Using the Three Types of CSS Styles • An external style is one in which you write the CSS code in a document separate from the HTML for the Web page • An embedded style is one in which you write the CSS code in the <head> section of an HTML document • An inline style is one that is written in the <body> section of an HTML document New Perspectives on Blended HTML, XHTML, and CSS

  8. Creating an Embedded Style • Embedded styles apply styles locally to a single Web page New Perspectives on Blended HTML, XHTML, and CSS

  9. Changing the Font • In CSS, styles are grouped according to their function. One of the most commonly used groups is the font properties New Perspectives on Blended HTML, XHTML, and CSS

  10. Changing the Font New Perspectives on Blended HTML, XHTML, and CSS

  11. Changing the Font • You use the font-size property to change the size of type New Perspectives on Blended HTML, XHTML, and CSS

  12. Changing the Font • You use the font-variant property to display lowercase text in small caps, which is smaller than regular capitals • The font-family property changes the typeface New Perspectives on Blended HTML, XHTML, and CSS

  13. Changing the Font New Perspectives on Blended HTML, XHTML, and CSS

  14. Setting Other Properties to Style Text • The CSS line-height property changes vertical spacing between lines of text, a feature not available in HTML • margin property New Perspectives on Blended HTML, XHTML, and CSS

  15. Setting Other Properties to Style Text New Perspectives on Blended HTML, XHTML, and CSS

  16. Using the font Shortcut Property • The font property is a shortcut property, which means you can use it to specify more than one declaration at a time • font-style • font-weight • font-variant • font-size • line-height • margin • font-family New Perspectives on Blended HTML, XHTML, and CSS

  17. Using Color on a Web Page • In HTML code, you can refer to colors in several ways—by name, RGB value, hexadecimal value, or “short hex” value • RGB values are based on the intensity of red, green, and blue • The hexadecimal values for colors represent the intensity of red, green, and blue New Perspectives on Blended HTML, XHTML, and CSS

  18. Using Color on a Web Page New Perspectives on Blended HTML, XHTML, and CSS

  19. Using the color Property • The CSS color property changes the foreground color, which determines the color of text New Perspectives on Blended HTML, XHTML, and CSS

  20. Setting the background-color Property • You use the background-color property to change the background color of an element New Perspectives on Blended HTML, XHTML, and CSS

  21. Grouping Selectors • If you want more than one HTML selector to have similar declarations, you do not have to create a separate rule for each selector New Perspectives on Blended HTML, XHTML, and CSS

  22. Using Contextual (Descendent) Selectors • In HTML, you can nest tags to apply multiple formatting features to the same text • You can nest CSS code by specifying a selector within another selector, which is called a contextual selector New Perspectives on Blended HTML, XHTML, and CSS

  23. Using the display Property • The display property is one of the CSS classification properties New Perspectives on Blended HTML, XHTML, and CSS

  24. Creating and Applying an Inline Style • 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 New Perspectives on Blended HTML, XHTML, and CSS

  25. Creating and Applying an Inline Style New Perspectives on Blended HTML, XHTML, and CSS

More Related