Download - Project 8
HTMLConcepts and Techniques
Fourth Edition
Project 8
Creating Style Creating Style SheetsSheets
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
• InlineInline– Changes an individual tag– You can just change the h1 tag
• EmbeddedEmbedded– You can add the style sheet within the <head> 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
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