1 / 18

Project 8

Project 8. Creating Style Sheets. 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. Cascading Style Sheets. Known as CSS

jeroen
Download Presentation

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

More Related