Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML Concepts and Techniques Fifth Edition Chapter 8 Creating Style Sheets.

Similar presentations


Presentation on theme: "HTML Concepts and Techniques Fifth Edition Chapter 8 Creating Style Sheets."— Presentation transcript:

1 HTML Concepts and Techniques Fifth Edition Chapter 8 Creating Style Sheets

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

3 Chapter 8: Creating Style Sheets 3 Chapter Objectives Change the body margins and background using an external style sheet Change the link decoration and color using an external style sheet Change the font family and size for all paragraphs using an external style sheet Change table styles using an external style sheet

4 Chapter 8: Creating Style Sheets 4 Chapter Objectives Use the tag to insert a link to an external style sheet Add an inline style sheet to a Web page Change the text style of a single paragraph using an inline style sheet

5 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 changing characteristics such as font family, 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 write code statements that control the style of elements on a Web page

6 Chapter 8: Creating Style Sheets 6 Using Style Sheets CSS is not HTML- separate language used to enhance the display capabilities of HTML –W3C – defines the specifications for CSS –Used to add visual elements such as colors, borders, margins, and font styles 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, avoid tedious steps of adding repetitive code to format the same types of information.

7 Chapter 8: Creating Style Sheets 7 Using Style Sheets (3 types of style sheets) 1.Inline style sheet – add a style to an individual HTML tag (heading or paragraph) –Changes specific tag, does not affect other tags in document 2.Embedded style sheet – add style sheet within the tags of the HTML document –defines the style for entire Web page 3.External style sheet (linked) – create a text file that contains all the styles to be applied –Save file with extension.css –Add link to this external style sheet on any Web page in the Web site –Most flexibility apply same formats to all pages in Web site

8 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

9 Chapter 8: Creating Style Sheets 9 Style Sheet Precedence

10 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: 2 parts of style statement 1.Selector – identifies the page elements (h1) 2.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 related value, which specifies display parameters for that specific property.

11 Chapter 8: Creating Style Sheets 11 Inline Style Sheets 1.Inline style sheet – add a style to an individual HTML tag (heading or paragraph) –Changes specific tag, does not affect other tags in document –Inline style sheet example: –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.

12 Chapter 8: Creating Style Sheets 12 Embedded Style Sheets 1.Embedded style sheet – add style sheet within the tags of the HTML document –defines the style for entire Web page –End the embedded style sheet by adding an end tag

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

14 Chapter 8: Creating Style Sheets 14 External Style Sheets 1.External style sheet (linked) – most comprehensive create a text file that contains all the styles to be applied –Save file with extension.css –Add link to this external style sheet on any Web page in the Web site –Most flexibility apply same formats to all pages in Web site 2 Step Process 1.Create external style sheet Enter all style statements in a text file using Notepad or another text editor (.css extension) example: styles1.css 2.Link this style sheet onto desired Web pages tag must be inserted within tags of Web page –

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

16 Chapter 8: Creating Style Sheets 16 External Style Sheets 1.Format of external style sheet – similar to format of embedded style sheet –external style sheet, does not need tags to start and end the style sheet It includes just the style statements –Add link to this external style sheet on any Web page in the Web site –Most flexibility apply same formats to all pages in Web site

17 Chapter 8: Creating Style Sheets 17 Adding an Embedded Style Sheet HTML code before modifications File name

18 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 text styles to a link by specifying two text-decoration values, separating the choices with a space –Example: {text-decoration: underline overline}

19 Chapter 8: Creating Style Sheets 19 Adding an Embedded Style Sheet Start tag Indicates that CSS used in text file Changes paragraph style Changes link style Sets link hover style Beginning comment line hides CSS from browser, if needed End comment line End tag

20 Viewing index HTML File Chapter 8: Creating Style Sheets 20 Text set to 12-point Verdana Text indented 20 points Link hover with white text on color code #6d6f7b background menu.html file

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 21

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

23 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

24 Chapter 8: Creating Style Sheets 24 Creating an External Style Sheet Paragraph style File saved as style1.css Style for all link states Table style Table header style Caption style

25 Chapter 8: Creating Style Sheets 25 Linking to an External Style Sheet Click Notepad button on the taskbar Click File on the menu bar, and then click Open on the File menu Navigate to the proper folder. Click the Files of type box arrow, and then click All 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,, in line 10 Type to enter the link to the external style sheet

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

27 Chapter 8: Creating Style Sheets 27 Linking to an External Style Sheet Link to external style sheet Relation indicates style sheet is linked Link tag placed within tags Text indicates text file uses CSS code Reference indicates name and location of linked style sheet

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

29 Chapter 8: Creating Style Sheets 29 Working with Classes in Style Sheets Defining and using Classes (2 Step Process) 1.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: 2.After naming the classes, use the names in a selector and define a specific style for the class Example: within the tags in an embedded or external style sheet – style statement in format: –p.beginning {color: red; font: 20pt}

30 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 tag on line 30. Press the SPACEBAR and then type style=”fontstyle: italic; font- size: 8pt ” to insert the inline style sheet

31 Chapter 8: Creating Style Sheets 31 Adding an Inline Style Sheet font-size property font-style property Inline style sheet added font-style value set to italic font-size value set to 8-point

32 Chapter 8: Creating Style Sheets 32 Viewing and Printing Framed Web Pages New style for links defined by embedded style sheet Paragraph style defined by external style sheet that is linked to pages Last paragraph style defined by inline style sheet

33 Chapter 8: Creating Style Sheets 33 Chapter Summary 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

34 Chapter 8: Creating Style Sheets 34 Chapter Summary Change the body margins and background using an external style sheet Change the link decoration and color using an external style sheet Change the font family and size for all paragraphs using an external style sheet Change table styles using an external style sheet

35 Chapter 8: Creating Style Sheets 35 Chapter Summary Use the tag to insert a link to an external style sheet Add an inline style sheet to a Web page Change the text style of a single paragraph using an inline style sheet

36 Project 4: Creating Tables in a Web Site 36 Homework # 13 In the Lab 1 page HTML HTML Using External and Internal Styles See INF 186 Computer Assignment 13 Web page for details, hints, and requirements for the assignmentINF 186 Computer Assignment 13 Web page

37 HTML Concepts and Techniques Fifth Edition Chapter 8 Complete Creating Style Sheets


Download ppt "HTML Concepts and Techniques Fifth Edition Chapter 8 Creating Style Sheets."

Similar presentations


Ads by Google