Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML Concepts and Techniques Fourth Edition Project 8 Creating Style Sheets.

Similar presentations


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

1 HTML Concepts and Techniques Fourth Edition Project 8 Creating Style Sheets

2 Project 8: Creating Style Sheets 2 What is a style? A style is a rule that defines the appearance of an element on a web page. A style sheet is a series of rules that changes either a whole page or a site.

3 Project 8: Creating Style Sheets 3 Cascading Style Sheets Known as CSS Allows the web developer to write code statements that control the style of elements. CSS is NOT HTML What is it? –It is a separate language used to enhance –The W3C also defines CSS

4 Project 8: Creating Style Sheets 4 What does CSS do? With CSS you can add visual elements such as: –Color –Borders –Margins –Font Styles Ex. If you want to indent all paragraphs 5 spaces, you can use a style sheet to handle the indenting rather than code each paragraph

5 Project 8: Creating Style Sheets 5 Three types of style sheets InlineInline –Changes an individual tag –You can just change the h1 tag EmbeddedEmbedded –You can add the style sheet within the tags of the document for an entire web page ExternalExternal –You create a text file that contains all of the styles you want to apply –These are the MOST flexible and can be applied to a web site

6 Project 8: Creating Style Sheets 6 Blue Cell Project—Page 331 I will give you files You will implement several different style sheets Let’s look at the site on your H: drive

7 Project 8: Creating Style Sheets 7 Starting Notepad and Opening an HTML File Start Notepad and, if necessary, maximize the window Navigate to your H: drive, click File on the menu bar and then click Open on the File menu. Find the folder I have given you called BlueCell Double-click menu.htm in the list of files

8 Project 8: Creating Style Sheets 8 Starting Notepad and Opening an HTML File

9 Project 8: Creating Style Sheets 9 Adding an Embedded Style Sheet Highlight the comment,, on line 9 and then press the DELETE key Enter the CSS code as shown on the following slide

10 Project 8: Creating Style Sheets 10 What you know already… For example, let's say that you wish to make the text of all H2 elements appear gray. Using straight HTML, you'd have to do this by inserting... tags in all your H2 elements, something like this: This is H2 text

11 Project 8: Creating Style Sheets 11 Rules If you have a document with a lot of H2 elements, this can become very tedious to type. Use this:

12 Project 8: Creating Style Sheets 12 Style Statement Selector –The part of the style statement that identifies the page elements Declaration –The part that identifies how the elements should appear Property –One style or type of style to apply to the selected element Value –Specifies the display parameters for that specific property

13 Project 8: Creating Style Sheets 13 Adding an Embedded Style Sheet

14 Project 8: Creating Style Sheets 14 Saving an HTML File Click Save As. If necessary, type menu.htm in the File name text box Be sure to save to the BlueCell folder Click the Save button in the Save As dialog box. If a Save As dialog box is displayed, click Yes to continue saving

15 Project 8: Creating Style Sheets 15 Viewing an HTML File Using a Browser Start your browser View the webpage

16 Project 8: Creating Style Sheets 16 Viewing an HTML File Using a Browser

17 Project 8: Creating Style Sheets 17 Printing an HTML File Click the 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

18 Project 8: Creating Style Sheets 18 Style Sheet Precedence Each type of sheet has a different level of precedence in relationship to the others Style settings at the lowest level take precedence. That is, an inline style sheet overrides an embedded style sheet, which overrides a linked style sheet for the same style settings


Download ppt "HTML Concepts and Techniques Fourth Edition Project 8 Creating Style Sheets."

Similar presentations


Ads by Google