1 / 37

Chapter 8

Chapter 8. Creating Style Sheets. Chapter Objectives. Describe the three different types of Cascading Style Sheets Add an embedded style sheet to a Web page Change the margin and link styles using an embedded style sheet Create an external style sheet. Chapter Objectives.

minna
Download Presentation

Chapter 8

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. Chapter 8 Creating Style Sheets

  2. Chapter Objectives • Describe the three different types of CascadingStyleSheets • Add an embeddedstylesheet to a Web page • Change the margin and linkstylesusing an embedded style sheet • Create an externalstylesheet Chapter 8: Creating Style Sheets

  3. Chapter Objectives • Change the bodymargins and background using an external style sheet • Change the linkdecoration and colorusing an external style sheet • Change the fontfamily and size for all paragraphs using an external style sheet • Changetablestyles using an external style sheet Chapter 8: Creating Style Sheets

  4. Chapter Objectives • Use the <link /> tag to insert a link to an external style sheet • Add an inlinestylesheet to a Web page • Change the textstyle of a singleparagraphusing an inline style sheet Chapter 8: Creating Style Sheets

  5. Using Style Sheets • Style - a rule that defines the appearance of an element on a Web page • Style sheet – series of rules that defines the style for Web page or entire Web site • Alter appearance of Web pages by changingcharacteristics such as fontfamily, font size, margins, and link specifications • Adhere to a common language with set standards and rules • Cascading Style Sheets (CSS) – language allows Web developer to writecodestatements that control the style of elements on a Web page Chapter 8: Creating Style Sheets

  6. Using Style Sheets • CSS is not HTML- separatelanguage used to enhance the displaycapabilities of HTML • W3C – defines the specifications for CSS • Used to add visualelements such as colors, borders, margins, and fontstyles to your Web pages • Makes content look more stylish • Example: want all text paragraphs indented by five spaces: • Use style sheet to handle the indenting, rather than coding each paragraph • CSS can establish a standard look for all Web pages in a Web site. • Using CSS, avoidtedioussteps of adding repetitive code to format the sametypes of information. Chapter 8: Creating Style Sheets

  7. Using Style Sheets (3 types of style sheets) • Inline style sheet – add a style to an individualHTMLtag (heading or paragraph) • Changesspecifictag, does not affect other tags in document • Embedded style sheet – addstylesheet within the <head> tags of the HTML document • defines the style for entire Web page • External style sheet (linked) – create a textfile that containsall the styles to be applied • Savefile with extension .css • Addlink to this external style sheet on any Web page in the Web site • Most flexibility apply sameformats to allpages in Web site Chapter 8: Creating Style Sheets

  8. Style Sheet Precedence • Each style sheet type has a different level of precedence or priority in relationship to the others. • Inline – takes precedence over any other style sheet • Embedded – overrides an external style sheet • Because style sheets have different levels of precedence, all three types of style sheets can be used on a single Web page • May want some elements of a Web page to match other Web pages in a site, but also want to vary the look of certain sections of that web page • Do this by using the three types of style sheets Chapter 8: Creating Style Sheets

  9. Style Sheet Precedence Chapter 8: Creating Style Sheets

  10. Style Statement Format • Style statement - a rule that defines the style of an element on a Web page • Inline style sheet example: • <h1 style = “font-family: Arial; font-color: navy”> • 2 parts of style statement • Selector – identifies the page elements (h1) • Declaration – identifies how elements should appear • Everything in quotation marks • Includes at least one type of style or property • For each property, declaration includes a relatedvalue, which specifiesdisplayparameters for that specific property. Chapter 8: Creating Style Sheets

  11. Inline Style Sheets • Inline style sheet – add a style to an individualHTMLtag (heading or paragraph) • Changesspecifictag, does not affect other tags in document • Inline style sheet example: • <p style = “font-style: italic; font-size: 8pt”> • Override both embedded and external style sheets offering a great amount of flexibility • Inline style sheets useful when one section of a Web page needs to have a style different from the rest of the Web page. Chapter 8: Creating Style Sheets

  12. Embedded Style Sheets • Embedded style sheet – addstylesheet within the <head> tags of the HTML document • defines the style for entire Web page • End the embedded style sheet by adding an end </style> tag <style type="text/css"> <!-- p {text-indent: 20pt} a {text-decoration: none; font-family: Verdana, Garamond; font-size: 12pt;color: navy} a:hover {background: navy; color: white} --> </style> Chapter 8: Creating Style Sheets

  13. Embedded Style Sheets • Style statement using the a selector • Changes all link states (normal, visited, active) • Can define a unique style for each link state by creating 3 separate style statements • a:link • a:visited • a:active • a:hover – selector used to define the style of a link when the mouse pointer points to or hovers over a link. Chapter 8: Creating Style Sheets

  14. External Style Sheets • External style sheet (linked) – most comprehensive create a textfile that containsall the styles to be applied • Savefile with extension .css • Addlink to this external style sheet on any Web page in the Web site • Most flexibility apply sameformats to allpages in Web site • 2 Step Process • Create external style sheet • Enter all style statements in a text file using Notepad or another text editor (.css extension) example: styles1.css • Link this style sheet onto desired Web pages • <link /> tag must be inserted within <head> tags of Web page • <link rel=“stylesheet” type=“text/css” href=“styles1.css” /> Chapter 8: Creating Style Sheets

  15. External Style Sheets (example) a {text-decoration: none; color: black} p {font-family: Verdana, Garamond; font-size: 11pt} table {font-family: Verdana, Garamond; font-size: 10pt; border-color: #6d6f7b; border-style: double} th {background-color: #6d6f7b; color: white; text-align: left} Chapter 8: Creating Style Sheets

  16. External Style Sheets • Format of external style sheet – similar to format of embedded style sheet • external style sheet, does not need <style> tags to start and end the style sheet • It includes just the style statements • Addlink to this external style sheet on any Web page in the Web site • Most flexibility apply sameformats to allpages in Web site Chapter 8: Creating Style Sheets

  17. Adding an Embedded Style Sheet File name HTML codebeforemodifications Chapter 8: Creating Style Sheets

  18. Text-decoration property settings • Blink – causes the text to blink on and off • Line-through – places a line through the middle of the text • Overline – places a line above the text • Underline – places a line below the text • Note: can apply two different textstyles to a link by specifying two text-decorationvalues, separating the choices with a space • Example: {text-decoration: underline overline} Chapter 8: Creating Style Sheets

  19. Adding an Embedded Style Sheet Indicates thatCSS used intext file Start <style> tag Changesparagraph style Beginningcomment linehides CSS frombrowser, if needed Changeslink style Sets linkhover style End commentline End <style> tag Chapter 8: Creating Style Sheets

  20. Viewing index HTML File Text set to 12-pointVerdana menu.html file Text indented20 points Link hover with whitetext on color code#6d6f7b background Chapter 8: Creating Style Sheets

  21. Printing an HTML File and Web Page • Print the Web page from the browser • Click the menu.html - Notepad button on the taskbar • Click File on the menu bar and then click Print on the File menu • Click the Print button in the Print dialog box to print the HTML code Chapter 8: Creating Style Sheets

  22. Printing menu HTML File Chapter 8: Creating Style Sheets

  23. Creating an External Style Sheet • using Notepad Click File on the menu bar and then click New • Enter the CSS code as shown in Table 8–5 on page HTML 360 • click File on the menu bar and then click Save As. Type styles1.css in the File name text box. Click the Save button in the Save As dialog box to save the file as styles1.css • Click the File menu, click Print on the File menu, and then click the Print button in the Print dialog box Chapter 8: Creating Style Sheets

  24. Creating an External Style Sheet File saved asstyle1.css Paragraphstyle Style for alllink states Tableheaderstyle Table style Caption style Chapter 8: Creating Style Sheets

  25. Linking to an External Style Sheet • ClickNotepad button on the taskbar • ClickFile on the menu bar, and then clickOpen on the File menu • Navigate to the properfolder. Click the Files of type box arrow, and then clickAll Files to show all files in the folder. Click the contact.html file • Click the Open button in the Open dialog box • Highlight the text, <!--Insert link statement here -->, in line 10 • Type<link rel=”stylesheet” type=”text/css” href=”styles1.css” /> to enter the link to the externalstylesheet Chapter 8: Creating Style Sheets

  26. Linking to an External Style Sheet Chapter 8: Creating Style Sheets

  27. Linking to an External Style Sheet Link tagplacedwithin<head></head> tags Link to externalstyle sheet Relationindicates stylesheet is linked Text indicates text file usesCSS code Referenceindicates nameand location oflinked style sheet Chapter 8: Creating Style Sheets

  28. Working with Classes in Style Sheets • In some Web sites, might need morecontrol over the style on a Web page. • Example: rather than having all paragraphs appear in the same style, want 1st one to be different. • To gain more control – define specific elements of an HTML file as a category, or class. • Create specificstyle for each class • Using classes in style sheets allows applyingstylesselectively to HTML tags • See HTML page 367 in book for examples Chapter 8: Creating Style Sheets

  29. Working with Classes in Style Sheets • Defining and usingClasses (2 Step Process) • Any elements that belong to the class are marked by adding the tag: class=“classname” • To define a class that includes any beginning paragraphs • Example: <p class=“beginning”> • After naming the classes, use the names in a selector and define a specificstyle for the class • Example: within the <style> tags in an embedded or external style sheet – style statement in format: • p.beginning {color: red; font: 20pt} Chapter 8: Creating Style Sheets

  30. Adding an Inline Style Sheet • If necessary, click the welcome.html - Notepad button on the taskbar so the file welcome.html is displayed • Click immediately to the right of the p in the <p> tag on line 30. Press the SPACEBAR and then typestyle=”fontstyle: italic; font-size: 8pt” to insert the inlinestylesheet Chapter 8: Creating Style Sheets

  31. Adding an Inline Style Sheet Inline stylesheet added font-sizeproperty font-styleproperty font-style valueset to italic font-sizevalue setto 8-point Chapter 8: Creating Style Sheets

  32. Viewing and Printing Framed Web Pages New style forlinks definedby embeddedstyle sheet Paragraph styledefined by externalstyle sheet that islinked to pages Last paragraphstyle defined by inline style sheet Chapter 8: Creating Style Sheets

  33. Chapter Summary • Describe the threedifferenttypes of CascadingStyleSheets • Add an embedded style sheet to a Web page • Change the margin and linkstylesusing an embedded style sheet • Create an external style sheet Chapter 8: Creating Style Sheets

  34. Chapter Summary • Change the bodymargins and backgroundusing an external style sheet • Change the linkdecoration and colorusing an external style sheet • Change the fontfamily and size for all paragraphsusing an external style sheet • Changetablestylesusing an external style sheet Chapter 8: Creating Style Sheets

  35. Chapter Summary • Use the <link /> tag to insert a link to an external style sheet • Add an inline style sheet to a Web page • Change the textstyle of a singleparagraphusing an inline style sheet Chapter 8: Creating Style Sheets

  36. Homework # 13 In the Lab 1 page HTML 378-379 Using External and Internal Styles SeeINF 186 Computer Assignment 13 Web page for details, hints, and requirements for the assignment Project 4: Creating Tables in a Web Site 36

  37. Chapter 8 Complete Creating Style Sheets

More Related