Download
project 8 n.
Skip this Video
Loading SlideShow in 5 Seconds..
Project 8 PowerPoint Presentation

Project 8

131 Vues Download Presentation
Télécharger la présentation

Project 8

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. 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. 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 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 Project 8: Creating Style Sheets

  5. Three types of style sheets • Inline • Changes an individual tag • You can just change the h1 tag • Embedded • You can add the style sheet within the <head> tags of the document for an entire web page • External • 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 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 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 Project 8: Creating Style Sheets

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

  9. Adding an Embedded Style Sheet • Highlight the comment, <!-- Insert embedded style sheet here -->, on line 9 and then press the DELETE key • Enter the CSS code as shown on the following slide 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 <FONT color="gray">...</FONT> tags in all your H2 elements, something like this: <H2><FONT COLOR="gray">This is H2 text</FONT></H2> 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: 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 Project 8: Creating Style Sheets

  13. Adding an Embedded Style Sheet 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 Project 8: Creating Style Sheets

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

  16. Viewing an HTML File Using a Browser 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 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 Project 8: Creating Style Sheets