Post on 17-May-2015
Unit 12 – Style Sheets
Presentation 1
Web Programming
Revision
1. List any 5 controls that can be added to a Form.
2. State the difference between Text Field and Text Area.
3. Mention the use of Action and Method attributes of <FORM> tag.
4. State the difference between radio button and check box.
5. Which tag is used to add drop-down list box to a form?
Objectives
At the end of this presentation, you will be able to• List the advantages of using Style Sheets• Add External Style Sheet to your Web pages• Add Internal Style Sheet to your Web pages• Add Inline Style Sheet to your Web pages
CSS
• CSS stands for Cascading Style Sheets.• A Style Sheet contains a set of instructions that
modifies the values of the attributes of a tag.• Styles can be defined in 3 ways using:
External Style Sheets Internal Style Sheets Inline Style Sheet
External Style Sheets
• In the External Style Sheets, the tags that are necessary to create styles are saved in a file with extension .css.
• The file is linked to the HTML file by using the <LINK> tag in the HTML file.
• <Href> attribute is used to assign URL of the style sheet file.
Hands-On!
• Open the HTML file Ext_CSS.HTML in IE.• This HTML document illustrates the use of
External Sheets in a Web page.
Lab Exercise
1. Open D12_1.html in Internet Explorer.
a. Locate the tag which is used to call the external style sheet file into html file.
b. Identify the attribute which is used to define the relationship between the linked file and the HTML file.
c. Name the attribute which is used to specify the type of the file.
Lab Exercise
1. Open D12_1.html in Internet Explorer.
a. View the source code in the Notepad.
b. Change the background and text colour as shown in the following Figure.
Lab Exercise
3. Create an external style sheet and display the output as given in the following Figure.
Internal Style Sheets
• <STYLE> tag is used to create internal style sheet.
• <STYLE> tag is placed inside the <HEAD> tag.
Hands-On!
• Open the HTML file Int_CSS.HTML in IE.• This HTML document illustrates the use of
Internal Sheets in a Web page.
Inline Style Sheet
• Inline styles are inserted directly into the tags by assigning styles to the Style attribute of respective tags.
Hands-On!
• Open the HTML file Inl_CSS.HTML in IE.• This HTML document illustrates the use of
Inline Styles in a Web page.
Order of Precedence
• The following is the order of precedence followed by a browser:
Inline Style Sheet Internal or Embedded Style Sheet External or Linked Style Sheet Default style used by the browser
(If the Style is not specified).
Lab Exercise
4. Create an external style sheet and display the output as given in the following Figure.
Activity 2.12.1
• Create a Web page that explains Cascading Style Sheets as shown in Figure.
• Save the HTML file as Activity1.html in C:\HTML\Unit12\Activity folder.• The content of the same page is continued in the
next Figure.
Activity 2.12.1 Contd.
Activity 2.12.2
• As explained earlier, the Web pages created in the Activities of all the units from 3 to 12 will lead to the creation of a Web Site. The Web pages in all the Activities should be linked together. Do the following to create the home page for this Web site.
• Create a Web page as shown in the figure whose continuation is given in the next figure. The files to be linked and their location are given in the Table.
• Save the HTML file as Index.html in C:\HTML folder.
Activity 2.12.2 (Contd..)
Activity 2.12.2 (Contd..)Link in the left
frameFile to be linked Location
About the Internet Activity3.html C:\HTML\Unit 7\Activity
Basics of HTML Activity5.html C:\HTML\Unit 3\Activity
Adding Headings Activity1.html C:\HTML\Unit 3\Activity
Inserting Line Breaks and Paragraphs
Activity2.html C:\HTML\Unit 3\Activity
Drawing Horizontal Rule Activity3.html C:\HTML\Unit 3\Activity
Scrolling the Text Activity4.html C:\HTML\Unit 3\Activity
Making the Text Bold, Italic and Underlined
Activity1.html C:\HTML\Unit 4\Activity
Changing the Size of the Text
Activity2.html C:\HTML\Unit 4\Activity
Activity 2.12.2 (Contd..)Link in the left
frameFile to be linked Location
Positioning and Striking the Text
Activity3.html C:\HTML\Unit 4\Activity
Ordered List Activity1.html C:\HTML\Unit 5\Activity
Unordered List Activity2.html C:\HTML\Unit 5\Activity
Definition List Activity3.html C:\HTML\Unit 5\Activity
Adding Hyperlinks Activity1.html C:\HTML\Unit 6\Activity
Inserting Images Activity1.html C:\HTML\Unit 7\Activity
Inserting Music, Movie and Animation
Activity1.html C:\HTML\Unit 8\Activity
Adding Tables Activity1.html C:\HTML\Unit 9\Activity
Activity 2.12.2 (Contd..)Link in the left
frameFile to be linked Location
Creating Frames Activity6.html C:\HTML\Unit 10\Activity
Adding Forms and Controls
Activity2.html C:\HTML\Unit 11\Activity
Cascading Style Sheets Activity1.html C:\HTML\Unit 12\Activity
Activity 2.12.3
• The home page shown in following Figure contains two vertical frames. Load the file Index.html located at C:\HTML folder in the left frame and Activity3.html located at C:\HTML\Unit 7\Activity folder in the right frame. When a link in the left frame is clicked, the corresponding page should be opened in the right frame. The link, the file to be linked and its location is given in the Table in the previous slide.
Activity 2.12.3 (Contd…)
Activity 2.12.3 (Contd…)
1. Create a Web page shown in the previous slide. 2. Save the HTML file as Main.html in C:\HTML folder.3. All the Web pages of a Web site should have the same
appearance. So create an external style sheet file Style.css in C:\HTML folder. The commands in Style.css is shown below:
H1 {Text-Align:Center;Color:Firebrick}H2 {color:Firebrick}H3 {color:Firebrick}BODY {Background:Lightyellow;Font-Size:14pt}FONT {Font-Size:14pt}
Activity 2.12.3 (Contd…)
4. Add the following code inside the <HEAD> tag in all the activity files created.<LINK Rel="Stylesheet" Href="C:\HTML\Style.css">5. Open the Main.html folder in Internet Explorer and browse the Web site created.
Summary
In this presentation, you learnt the following:• CSS stands for Cascading Style Sheets. • The 3 types of Style Sheets are Internal Style
Sheet, External Style Sheet and Inline Style Sheet.
• In the External Style Sheets, the tags that are necessary to create styles are saved in a file with extension .css.
Summary
• In the Internal Style Sheets, the tags that are necessary to create styles are placed inside the <STYLE> tag.
• In the Inline Styles, the values that are necessary to create styles are assigned to the Style attribute of respective tags.
• Inline styles hold the highest priority among the Style Sheets.
Assignment
1. Name the three Style Sheets.
2. List the advantages of using Style Sheets.