Cascading Style Sheets and Java script Cascading Style Sheets or CSS allows you to specify styles for the visual elements of the website, It helps us to keep the information content of a document separate from the details of how to display it. This detail of how to display the document is known as style, Styles specify the appearance of particular page elements on the screen. Keeping the style separate from the content helps us to : e Avoid duplication in coding © Use the same content with different styles for different purposes © Easy maintenance of code In HTML, for example, if we want contents of some paragraph tag

to appear in bold, then we have to insert the bold tag every time the

tag appears in the source code. If the website is large, repeating the tag every time becomes tedious and time-consuming. But using CSS, we can set all element types to appear in a style as per our choice. So even if we have more number of

tags in the website, using CSS we can set the style for all the

tags at once. Thus we can say that, HTML is used to describe the information content of the document and not the style, while CSS describes the style of the elements in the document and not its contents. Using CSS, we can control the font types, font and element colors, pad spaces, margins, and element positions in our website. Syntax of CSS ‘The syntax of CSS consists of special symbols known as rules. A CSS rule has two main parts: a selector, and one or more declarations. The selector is the HTML element on which you want to apply the style. Declaration consists of a property associated with the HTML element used in selector and its corresponding value, The general syntax of CSS is defined as: selector {property : value} Figure 2.1 gives an example of one such syntax : H1{ color: green } Selector Property Value Figure 2.1 : Syntax of CSS We can easily add CSS using KompoZer. Let us learn how to add CSS to a web page in KompoZer. To make sure that KompoZer uses CSS by default, click Edit > Preferences, This will open Options dialog box as shown in figure 2.2. Select the General category on the left side of the window. Select the checkbox "Use CSS styles instead of HTML elements and attributes" if it is not selected. KompoZer will now use the CSS styling instead of HTML to format the text. Highlighted by Pragati Computers, M. 9904167671. Highlighted by Pragati Computers, M. 9904167671. Cascading Style Sheets and Java script 28Highlighted by Pragati Computers, M. 9904167671. Recent Pages Menu Maximum pumberor pageslistee: [10 When saving or Publishing Pages New page Settings | @ Retain original source formatting i Reformat HTML source advanced Saveimagesand other assocatediies when saving pages S Always show Publish dlaloawhen publishing pages Apolcatons — -Tabletdlting & Naintaintablelaysutwheninserting or deleting cells + Caiending syle sheets (55) Eating © Use C55 styesinstead of ML elements and atrbutes site manager ——=——————___——— Always open document ina newtab 1 Use system icons Figure 2.2 : Options dialog box ‘Assume that we Want to design a website and the heading on all the web pages should follow a particular style. For example, all the Headings! (h1) inserted in the web pages should follow the style as given : > Font : Times New Roman > Case : Uppercase = Alignment : Centre aligned > Background color : Light Blue > Border : Dotted Border Follow the steps given to create the CSS for the above heading. © Open a new file. Give the Title name and save the file. In the composition toolbar, select the Cascade button © sot: te Hie isnot saved, the Page title dialog box will be opened. After giving the page title, save the file). This will open the dialog box as shown in figure 2.3. Using this dialog box we will define the styles for each element, Click on the first radio button "style applied to all the elements of type”. 26 ‘Computer Studies : 12 Highlighted by Pragati Computers, M. 9904167671.Highlighted by Pragati Computers, M. 9904167671. Sheetsond rules New Style rule [> internal stylesheet @ style applied to all elements oF type eg.hz style applied to all elements ofc eg..myelass Create anew: style appliedto an element with specified 0 attribute eg.#header custom stylerule eg. divsheader a:hover int Create siyteruie Figure 2.3: CSS Stylesheets dialog box © From the drop down menu choose an element to create the style rule, As we want to create style for Heading], we have selected hl (Heading 1) from the drop down menu as shown in figure 2.3. © Click the Create Style rule button. You will see that the CSS Stylesheets dialog box remains open but the options will change. © Figure 2.4 shows the hl element just below the heading “internal stylesheet” on the left pane of the window. For each element we add, a style rule will appear in this list below the heading “internal stylesheet". On the right side of the window, you will see various tabs like General, Text, Background, Borders, Box, Lists and Aural. Each of these tabs can be used to give a specific style to the element. But all the tabs may not be applicable to the selector for which the style rule is created. Now, let us create the style rule for hl. selector. re ee ee er oe ts andes Style rule = wiicernalstyester Selector, bt ha cancel Figure 2.4: CSS stylesheets dialog box with options for hi © Select h1 in the left pane of the window. Click the Text tab as shown in figure 2.5. This will show various style options like Font family, Font size, Line height, Color, Case, Alignment and many more. Cascading Style Sheets and Java script 7 Highlighted by Pragati Computers, M. 9904167671.Highlighted by Pragati Computers, M. 9904167671. (Caan eee om faa Font fanie 7 [=wisteraistyesheet unspecified wt @ predetined: “Times New Roman's Times seri Usecustom fontfanily a Fontslze Uneheight: =8 oter: Fortstle: unspectied. + case uppercase. = “Tent decorations ez weight: [unspecfied. = lonment: | center ‘verting LUnethrough ‘underline inking ‘THE QUICK BROWN FOX JUMPS OVER THELAZY DOG Figure 2.5 : Text tab © We will now select the options as per the style required for hl. In the Font family section, select the “predefined” radio button and choose "Times New Roman" from the drop down menu. Choose "Uppercase" from the Case menu and "Center" from the Alignment menu, Figure 2.5 shows the options selected. As you change the options, you can see the default text in the window changes automatically according to the styles. © To set the background color, select the Background tab. This will open the options for the background as shown in figure 2.6. e-w tx [rail ssagon0] Color Wwinternalstylesheat at meyer A 1 ra P coose te cancel, |) 0K Figure 2.6 : Background tab Computer Studies : 12 Highlighted by Pragati Computers, M. 9904167671.Highlighted by Pragati Computers, M. 9904167671. ‘© Inthe Color option, click the color palette button. This opens Block Background Color dialog box as shown in figure 2.7. Select the color of your choice and press OK. button. Drees Predefined colors: F__Lastpicked color Hue: jo i: J Hex: | #FFFFFF saturation: [0 Green: | 255 Neme: | white Brightness: | 255 Blue: | 255 ‘Transparent Cancel Figure 2.7 : Block Background Color dialog box © Figure 2.8 shows the background tab after selecting the color. Note : If you want to keep an image in the background then in the Image option, click on "Choose file" and select the file for the background. Pres t & [Generat | Text] Backaround [Borders [Box | Lists | Aural olor: | 99H = 7 A 1 mace & chnose te Figure 2.8 : Options selected in Background tab for hi ‘Cascading Style Sheets and Java script 29 Highlighted by Pragati Computers, M. 9904167671.© To set the border, select the Border tab. This will open the options for the border as shown in figure 2.9. If you want to apply the same border on all the four sides, tick the checkbox in front of the text "All four sides use same border style". You will see that only one option "Top" will be enabled and all others are disabled. This is because; the effect made on a single side will be applied on all the four sides. From the drop down menu of Style, select dotted. You can also specify the width and the color of the border as per your choice. We can also see the preview of the border style used by us. Press OK button. vo oh & 1 & (Eeewall ert euetjomnl totes [oon] Aaa) @ Al foursides wsesaneborderstule site wide Top: dates ihe Beton: Let Figure 2.9 : Options selected in Border tab for hi There are more options available if you select the other tabs in the window. But in our example, wwe require only the selected options for applying style to hl. Click on the General tab. This will show the CSS code which is generated as shown in figure 2.10, If you know HTML coding you can also edit the code. +4 [Cowal yen] eeceoronnd [order [oar |uaa anal] Style rule Selector: ht border-styie: dotted background im the upper left comer of the CSS Stylesheets dialog box. Choose "style rule" from the drop down menu. After adding the style rule for all the elements click OK button. Let us now use the CSS created for hl tag in a web page. In Format toolbarl, select the Headingl option to insert a heading in the page. When you select the Heading] option, your cursor will automatically be placed in the center of the web page (as we had applied center alignment in CSS). ‘Type some text. The text will appear in uppercase with font style "Times new roman". Figure 2.11 shows a web page that uses Heading] text with CSS applied to it. So, now wherever you insert Headingl in any of the web pages, the style will remain the same for all. Figure 2.11 : CSS applied to the text in web page Select the source tab at the bottom of the window to view the CSS stylesheet code. Figure 2.12 shows the CSS code in the head section of the page source code. Highlighted by Pragati Computers, M. 9904167671. Highlighted by Pragati Computers, M. 9904167671. Figure 2.12 : CSS code in the Source view Cascading Style Sheets and Java script 31Advantages of CSS From the above discussion we can say that CSS allows us to set the format of the website without changing the underlying structure. By separating the layout and format properties of the website from its underlying logical structure, we can make changes to the website without the fear of accidently changing the data. The web designer's job is made easier as to change the style of an element he only needs to make modifications in the CSS file. Since we have to set the style for each element only once, the CSS has less code compared to that in HTML. Thus the web pages will load faster. Using CSS makes website designing quick and efficient. Disadvantages of CSS ‘The CSS compatibility varies with different browsers. This means that some of the style sheet features are not supported by the browser and the style cannot be displayed as per the users design. But now-a-days, the latest browser versions are more standard-compliant and the compatibility issue has reduced. JavaScript HITML was originally used to control the appearance of web pages. The web pages designed using HTML, were static and could not be changed after the browser rendered them. However, with the growth of Intemet, people demanded the websites to have greater interactivity and better visual design. But, HTML could only provide static web pages. Thus, the demand of more interactivity created the need for a new web programming language. Hence, Netscape developed JavaScript. JavaScript is a Scripting language that allows you to add programming aspects to your web pages. A scripting language is a simple, lightweight programming language that does not contain the advanced programming functionalities of languages like C and Java. JavaScript is used in web pages to improve the design and validate the forms. It adds interactivity to HTML pages and is inserted directly into the HTML code. Today, mostly all the web browsers like Mozilla Firefox, Chrome, Safari and Internet Explorer support JavaScript. Using JavaScript, a web page no longer remains static, but can include coding that allows interactivity with the user, control the browser, and dynamically create HIML content. We learnt how to create forms using KompoZer. When the user enters data in the form, he might leave some of the important fields empty or may enter the data in a wrong format inside the field. In such cases there must be some type of validation provided. This validation will restrict users from making mistakes, When the user enters wrong data or leaves a field empty, an error message should be generated and the form should not be submitted. ‘The most common form of JavaScript application today is client side script which runs inside a web browser. It is used to validate the data entered in the HTML forms on the client side before sending it to the server. Using JavaScript, the form is generally checked for the following things: © Has the user Jeft any required field empty ? © Has the user entered a valid E-mail address ? Highlighted by Pragati Computers, M. 9904167671. Highlighted by Pragati Computers, M. 9904167671. 2 Computer Studies : 12Check whether contents of two fields are same or not ? © Has the user entered a valid date ? ‘Has the user entered text in the numeric data ficld ? Say for example; in the quantity ficld instead of numeric data, user entered text. Before starting to learn about how to validate a form, let us first learn how to write a JavaScript code. JavaScript code runs froma within the HIML web page. Thus, the JavaScript code can be put directly inside the web page code as a separate section. The JavaScript code is inserted into an HTML page, using the tag, The lines between the tag contains the JavaScript code. Remember, JavaScript is a case sensitive language. JavaScript can be placed inside the or section of an HTML page. But generally it is preferred that the code be placed in the tag. The Figure 2.31 : Validation JavaScript Cascading Style Sheets and Java seript Highlighted by Pragati Computers, M. 9904167671.As seen in the script, we have initialised four variables x, y, z and r. In the statement var x-document form| firstname. value. The term formal refers to the form name; term firstname refers to the element name (the name given to the input field "first name"). Thus, © variable x stores the value of first name © variable y stores the value of middle name © variable z stores the value of Jast name © variable r stores the value of address In the script, using the if condition, © variable x checks, if the first name is empty or not. © variable y checks, if the middle name is empty or not. variable z checks, if the last name is empty or not. © variable r checks, if the address is empty or not. ‘The radio buttons for gender field are grouped by the name "gender". Thus, gender is an array with two elements. The first element of the gender array is checked using the if condition with the ‘statement document form! .gender{0].checked and the second element of the array is checked using, the statement document form! gender{1].checked, If both of them are false then no option is selected by the user. Thus, alert message is displayed and the focus is placed on radio button. Similarly, the check boxes for the hobby field are grouped by the name "hobby". Thus, hobby is an array with tree elements. Just as we checked the gender using the if condition, we check the hobby and if all the three elements are false then no option is selected and the user is displayed the alert message to select a hobby and the focus is placed on the check box. For the city field, we check if the value is equal to -1 (Note: -1 is kept as the value for option “choose the city”), in which case no option is selected and the user is given an alert message. Figure 2.32 to 2.35 shows some of the alert messages displayed after the fields are left empty. Figure 2.32 : Alert message when middle name left empty 6 Computer Studies : 12"LZ9Z9LP066 ‘IN ‘S1a}NdWOD HeBesg Aq peyybYybipH fete case cade a oan Figure 2.34 : Alert message when hobby left empty £ a 5 3 i 5 ‘ : 2 5 setoaeonprofanp es "LZOZOLPO6G ‘IW ‘Sa}ndwoy HeBeig Aq payybrybipyFigure 2.35 shows the final form with all the fields filled as seen in the browser. ange elpefeetftenpen ca ag Registration Form First Name ‘aes Midele Names astNeme ee Gender Male Female Hopby Singing Dancing Reading cy labs Figure 2.35 : Final form Thus, we learnt how to use JavaScript for form validation and make the web pages more interactive. Summary In this chapter we learnt about Cascading Style Sheets and JavaScript. CSS allows you to specify styles for the visual elements of the website. It helps us to keep the information content of a document separate from the details of how to display it. We discussed about the advantages and disadvantages of CSS. JavaScript is a scripting language that allows us to add logical aspects to our web pages. A scripting language is a simple, lightweight programming language that does not contain the advanced programming functionalities. It is used in web pages to improve the design and validate forms. It adds interactivity to HTML pages and is inserted directly into the HTML code. The JavaScript code is inserted into an HTML page, using the © ... @ Cascading Style Sheets and Java script 9 Highlighted by Pragati Computers, M. 9904167671.(10) Which of the following symbol signifies the start and end of a JavaScript block 2 (@) semicolon (®) square bracket © curly bracket @) round bracket (11) Which of the following is a reusable block of code that performs a particular task 2? @ Amay () Code © Progam @ Funetion (12) Which of the following statement is used to retum a value in a function ? @ rum (b) fimction © select (@) send (13) Which of the following is generated by the browser due to interaction between the user and the web page ? @ Function —(b)_ Response © Event @ Value (14) Which of the following is not an event ? (@ Abort (©) Mouseover (6) Set @ Load (15) Which of the following is a container for storing data ? @ Variable () Integer (©) Event (@_ Event handler (16) Which of the following stands for BOM ? (@ Browser Of Model (©) Browser Object Model (©) Browser Object Modelling @ Browse Object Model (17) Which of the following is the top level object in the browser object model ? @ Window (&) Document (©) Page (@)_ Location (18) Which of the following stands for NaN ? @ Not a Numeric (©) Not a Number (© Not a Noun (@ Not an Numeric /ABORATORY EXERCISE 1, Create a CSS for H1 as per the given rules and apply it on the text. Highlighted by Pragati Computers, M. 9904167671. Highlighted by Pragati Computers, M. 9904167671. «Font: Times New Roman «Color: red 50 Computer Studies : 12© Case: Lowercase © Font style: Italic © Alignment: Centre © Text decoration: Underline © Background color : Light Grey © Border: Dotted Create a form with fields: name, email address, phone number and submit button. Give validation as given below : © Fields should not be empty. © Only mumbers are allowed in the phone field. © The Phone number should be 10 digits long. Give validation to the student's personal details form created in chapter 1. Give validation to the feedback form created in chapter 1. & ae Highlighted by Pragati Computers, M. 9904167671. Highlighted by Pragati Computers, M. 9904167671. Cascading Style Sheets and Java script st