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) 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. <!DoctypeHTML> body font-family: Verdana; color:blue; font-size : 40px; </style> Step3 : <body> <h1>group Items </h1> <p> Oppena<br> Thiruvathira<br> Kolkali<br> Mohiniyattam<br> Save the file with extension. html and save in your folder. 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. 4. LAB 3.4 ( Giving different format to Paragraph tags ) Step1 : Type the following codes in a text editor. p.red font-family:verdana; color:#0000ff; font-size:40px; p.blue font-family:dejavu Sans Light; color:#ff0000; font-size:20px; </style> <body> <h3>group Items </h3> 5. LAB 3.5 ( Giving background colour ) p.red
</style> p.blue font-family:verdana; color:#0000ff; font-size:40px; font-family:dejavu Sans Light; color:#ff0000; font-size:20px; <h3>group Items </h3> 6. LAB 3.6 ( Modifying background of Heading ) p.red font-family:verdana; color:#0000ff; font-size:40px; p.blue font-family:dejavu Sans Light; color:#ff0000; font-size:20px; h3 font-family : URW Bookman L; color : #00ff00; font-size: 30px; background : #ff0000;
</style> 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 ) <link rel = "stylesheet" type ="text/css" href ="10EStyle.css"> 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 <link rel = "stylesheet" type ="text/css" href ="My_style.css"> 39_2.html <link rel = "stylesheet" type ="text/css" href ="My_style.css"> <p class="green"> <p class="yellow"> 39_3.html <link rel = "stylesheet" type ="text/css" href ="My_style.css">
<h1> Group Items</h1> <p class="yellow"> ASSIGNMENT Make attractive the STUDENT PAGE in www.snmhss.org