Example of unordered lists:

slisTeas/li>
• Coca Colac/li>

slisteac/li>

Example of ordered lists:

Some text.Some text.

Some text.

Nate: The "border-width" property does not work if itis used alone. You must add the “border-style” property to set the borders first.
<1DOCTYPE himl> chtml> chead>

A solid red border

A solid green border

Note: The "border-color" property does not work if itis used alone, Use the "border-style" property to set the borders first.

1.9.3 Setting Border to individual sides: Now set the style of the

with below code so that each side of the border would look differently. pt border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid } 2z|Page

This is some text in a paragraph.

1.10 C55 Margin 28 [Page1.10.1 Applying Margin to individual sides: Create two

tag with some text and apply the below style and see how it differs with and without margins being set to the element. pt background-color: yellow; t pcx { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 50px;

This is a paragraph with no specified margins.

This is @ paragraph with specified margins.

1.11 CSS Padding 1.11.1 Simple C35 padding Create two

tags and set padding for one of them with the below style.

s="padding" >This is @ paragraph with specified paddings.
Change the padding values in the above style and see the difference in preview. 1.11.2 Setting padding with shorthand: Set the padding style in a single line with multiple values side by side seperated by a space.

This is a paragraph with specified paddings.

1.12 C55 Display 1.12.1 Hiding elements with visibility 31|PageCreate an element

and set the visiblity of the element to hidden with the below styleand This is a visible headings/h1> This is a hidden heading

Notice that the hidden heading still takes up space.

1.12.2 Hiding elements with display: none Now in the same HTML code, instead of visibility hidden, set Display to none and observe the difference. html> This is a visible headings/h1> This is 2 hidden heading

Natice that the hidden heading does not take upspace.

1.12.3 Display lists in line 32|PageTo display all the list items in a single line instead of line by line, set the display as inline.
Intml/defoult.asp” target ‘css/default. asp" targe'
_blank"sHIMLs/a> “ blank">cSS _blank">Javascripts/a> Now remove the inline style and observe the difference. 1.13 C35 Align 1.13.1 CSS Align using the margin property Create a
element with some text and set the style with belo: center { width: 70%; background-color: #b0eOe6; } 33 [Page attributes.
Whenever you feel lke criticizing anyone,’ he told me, ‘just remember that all the people in this world haven't had the advantages that you've had.'s/p>
Note: Using margin-auto will not work in IES, unless a IDOCTYPE is declared.
Now add the margin attribute and see the difference in preview. Add below twa lines in the style. margin-left: auto: margin-right: auto: 1.13.2 Align using Position absolute: Create a
element and the element by default aligns to top left corner of the HTML page. Now that we want to move this to the right top corner, apply the style below and verify the difference, To the style, add below lines. position: absolute; right: Opx;
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
34|Page
"Whenever you feel lke criticizing anyone,’ he told me, ‘just remember that all the people in this world haven't had the advantages that you've had.'s/p>
1.13.3 Aligning using the float property. In the above HTML code, use float:left, instead of position absolute and check the preview. cheml>
In my younger and more vulnerable years my father gave me some advice that I've been turning ‘over in my mind ever since.
'Whenever you feel like criticizing anyone," be told me, ‘just remember that all the people in this world haven't had the advantages that you've had.'
fit Change the float attribute to right and observe the difference in preview. 35|PagejQuery Practice Exercises For the below exercises, Create a new HTML file and copy paste(replace) the code in the same, for Each of the exercises use Google Chrome browser to see the results. Edit the HTML files in notepadt+. 2.1 jQuery intro Below exercise will give an over view of how to indude the jQuery library in the HTML document. So far in all the CSS exercises the jQuery library was not used but going forward we will be using the same for all HTML code that is written. To include the jQuery library take an example HTML basic structure and include the below To verify ifthe file is loaded to the HTML page or not, in Chrome Browser, right click and select inspect element, after loading the HTML page. Navigate to the Sources tab and see if below file is present. if you don't find the same then the jQuery library is not loaded. \ttp://ajax googleapis.com/ajax/libs/iquery/1.11.1/iquery.min js
This is aheadings/h2>
Click me2.2 jQuery Selectors 2.2.1 Element selector: Create @ HTML Button in the webpage and add a \ttp://a)ax googleapis.com/ajax/libs/iquery/1.11.1/jquery.min,
This is a headings/h2> “spoThis is a paragraph.
This is another paragraph.
Click mec/button> 37|Page2.2.2 Selecting an Element with id From the above exercise, assign an id attribute tothe
tag and replace the click function content with below code where “test” refers to the id of the element. S("Atest) hide(); Save the HTML page and reload the same in the browser. Click the button and test the result shead> http://ajax googleapis.com/ajax/libs/jquery/1.11.1/jquery.min js This isa heading
This is another paragraph.
Click mes/button> 2.2.3 Selecting an Element with a Class From the HTML code in previous exercise, add a class attribute to another
element and replace the click function with the below code where “test” refers to the class name, S(".testi") hide); Save the HTML page and reload the same in the browser. Cli the button and test the result, fest"> This is a heading
“test">This is a paragraph.
<
\ttp://ajax googleapis.com/ajax/libs/jquery/1.11.1/jquery.min js h2>This is a headingc/h2> This is a paragraph.
This is another paragraph.
Click mes/button> 39|Page2.2.5 Selecting the current element From the cade in previous HTML instead of “*”, use 'this’, The line of code should look as Slthis) hide); Save the page and reload and click on the button to see the result. shead> \ttp://ajax googleapis.com/ajax/libs/jquery/1.11.1/jquery.min js
This is a headings/h2>
This is a paragraph.
Click mes/button> fit 2.2.6 Select all
elements with a class From the HTML code in previous exercise, Add a class name say ‘intro’ to the
and
tags To select this particular element replace the Click function with the below line of code, $("p.intro").hidet); Save the page and reload and click on the button to see the result. intro” >This is a headings/h2> "intro" >This is a paragraph.
This is another paragraph.
2.2.7 Select first element found from the selector. Observe the way the first
element has been selected in the below code. Use the below cade, copy paste and save and reload the browser in order to test the result \ttp://a)ax googleapis.com/ajax/libs/iquery/1.11.1/iquery.min js <
This is a headings/h2> ‘spoThis is a paragraph.
Click mec/button> 2.2.8 Select frst element of UL Create a new un-ordered list with several list tems under it Paste the below code in the click function of the script tag S(*ul lefirst”) hide(); Save th bpage and reload the browser to test the results. M1 [Page ttp://2jax.googleapis.com/ajax/libs/jquery/1.11.1/iquery.min j List 1:
• Coffees/li>
• Milke/li> slisTeas/li> -
  slisTeac/li>
  Click mes/button> fit 2.2.9 Selecting element with an attribute: Replace the HTML code with the below code in the fle, Observe the line of code within the click function which will select the element with a Save the file and reload in the chrome browse and click the button to verify the results. pecific attribute.

  This is a heading

  ‘

  Google Search

  Yahoo
Click me 2.2.10 Selecting specific input tags Add an input tag with the type as text and replace the click function with the below line, which would select the input type as text” $(":text") hidet); Save the code in the Editor and reload to see the results. shtmb> \ttp://ajax.googleapis.com/ajax/libs/iquery/1.11.1/iquery.min.js">
This is a headings/h2>
Click me2.2.11 Selecting Even and odd rows ina table Create a table with few rows and add the below line of code in the click function, ${"treven").css("background-color’,"yellow"); Save the page and reload the same in bros er and verify the results, ehtml> \ttp://ajax googleapis.com/ajax/libs/jquery/1.11.1/jquery.min js Welcome to My Web Pages/h1>
Companye/th>
alfreds Futterkistec/td>	Germany
Berglunds snabbkope/td>	Swedene/td>
Centro comercial Moctezumas/td>	Mexicas/td>
Ernst Hand:	Austrias/td> cftd>	Island Tradinge/td>
4a|Page sft 2.3 jQuery Events 2.3.1 Click event As already seen in earlier exercise, the click event is used to capture the user click on the HTML page. All the Selectors work in the same way with the click event as well http://ajax googleapis.com/ajax/libs/iquery/1.11.1/iquery.min js">
2.3.2 Double click event Instead of click in the earlier exercise, use the dblclick to capture the double click, ‘Save the code and reload the page in the browser and test the result. Only on the double click, the
tag gets hidden.
2.3.3 Mouse enter event Observe the way below mouse enter event has been configured, Copy the below HTML code and replace in the file. Save the same and reload and observe the only when the mouse enters the \ttp://ajax googleapis.com/ajax/libs/jquery/1.11.1/jquery.min js Enter this paragraph.
46 |Page2.3.4 Mouse leave event From the earlier exercise, instead of mouseenter, use mouseleave and save the HTML page and reload in the browse, Now when you enter the element, noting happens but when you leave the element, the alert comes up. ehtml> \ttp://a)ax googleapis.com/ajax/libs/jquery/1.11.1/jquery.min js
This is a paragraph.
2.3.5 Mouse down event Create a new
tag with and a button an id and configure the mouse down event as shown in the below cade. Save the page and reload the browser. Test the changes. \ttp://a)ax googleapis.com/ajax/libs/iquery/1.11.1/jquery.min 4a7|PageThisis a paragraph.
2.3.6 Mouse up event In the HTML code from the earlier exercise, replace the mousedown event with mouseup. Save the HTML and reload the browser and Click on the button, Observe that the alert comes after the click has been released. ttps//ajax-googleapis.com/ajax/libs/jquery/1.11.1/jquery.min js'> This is a paragraph.
element and observe the popup coming out.
This is a paragraph.
shead> \ttp://ajax googleapis.com/ajax/libs/jquery/1.11.1/jquery.min js Name:
Email: 2.4 jquery hide and show 2.4.1 Basic Show and Hide. Use the below code to create two buttons and add the click event on ane of them to show the
element and the other to hide the element. Save the HTML and observe the way the show and hide happens in the DOM. shtmb> Hide
This is another small paragraph.
2.4.3 Toggle event The hide and show can be both combined and put ina toggle event where the action happens alternatively. Create @ new button, add a click event to the sameand upon click, use toggle to fulfil the hide and sho: action. The script would looks somewhat like below Copy the below code and place in the htm file, save the sare and test the changes by reloading the browser. ttp://ajax.googleapis.com/ajaxy/libs/jquery/1.11.1/jquery.min js Togele
s1|Page2.5 jQuery Get 2.5.1 Getting htm! and text content Observe the below HTML code and check how the text and html methods are written. Copy the below code to HTML page, save the same andreload in the browser. Test the code by clicking Upon the buttons, 2.5.2 Getting value Observe the below HTML code and check haw the val method is written Copy the below code to HTML page, save the same andreload in the browser. Test the code by clicking upon the buttons.
Name: "Mickey Mouse">
2.5.3 Setting text, html and value Now in the below example observe how each of the HTML/text/value of the elements are being set. Copy the below code and save the page and reload the browser to see the changes. test1">This is a paragraph.
This is another paragraph.
Input field: >Set HTM L et Value 53|Page2.6 jQuery Set 2.6.1 Setting attributes: shtml ttp://ajax.googleapis.com/ajax/libs/iquery/1.11.1/iquery.min.js"> Google.com
Change href Value
2.6.2 Setting multiple attributes Observe the below code and see how we can set multiple attributes at the same time, using a single attr. ttp://Avww google.com” id="goo">goagle.com
Change href and title
Mouse aver the link to see that the href attribute has changed and a title attribute is set.
2.6.3 Set attribute using call back function Call back function’s get the old and new values tothe event when called upon, In the Click function add the below code to get the previous value and do some manipulations if required ${"button"}.clicklfunction(} St'Hgoo"| attr( "href", function(i,origValue} return origValue + "/images"; Ne ) ) chtmi> https//ajax-googleapis.com/ajax/libs/jquery/1.11.1/jquery.min js'> origValue}{
google.comé/a>
55|Page2.7 jQuery Add 2.7. Append an element, Below example code depicts how to add a line item/text to an existing elements. Within the click function add the below line of code to make an append to existing element, 5{"p").append{" Newly Appended text."); ‘This isa paragraph.
This is another paragraph.
List item List iter 2 List item 3
Append list items ‘We can also add a different HTML element instead of
1. . Place the below line for the btn2 click function, save the HTML and reload and click the button to see the results. ${°Ol").append{" ttp://ajax.googleapis.com/ajax/libs/iquery/1.11.1/iquery.min.js">

   This is another paragraph.

   List item List item 2 List item 3¢/li> Prepend text Prepend list item s7|Page2.7.3 after and before Using after and before, we shall see how to make insert content after and before the elements, shtmb> -cimg src="images/images jpg" alt="Picture" width 100" height="140"> 2.8 jQuery Remove 2.8.1 remove element Using removel) we shall see how to remove a particular element from the DOM, Create a new button in the body of the HTML and Write a click function on the same. Within the Click function, Select an element that has to be removed and bind the remove event, Slelement}.removel); neight:100px;width:300px;border-1px solid black;background-color:yellow;"> ‘This is some text in the div.

Remove div element 2.8.2 empty an element Instead of removing the element campletely from the DOM, we can empty its content which will put the empty element in the DOM. In the same code from the above exercise, instead of removel} use empty(} in the click function which will be removing the content and makes the div empty. S("#divt"}emptyl) \ttp://ajax.googleapis.com/ajax/libs/iquery/1.11.1/iquery.min.js">
‘This is some text in the div.
59|Page

Empty the div element ttps//ajax-googleapis.com/ajax/libs/jquery/1.11.1/jquery.min js'>

eight: 100px;width:300px;padding: 10pxsmargin:3pxsborder:1px solid blue;background-color-lightblue;">

Display dimensions of dive/button> <
height{)- returns the height of an element.
Now remove the width and height attributes from thestyle of the DIV tag and save the HTML and reload to test, Observe that the DIV comes with its own dimension in the page now. Click the button to get the height and width now 61|Page2.9.2 inner width and inner height Paste the below code in the html editor and inspect the element to observe the inner width and height. Once the HTML page is loaded, right click on the box and click on inspect element. In the below pane that opens up, check if you are in the elements tab. On your right, scroll down and after the styles, you should observe a box which depicts the exact dimensions and padding with margins as well ttp://ajax.googleapis.com/ajax/libs/iquery/1.11.1/iquery.min.js">

"height: 100px;width:300px;padding: 1Opxsmargin:3px;border:1px solid “fd
Display dimensions of dive/button>
2.9.3 Outer width and height Copy the below html code and reload and repeat the same exercise as above to observe the changes to the dimensions of the div now. html> 62|Page \ttp://a)ax googleapis.com/ajax/libs/iquery/1.11.1/iquery.min js ivi" style="height: 100px;width:300px;padding:10px;margin:3pxborder: 1px solid .ckground-color:lightblue;">
Display dimensions of div
Now we shall see how exactly to set the width and height of the div, Dimensions of the div can be set using the below line of code. Use the same in click function. ${"¥#div1").width{500}.height(500); 63 [Pageeight: 100px;width:300px;padding: 10pxsmargin:3pxsborder:1px solid blue;background-color:lightblue;">