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.

http://www.course.com/

http://www.scseries.com/


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




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




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




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




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




Starting Notepad and Opening an HTML File



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


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>




Rules

• If you have a document with a lot of H2 elements, this can become very tedious to type. Use this:




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




Adding an Embedded Style Sheet




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




Viewing an HTML File Using a Browser

• Start your browser• View the webpage




Viewing an HTML File Using a Browser




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




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

Documents

style of elements

type of style

style sheetsadding

style sheetsviewing

style sheetswhat

style sheetsprinting

style sheetssaving

style sheetsrulesif