Chapter 3 Attractive Web Designing

Theory Part 1. What is a style in a Web page ? The tags, attributes and page layout used to make contents of the web page attractive can altogether be called its Style.

2. What is Cascading Style Sheets ? (CSS)

Styles in a web page are used for making the page attractive. Cascading Style Sheets are files that contains code for designing a web page. The same style sheet can be used for several web pages. CSS technology is developed to avoid repetition of the code effectively.

1. LAB 3.1 (Adding Cascading style for a Paragraph tag) Eg:1 Step1 : Open school resources from Home folder. Copy the files banner, mohiniyatam, poem, school kalolsavam to a folder named Kalolsavam2016 . Step2 : Application-Accesseries-Text Editor and type the following html code in this file.

Group Items

Oppena
Thiruvathira
Kolkali
Mohiniyattam

Step3 : Save the file with extension . html and save in your folder.

Eg:2

Single Items

Mohiniyattam
Bharathanatyam

Group Items

Oppena
Thiruvathira

2. LAB 3.2 (Familiarising Different Style )

In the above Lab work 3.1 , Change font family, color and font size try different styles in your web page. 3. LAB 3.3 (Applying Cascading Style to the Heading tag )

Replace the letter p by h1 , you can apply the style in 3.1 to the heading Only. By replacing “h1” by the word “body” you can apply the style to the all body of your web page. Theory Part 3. What is “Element Selector “ ? Element selectors are elements for selecting tags of specified names. In the above LAB works we used Element selectors p, h1, body. 4. What is “Class Selector”? Class selectors are used to give distinct properties to different contents that are included in the same page using the same tag. Example p.blue. 4. LAB 3.4 ( Giving different format to Paragraph tags )

Step1 : Type the following codes in a text editor.

Group Items

KOLKALI
MOHINIYATTAM

OPPANA
KATHAKALI

5. LAB 3.5 ( Giving background colour )

Group Items

KOLKALI
MOHINIYATTAM

OPPANA
KATHAKALI

6. LAB 3.6 ( Modifying background of Heading )

Group Items

KOLKALI
MOHINIYATTAM

OPPANA
KATHAKALI

7. LAB 3.7 ( Difference while using Cascading Style Sheet )

Step 1 : Open 36.html Step2 : Cut all Css code from this file and past it in new Text Editor. Save the file by the file name “10Estyle.css” Step3.: Save the file 36.html by using ' Save As ...' and give name 37.html Step4. : Open both 36.html and 36._new.html and find the difference.

8. LAB 3.8 ( Add CSS file in the Web Page )

Group Items

KOLKALI
MOHINIYATTAM

OPPANA
KATHAKALI

9. LAB 3.9 ( More Web Pages using external style sheet link ) Type these codes and save in different html pages. Before that create My_style.css file containing all your styles

My_style.css 39_1.html

Group Items

KOLKALI
MOHINIYATTAM

OPPANA
KATHAKALI

39_2.html

Group Items

KOLKALI
MOHINIYATTAM

OPPANA
KATHAKALI

39_3.html

Group Items

KOLKALI
MOHINIYATTAM

OPPANA
KATHAKALI

ASSIGNMENT Make attractive the “STUDENT PAGE “ in www.snmhss.org