Download presentation
Presentation is loading. Please wait.
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 Declaration Property Value
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
Similar presentations
