Download - Project 8
![Page 1: Project 8](https://reader036.vdocument.in/reader036/viewer/2022062521/56816851550346895dde58c6/html5/thumbnails/1.jpg)
HTMLConcepts and Techniques
Fourth Edition
Project 8
Creating Style Creating Style SheetsSheets
![Page 2: Project 8](https://reader036.vdocument.in/reader036/viewer/2022062521/56816851550346895dde58c6/html5/thumbnails/2.jpg)
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.
![Page 3: Project 8](https://reader036.vdocument.in/reader036/viewer/2022062521/56816851550346895dde58c6/html5/thumbnails/3.jpg)
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
![Page 4: Project 8](https://reader036.vdocument.in/reader036/viewer/2022062521/56816851550346895dde58c6/html5/thumbnails/4.jpg)
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
![Page 5: Project 8](https://reader036.vdocument.in/reader036/viewer/2022062521/56816851550346895dde58c6/html5/thumbnails/5.jpg)
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
![Page 6: Project 8](https://reader036.vdocument.in/reader036/viewer/2022062521/56816851550346895dde58c6/html5/thumbnails/6.jpg)
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
![Page 7: Project 8](https://reader036.vdocument.in/reader036/viewer/2022062521/56816851550346895dde58c6/html5/thumbnails/7.jpg)
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
![Page 8: Project 8](https://reader036.vdocument.in/reader036/viewer/2022062521/56816851550346895dde58c6/html5/thumbnails/8.jpg)
Project 8: Creating Style Sheets 8
Starting Notepad and Opening an HTML File
![Page 9: Project 8](https://reader036.vdocument.in/reader036/viewer/2022062521/56816851550346895dde58c6/html5/thumbnails/9.jpg)
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
![Page 10: Project 8](https://reader036.vdocument.in/reader036/viewer/2022062521/56816851550346895dde58c6/html5/thumbnails/10.jpg)
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>
![Page 11: Project 8](https://reader036.vdocument.in/reader036/viewer/2022062521/56816851550346895dde58c6/html5/thumbnails/11.jpg)
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:
![Page 12: Project 8](https://reader036.vdocument.in/reader036/viewer/2022062521/56816851550346895dde58c6/html5/thumbnails/12.jpg)
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
![Page 13: Project 8](https://reader036.vdocument.in/reader036/viewer/2022062521/56816851550346895dde58c6/html5/thumbnails/13.jpg)
Project 8: Creating Style Sheets 13
Adding an Embedded Style Sheet
![Page 14: Project 8](https://reader036.vdocument.in/reader036/viewer/2022062521/56816851550346895dde58c6/html5/thumbnails/14.jpg)
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
![Page 15: Project 8](https://reader036.vdocument.in/reader036/viewer/2022062521/56816851550346895dde58c6/html5/thumbnails/15.jpg)
Project 8: Creating Style Sheets 15
Viewing an HTML File Using a Browser
• Start your browser• View the webpage
![Page 16: Project 8](https://reader036.vdocument.in/reader036/viewer/2022062521/56816851550346895dde58c6/html5/thumbnails/16.jpg)
Project 8: Creating Style Sheets 16
Viewing an HTML File Using a Browser
![Page 17: Project 8](https://reader036.vdocument.in/reader036/viewer/2022062521/56816851550346895dde58c6/html5/thumbnails/17.jpg)
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
![Page 18: Project 8](https://reader036.vdocument.in/reader036/viewer/2022062521/56816851550346895dde58c6/html5/thumbnails/18.jpg)
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