CSS & Jquery Practice Exercises1

CSS & JQUERY
Practice Exercises
CSS Practice Exercises
1.1 CSS Syntax

Open HTML-Kit Tools(Shortcut on Desktop). Select File > New Document. Paste the below code.
Observe the syntax for the CSS mentioned for the P tag
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
</body>
</html>
Once the code is pasted, Click on Preview button in the Left bottom corner and see if the color of the
<p> tag
Click on the Edit button and now change the color to blue and preview the same.
Replace the <p> tag with a <div> tag and save the page and reload the same and there should be no
difference much.
1.2 Commenting a line of code:
For the above pasted code, add comments as shown below and verify the difference in the preview.
<!DOCTYPE html>
<html>
<head>
<style>
p{
/* color: red; This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
</style>
</head>
1|Page
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>
</body>
</html>
1.3 CSS Selectors
1.3.1 Selecting an Element with tag name
Copy paste the above code in the HTML Kit Tools Editor and check the preview.
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<div>And I'm not affected by the styling..!</div>
</body>
</html>
Add another <p> tag with a random text,after the <div> tag and verify if the styling is applied on the
same.
1.3.2 Selecting an Element with id:
In the Editor, add an id(id = "#para1") to the first <p> and add the below #para1 style.
The code should look similar to below. Verify in the preview. The Styling should be applied to the first
paragraph only.
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
2|Page
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
1.3.3 Selecting an element with class name:
Check the way the class has been defined in the below code.
Copy and paste the below HTML in the editor and observe the styling pattern.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
Add a new <div> element with random text below the <p> tag.
name the class of the same as "left".
Create a new Class in the Style tag with name as left and add the text-align attribute as left and color as
blue.
Preview the HTML now and see the difference.
1.3.4 Selecting a specific element with class name:
Now that we were selecting the Elements with a class name, lets select specific elements with the class
name.
3|Page
In the code above in earlier ecercise, beside the class name, add the tag name as well(suppose p ). Your
code should look similar to as below and observe the Styling affects only the <p> tag and not the <h1>
tag though both the elements have same Class name.
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>

<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>
Now replace the 'p' added beside the class tag with 'h1' and observe the difference in the preview.
1.3.5 Grouping similar style to several tags/classes
Now that we have observed selectiing an element with a tag name and class name, we shall see how to
group several elements together.
Observe the below code and see how the grouping has been made Copy and paste the below code in
editor and view the preview.
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
4|Page
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
Now add the class name to each of the elements and then suffix the class names to the respective
elements in the style tags.
Eg: <h1 class="class1">Hello World!</h1>
and in style tag as below

h1.class1, h2.class2, p {
text-align: center;
color: red;
}
Verify in the preview if the respective elements are being styled accordingly.
1.4 CSS Backgrounds
1.4.1 Simple background
Lets see how we can make a simple background to an element in HTML
In the below example we shall see how to put background color to the body of the HTML.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #b0c4de;
}
</style>
</head>
<body>
<h1>My CSS web page!</h1>

<p>Hello world! This is an example of body with background color.</p>
</body>
</html>
1.4.2 Background to specific elements:
5|Page
Now Lets individually give a background color to different elements.
Copy paste the below code and observe the way different elements are being styled individually with
different background.
Check the preview and observe the difference.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: #6495ed;
}
p{
background-color: #e0ffff;
}
div {
background-color: #b0c4de;
}
</style>
</head>
<body>
<h1>CSS background-color example!</h1>

<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>
</body>
</html>
Add the below style and check the preview.
body {
background-color: red;
}
1.4.3 background with image
Create a new folder in the desktop. Copy paste the below code in HTML Kit Tools and save the
document in the folder that was created.
<!DOCTYPE html>
6|Page
<html>
<head>
<style>
body {
background-image: url("paper.gif");
}
</style>
</head>
<body>
</body>
</html>
Copy the file images.jpg from the labs/images folder, to the newly created folder where the HTML has
been saved and refer the name of the picture in the style.
Check the preview and the image should be loaded as background with repeated several times
horizontally and vertically.
1.4.4 Repeat image horizontally
Add the line "background-repeat: repeat-x;" in the style and check the preview. Now the image should
be repeated only horizontally.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
</body>
</html>
Change the repeat-x to repeat-y and check the preview. now the background should be repeated
vertically only.
7|Page
1.4.5 No repeat image
So now we know how to stop the image getting repeated horizontally/vertically/both. To have the
repeat stopped both horizontally & vertically, set the background-repeat to "no-repeat"
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<p>W3Schools background image example.</p>
<p>The background image is only showing once, but it is disturbing the reader!</p>
</body>
</html>
1.4.6 Positioning background image
Observe the below style which will say how to position the imge in the body of the HTML page.
Copy the below HTML code and paste in the HTML Editor and observe the positioning of the background
image now.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
}
</style>
</head>
<body>
8|Page
<p>W3Schools background no-repeat, set position example.</p>
<p>Now the background image is only shown once, and positioned away from the text.</p>
<p>In this example we have also added a margin on the right side, so the background image will never
disturb the text.</p>
</body>
</html>
Now change the position from "right top" to "left top" and preview the HTML
1.5 CSS Text
1.5.1 CSS Text color:
We shall see how to make the color of the text in this exercise.
Observe the color pattern in the below code and see how various colors are put to various texts in
respective elemnts. Copy the below code in HTML editor and preview the same.
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: red;
}
h1 {
color: #00ff00;
}
p.ex {
color: rgb(0,0,255);
}
</style>
</head>
<body>
<h1>This is heading 1</h1>

<p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined
in the body selector.</p>
<p class="ex">This is a paragraph with class="ex". This text is blue.</p>
</body>
</html>
9|Page
1.5.2 Text alignment
Observe the below code and see how the text alignment has been made for various parts of the text.
Use the below code in the HTML Editor and see how the text gets aligned.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
}
p.date {
text-align: right;
}
p.main {
text-align: justify;
}
</style>
</head>
<body>
<h1>CSS text-align Example</h1>

<p class="date">May, 2009</p>
<p class="main">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,' he told me,
'just remember that all the people in this world haven't had the advantages that you've had.'</p>
<p><b>Note:</b> Resize the browser window to see how the value "justify" works.</p>
</body>
</html>
Change the Alignments in the above code and see the preview.
1.5.3 Text decoration
Now we shall see various text decoration patterns.
Add the below styling to the code in HTML Editor and check the difference.
<!DOCTYPE html>
<html>
<head>
<style>
10 | P a g e
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
</style>
</head>
<body>

</body>
</html>
1.5.4 Text transformation
Using the below style code try and set the text transformations.
<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
</style>
</head>
<body>
<p class="uppercase">This is some text.</p>
11 | P a g e
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>
1.5.5 Text indentation
The text identation can be done using the below code.
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-indent: 100px;
}
</style>
</head>
<body>
<p>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,' he told me, 'just remember that
all the people in this world haven't had the advantages that you've had.'</p>
</body>
</html>
Change the text indent to 150px and see the preview. Observe the difference now.
1.5.6 CSS Fonts
In the below excercise we shall see how to set various fonts to the text.
Observe the style difference for various elements. Try and set the font family and check the preview.
<!DOCTYPE html>
<html>
<head>
<style>
p.serif {
font-family: "Times New Roman", Times, serif;
}
12 | P a g e
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>
</body>
</html>
1.5.7 Selecting the font style:
The font style can be set to italic/normal using the below attributes.
Observe the different font styles in the paragraphs.
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<p class="normal">This is a paragraph in normal style.</p>

<p class="italic">This is a paragraph in italic style.</p>
<p class="oblique">This is a paragraph in oblique style.</p>
</body>
</html>
1.5.8 setting the font size
13 | P a g e
Font size can be set using the Font-size attribute. Use the below code and try setting the font size by
increasing the px or in the decimals of em.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p{
font-size: 14px;
}
</style>
</head>
<body>

<p>This is another paragraph.</p>
</body>
</html>
1.5.9 Setting with em:
The below format shows how to set the font size Using em(unit of measure of font size)
Increase the font size in the decimal values and observe the difference.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
14 | P a g e
font-size: 1.875em; /* 30px/16=1.875em */
}
p{
font-size: 0.875em; /* 14px/16=0.875em */
}
</style>
</head>
<body>

<p>Specifying the font-size in em allows all major browsers to resize the text.
Unfortunately, there is still a problem with older versions of IE. When resizing the text, it becomes
larger/smaller than it should.</p>
</body>
</html>
1.6 CSS Links
1.6.1 Working with coloring of links upon visiting , visited and hover.
Copy the below code to the HTML Editor and check for the styles on the link.
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */

a:hover {
color: #FF00FF;
}
/* selected link */
15 | P a g e
a:active {
color: #0000FF;
}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be
effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>
</body>
</html>
1.7 CSS Lists
1.7.1 Styling lists with different bullets.
Below styling would set different styles to different ordered lists.

Observe the way each of the list style types are being put up.
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
16 | P a g e
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>

<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
1.7.2 Un ordered lists
In an un ordered list, the below styling would display the list item with an image as bullet..
Save the html document in the labs folder and check the preview.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-image: url('images/sqpurple.gif');
}
</style>
</head>
<body>
17 | P a g e
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
1.8 CSS Tables
1.8.1 Setting Table borders:
Create an HTML table with below HTML and set the below styling
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
Set the styling as shown below.
table, th, td {
border: 1px solid black;
}
Verify the HTML code as below and see of the table borders are coming up.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
18 | P a g e
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
Increase the border width in the style to 2px or 3px and verify the difference in the preview.
1.8.2 Different borders for cells
Now let us apply different borders to the cells and look at how it would be
Below styling would apply different borders to the table and table headers and the table cells.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
table, th {
border: 2px solid blue;
}
td {
}
</style>
19 | P a g e
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<p><b>Note:</b> If a !DOCTYPE is not specified, the border-collapse property can produce unexpected
results
in IE8 and earlier versions.</p>
</body>
</html>
1.8.3 Setting table width and height:
Below example would show to set the table width and height.
Create a table with random content and apply the below styling and see how the width and height
attributes differs with the size of table upon setting them.
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
}
table {
width: 70%;
}
th {
height: 50px;
20 | P a g e
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
1.8.4 Text alignment in table
Now lets align the text within the cells and see how it looks.
For the same HTML code add the text-align attribute to the td and see how it looks in the preview.
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
21 | P a g e
}
td {
text-align: right;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Now change the text alignment in the above style to left and preview to see the results.
1.8.5 Vertical alignment of text in a table cell:
Now that we haev done the horizontal alignment, lets have a look at how to vertically align the text.
22 | P a g e
Set the width of the cell to a value and then set the vertical align attribute. Refer to the style below.
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
}
td {
height: 50px;
vertical-align: bottom;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
23 | P a g e
</html>
1.8.6 Padding in a table cell
Below is an example of how we set the padding to the cells and create the styling.
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
}
td {
padding: 15px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
24 | P a g e
</tr>
</table>
</body>
</html>
Change the padding value, increase or decrease and preview to see the results.
1.8.7 Setting Background color in table:
In the earlier exercises we have seen how to set the background color of an element. Now apply the
same to the table and see how it would looks.
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid green;
}
th {
background-color: green;
color: white;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
25 | P a g e
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
1.9 CSS Border
1.9.1 Sample borders with CSS:
Create a <p> element and then apply the styling as shown in the below example. Set the border style to
solid and then the border widht attribute.
Observe in the preview how the border width will be appearing in the HTML page.
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-width: medium;
}
p.three {
border-width: 1px;
}
</style>
</head>
<body>
<p class="one">Some text.</p>
26 | P a g e
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p><b>Note:</b> The "border-width" property does not work if it is used alone. You must add the
"border-style" property to set the borders first.</p>
</body>
</html>
1.9.2 Setting Border color with CSS:
In the same code as above, add the border-color attribute so that the border color is set.
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-color: red;
}
p.two {
border-color: #98bf21;
}
</style>
</head>
<body>
<p class="one">A solid red border</p>

<p class="two">A solid green border</p>
<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style"
property to set the borders first.</p>
</body>
</html>
1.9.3 Setting Border to individual sides:
Now set the style of the <p> with below code so that each side of the border would look differently.
p{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
27 | P a g e
<!DOCTYPE html>
<html>
<head>
<style>
p{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
</style>
</head>
<body>
<p>2 different border styles.</p>
</body>
</html>
1.9.4 Border shorthand
All the various border attributes can be given in a single line as shown below. Add this line in the style
and check the preview.
border: 5px solid red;
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 5px solid red;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
</body>
</html>
1.10 CSS Margin
28 | P a g e
1.10.1 Applying Margin to individual sides:
Create two <p> tag with some text and apply the below style and see how it differs with and without
margins being set to the element.
p{
background-color: yellow;
}
p.ex {
margin-top: 100px;
margin-bottom: 100px;
margin-left: 50px;
}
<!DOCTYPE html>
<html>
<head>
<style>
p{
}
p.ex {
margin-top: 100px;
margin-bottom: 100px;
margin-left: 50px;
}
</style>
</head>
<body>
<p>This is a paragraph with no specified margins.</p>

<p class="ex">This is a paragraph with specified margins.</p>
</body>
</html>
Now to set the position of the element in the center of the page, add the auto to the left and right
margins as below and preview.
replace the p.ex style with
p.ex {
width:300px;
29 | P a g e
margin-right: auto;
margin-left: auto;
}
1.10.2 Margin shorthand
In short margin can be set with the below format
<!DOCTYPE html>
<html>
<head>
<style>
p{
}
p.ex {
margin: 100px 50px;
}
</style>
</head>
<body>
<p>This is a paragraph with no specified margins.</p>

<p class="ex">This is a paragraph with specified margins.</p>
</body>
</html>
1.11 CSS Padding
1.11.1 Simple CSS padding
Create two <p> tags and set padding for one of them with the below style.
<!DOCTYPE html>
<html>
<head>
<style>
p{
}
p.padding {
padding-top: 25px;
30 | P a g e
padding-right: 50px;
padding-bottom: 25px;
padding-left: 50px;
}
</style>
</head>
<body>
<p>This is a paragraph with no specified padding.</p>

<p class="padding">This is a paragraph with specified paddings.</p>
</body>
</html>
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.
<!DOCTYPE html>
<html>
<head>
<style>
p{
}
p.padding {
padding: 25px 50px;
}
</style>
</head>
<body>
<p>This is a paragraph with no specified padding.</p>

<p class="padding">This is a paragraph with specified paddings.</p>
</body>
</html>
1.12 CSS Display
1.12.1 Hiding elements with visibility:
31 | P a g e
Create an element <div> or <p> and set the visibility of the element to hidden with the below style and
check in the preview.
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<h1>This is a visible heading</h1>

<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the hidden heading still takes up space.</p>
</body>
</html>
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.
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
display: none;
}
</style>
</head>
<body>
<h1>This is a visible heading</h1>

<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the hidden heading does not take up space.</p>
</body>
</html>
1.12.3 Display lists in line
32 | P a g e
To display all the list items in a single line instead of line by line, set the display as inline.
<!DOCTYPE html>
<html>
<head>
<style>
li {
display: inline;
}
</style>
</head>
<body>
<p>Display a list of links as a horizontal menu:</p>

<ul>
<li><a href="/html/default.asp" target="_blank">HTML</a></li>
<li><a href="/css/default.asp" target="_blank">CSS</a></li>
<li><a href="/js/default.asp" target="_blank">JavaScript</a></li>
</ul>
</body>
</html>
Now remove the inline style and observe the difference.
1.13 CSS Align
1.13.1 CSS Align using the margin property
Create a <div> element with some text and set the style with below attributes.
.center {
width: 70%;
background-color: #b0e0e6;
}
<!DOCTYPE html>
<html>
<head>
<style>
.center {
width: 70%;
}
</style>
</head>
<body>
33 | P a g e
<div class="center">
over in my mind ever since.</p>
<p>'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this
world haven't had the advantages that you've had.'</p>
</div>
<p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>
</body>
</html>
Now add the margin attribute and see the difference in preview.
Add below two lines in the style.
margin-left: auto;
margin-right: auto;
1.13.2 Align using Position absolute:
Create a <div> 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: 0px;
<!DOCTYPE html>
<html>
<head>
<style>
.right {
position: absolute;
right: 0px;
width: 300px;
}
</style>
</head>
<body>
<div class="right">
34 | P a g e
</div>
</body>
</html>
1.13.3 Aligning using the float property.
In the above HTML code, use float:left, instead of position absolute and check the preview.
<!DOCTYPE html>
<html>
<head>
<style>
.right {
float: left;
width: 300px;
}
</style>
</head>
<body>
<div class="right">
</div>
</body>
</html>
Change the float attribute to right and observe the difference in preview.
35 | P a g e
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 notepad++.
2.1 jQuery intro
Below exercise will give an over view of how to include 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 <script> tag in
the <head> tag.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
To verify if the 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.
<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<button>Click me</button>
</body>
</html>
36 | P a g e
2.2 jQuery Selectors
2.2.1 Element selector:
Create a HTML Button in the webpage and add a <script> tag in the Head section to bind the click event
action.
Use the below code to bind the click to the button.
$("p").hide();
});
});
Observe that here we are selecting the elements “p” & “button” using the element selectors.
<!DOCTYPE html>
<html>
<head>
<script>
$("p").hide();
});
});
</script>
</head>
<body>
</body>
</html>
37 | P a g e
2.2.2 Selecting an Element with id
From the above exercise, assign an id attribute to the <p> tag and replace the click function content with
below code where “test” refers to the id of the element.
$("#test").hide();
Save the HTML page and reload the same in the browser. Click the button and test the result.
<!DOCTYPE html>
<html>
<head>
<script>
$("#test").hide();
});
});
</script>
</head>
<body>
<p id="test">This is another paragraph.</p>
</body>
</html>
2.2.3 Selecting an Element with a Class.
From the HTML code in previous exercise, add a class attribute to another <p> element and replace the
click function with the below code where “test1” refers to the class name.
$(".test1").hide();
<!DOCTYPE html>
<html>
<head>
<script>
$(".test").hide();
});
38 | P a g e
});
</script>
</head>
<body>
<h2 class="test">This is a heading</h2>

<p class="test">This is a paragraph.</p>
</body>
</html>
2.2.4 Select all Elements:
From the previous code, replace the content of the click function with the below line of code, which
would select all the elements that are present in the HTML page.
$("*").hide();
Note that this will hide the button as well.

<!DOCTYPE html>
<html>
<head>
<script>
$("*").hide();
});
});
</script>
</head>
<body>
</body>
</html>
39 | P a g e
2.2.5 Selecting the current element
From the code in previous HTML instead of “*” , use ‘this’. The line of code should look as
$(this).hide();
Save the page and reload and click on the button to see the result.
<!DOCTYPE html>
<html>
<head>
<script>
$(this).hide();
});
});
</script>
</head>
<body>
</body>
</html>
2.2.6 Select all <p> elements with a class
From the HTML code in previous exercise, Add a class name say ‘intro’ to the <p> and <h1> tags
To select this particular element replace the Click function with the below line of code.
$("p.intro").hide();
Save the page and reload and click on the button to see the result.
<!DOCTYPE html>
<html>
<head>
<script>
$("p.intro").hide();
});
});
40 | P a g e
</script>
</head>
<body>
<h2 class="intro">This is a heading</h2>

<p class="intro">This is a paragraph.</p>
</body>
</html>
2.2.7 Select first element found from the selector.
Observe the way the first <p> element has been selected in the below code.
Use the below code, copy paste and save and reload the browser in order to test the result.
<!DOCTYPE html>
<html>
<head>
<script>
$("p:first").hide();
});
});
</script>
</head>
<body>
</body>
</html>
2.2.8 Select first element of UL
Create a new un-ordered list with several list items under it.
Paste the below code in the click function of the script tag
$("ul li:first").hide();
Save the webpage and reload the browser to test the results.
41 | P a g e
<!DOCTYPE html>
<html>
<head>
<script>
$("ul li:first").hide();
});
});
</script>
</head>
<body>
<p>List 1:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
<p>List 2:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
</body>
</html>
2.2.9 Selecting element with an attribute:
Replace the HTML code with the below code in the file.
Observe the line of code within the click function which will select the element with a specific attribute.
Save the file and reload in the chrome browse and click the button to verify the results.
<!DOCTYPE html>
<html>
<head>
<script>
$("a[target='_blank']").hide();
42 | P a g e
});
});
</script>
</head>
<body>
<p><a href="http://www.google.com" target="_blank">Google Search</a></p>
<p><a href="http://www.yahoo.co.in">Yahoo</a></p>
</body>
</html>
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").hide();
Save the code in the Editor and reload to see the results.
<!DOCTYPE html>
<html>
<head>
<script>
$(":text").hide();
});
});
</script>
</head>
<body>
<input type="text"></input>
</body>
</html>
43 | P a g e
2.2.11 Selecting Even and odd rows in a table
Create a table with few rows and add the below line of code in the click function.
$("tr:even").css("background-color","yellow");
Save the page and reload the same in browser and verify the results.
<!DOCTYPE html>
<html>
<head>
<script>
$("tr:even").css("background-color","yellow");
});
</script>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<table border="1">
<tr>
<th>Company</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
</table>
44 | P a g e
</body>
</html>
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.
<!DOCTYPE html>
<html>
<head>
<script>
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>

<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
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 <p>
tag gets hidden.
<!DOCTYPE html>
<html>
<head>
<script>
45 | P a g e
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you double-click on me, I will disappear.</p>

<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
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 <p>, the alert comes immediately.
<!DOCTYPE html>
<html>
<head>
<script>
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
});
</script>
</head>
<body>
<p id="p1">Enter this paragraph.</p>
</body>
</html>
46 | P a g e
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.
<!DOCTYPE html>
<html>
<head>
<script>
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
2.3.5 Mouse down event
Create a new <p> tag with and a button an id and configure the mouse down event as shown in the
below code.
Save the page and reload the browser. Test the changes.
<!DOCTYPE html>
<html>
<head>
<script>
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
});
</script>
</head>
<body>
47 | P a g e
</body>
</html>
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.
<!DOCTYPE html>
<html>
<head>
<script>
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
});
</script>
</head>
<body>
</body>
</html>
2.3.7 hover event
From the earlier exercise, replace the mouseup with hover in the script and save the HTML and reload
the page. Move the mouse over the <p> element and observe the popup coming out.
<!DOCTYPE html>
<html>
<head>
<script>
$("#p1").hover(function(){
alert("You entered p1!");
},
48 | P a g e
function(){
alert("Bye! You now leave p1!");
});
});
</script>
</head>
<body>
</body>
</html>
2.3.8 Focus event
Create two input elements and use the below code to capture the focus event.
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
});
Save the page and reload the same in the browser.

Observe that the color of the input changes when the cursor is placed in it and when removed, it
changes back to as it was before.
<!DOCTYPE html>
<html>
<head>
<script>
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>

Email: <input type="text" name="email">
</body>
</html>
49 | P a g e
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 one of them to show the <p>
element and the other to hide the element.
Save the HTML and observe the way the show and hide happens in the DOM.
<!DOCTYPE html>
<html>
<head>
<script>
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>

<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
2.4.2 Hide with delay
In the HTML code from earlier exercise, add a numeric value in the braces of hide, save the page and
reload in browser. Click on the button to hide and observe the difference.
<!DOCTYPE html>
<html>
<head>
<script>
$("p").hide(1000);
});
50 | P a g e
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
2.4.3 Toggle event
The hide and show can be both combined and put in a toggle event where the action happens
alternatively.
Create a new button, add a click event to the same and upon click, use toggle to fulfil the hide and show
action. The script would looks somewhat like below.
Copy the below code and place in the html file, save the same and test the changes by reloading the
browser.
<!DOCTYPE html>
<html>
<head>
<script>
$("p").toggle();
});
});
</script>
</head>
<body>
<button>Toggle</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
51 | P a g e
2.5 jQuery Get
2.5.1 Getting html 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 and reload in the browser. Test the code by clicking
upon the buttons.
<!DOCTYPE html>
<html>
<head>
<script>
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
alert("HTML: " + $("#test").html());
});
});
</script>
</head>
<body>
<p id="test">This is some <b>bold</b> text in a paragraph.</p>
<button id="btn1">Show Text</button>
<button id="btn2">Show HTML</button>
</body>
</html>
2.5.2 Getting value
Observe the below HTML code and check how the val method is written.
Copy the below code to HTML page, save the same and reload in the browser. Test the code by clicking
upon the buttons.
<!DOCTYPE html>
<html>
<head>
<script>
alert("Value: " + $("#test").val());
});
});
52 | P a g e
</script>
</head>
<body>
<p>Name: <input type="text" id="test" value="Mickey Mouse"></p>
<button>Show Value</button>
</body>
</html>
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.
<!DOCTYPE html>
<html>
<head>
<script>
$("#test1").text("Hello world!");
});
$("#test2").html("<b>Hello world!</b>");
});
$("#test3").val("Dolly Duck");
});
});
</script>
</head>
<body>
<p id="test1">This is a paragraph.</p>
<p id="test2">This is another paragraph.</p>
<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn1">Set Text</button>
<button id="btn2">Set HTML</button>
<button id="btn3">Set Value</button>
</body>
</html>
53 | P a g e
2.6 jQuery Set
2.6.1 Setting attributes:
<!DOCTYPE html>
<html>
<head>
<script>
$("#goo").attr("href","http://www.maps.google.com");
});
});
</script>
</head>
<body>
<p><a href="http://www.google.com" id="goo">Google.com</a></p>
<button>Change href Value</button>
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
</body>
</html>
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.
<!DOCTYPE html>
<html>
<head>
<script>
$("#goo").attr({
"href" : "http://www.maps.google.com.com/jquery",
"title" : "Welcome to Google Maps"
});
});
});
</script>
</head>
<body>
<p><a href="http://www.google.com" id="goo">google.com</a></p>
54 | P a g e
<button>Change href and title</button>
<p>Mouse over the link to see that the href attribute has changed and a title attribute is set.</p>
</body>
</html>
2.6.3 Set attribute using call back function
Call back function’s get the old and new values to the event when called upon.
In the Click function add the below code to get the previous value and do some manipulations if
required.
$("#goo").attr("href", function(i,origValue){
return origValue + "/images";
});
});
<!DOCTYPE html>
<html>
<head>
<script>
$("#goo").attr("href", function(i,origValue){
return origValue + "/images";
});
});
});
</script>
</head>
<body>
<p><a href="http://www.google.com" id="goo">google.com</a></p>
<button>Change href Value</button>
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
</body>
</html>
55 | P a g e
2.7 jQuery Add
2.7.1 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.
$("p").append(" <b>Newly Appended text</b>.");
<!DOCTYPE html>
<html>
<head>
<script>
$("p").append(" <b> Newly Appended text</b>.");
});
$("ol").append("<li> Newly Appended item</li>");
});
});
</script>
</head>
<body>
<ol>
<li>List item 1</li>
</ol>
<button id="btn1">Append text</button>
<button id="btn2">Append list items</button>
</body>
</html>
We can also add a different HTML element instead of <li>.

Place the below line for the btn2 click function, save the HTML and reload and click the button to see
the results.
$("Ol").append("<img src='IMAGES/images.jpg'/>");
56 | P a g e
2.7.2 Prepend
Now we shall see how to prepend a line item or text.
In the above exercise code, instead of append, use prepend.

Replace the word append with prepend and save the html and reload the browser to see the results.
Now the text should be prepended.
<!DOCTYPE html>
<html>
<head>
<script>
$("p").prepend("<b>Prepended text</b>. ");
});
$("ol").prepend("<li>Prepended item</li>");
});
});
</script>
</head>
<body>
<ol>
</ol>
<button id="btn1">Prepend text</button>

<button id="btn2">Prepend list item</button>
</body>
</html>
57 | P a g e
2.7.3 after and before
Using after and before, we shall see how to make insert content after and before the elements.
<!DOCTYPE html>
<html>
<head>
<script>
$("img").before("<b>Before</b>");
});
$("img").after("<i>After</i>");
});
});
</script>
</head>
<body>
<img src="images/images.jpg" alt="Picture" width="100" height="140">
<br><br>
<button id="btn1">Insert before</button>
<button id="btn2">Insert after</button>
</body>
</html>
2.8 jQuery Remove
2.8.1 remove element
Using remove() 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.
$(element).remove();
<!DOCTYPE html>
<html>
<head>
<script>
$("#div1").remove();
58 | P a g e
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.

<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>
<br>
<button>Remove div element</button>
</body>
</html>
2.8.2 empty an element
Instead of removing the element completely 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 remove() use empty() in the click function which
will be removing the content and makes the div empty.
$("#div1").empty();
<!DOCTYPE html>
<html>
<head>
<script>
$("#div1").empty();
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

59 | P a g e
</div>
<br>
<button>Empty the div element</button>
</body>
</html>
2.8.3 Remove elements with a class
From the code in the previous exercise, add a class to the div and change the selector in the Click
function to refer to a class. Save the changes and reload to test the same.
$(".div1").empty();
<!DOCTYPE html>
<html>
<head>
<script>
$(".div1").empty();
});
});
</script>
</head>
<body>
<div class="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

</div>
<br>
<button>Empty the div element</button>
</body>
</html>
60 | P a g e
2.9 jQuery Dimensions
2.9.1 width and height methods
In the below example code, observe the way of getting the width and height of a particular element.
Copy the code to notepad and save the HTML and reload, test by clicking on the button.
<!DOCTYPE html>
<html>
<head>
<script>
var txt="";
txt+="Width of div: " + $("#div1").width() + "</br>";
txt+="Height of div: " + $("#div1").height();
$("#div1").html(txt);
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid

blue;background-color:lightblue;"></div>
<br>
<button>Display dimensions of div</button>
<p>width() - returns the width of an element.</p>
<p>height() - returns the height of an element.</p>
</body>
</html>
Now remove the width and height attributes from the style 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 | P a g e
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.
<!DOCTYPE html>
<html>
<head>
<script>
var txt="";
txt+="Height of div: " + $("#div1").height() + "</br>";
txt+="Inner width of div: " + $("#div1").innerWidth() + "</br>";
txt+="Inner height of div: " + $("#div1").innerHeight();
});
});
</script>
</head>
<body>
<br>

<p>innerWidth() - returns the width of an element (includes padding).</p>
<p>innerHeight() - returns the height of an element (includes padding).</p>
</body>
</html>
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.
<!DOCTYPE html>
<html>
<head>
62 | P a g e
<script>
var txt="";
txt+="Height of div: " + $("#div1").height() + "</br>";
txt+="Outer width of div: " + $("#div1").outerWidth() + "</br>";
txt+="Outer height of div: " + $("#div1").outerHeight();
});
});
</script>
</head>
<body>
<br>

<p>outerWidth() - returns the width of an element (includes padding and border).</p>
<p>outerHeight() - returns the height of an element (includes padding and border).</p>
</body>
</html>
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);
<!DOCTYPE html>
<html>
<head>
<script>
$("#div1").width(500).height(500);
});
});
</script>
</head>
<body>
63 | P a g e
<br>
<button>Resize div</button>
</body>
</html>
64 | P a g e

CSS & Jquery Practice Exercises1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS & Jquery Practice Exercises1

Uploaded by

Copyright:

Available Formats

CSS & JQUERY

1.1 CSS Syntax

1.2 Commenting a line of code:

1.3 CSS Selectors

1.3.1 Selecting an Element with tag name

1.3.2 Selecting an Element with id:

1.3.3 Selecting an element with class name:

name the class of the same as "left".

Preview the HTML now and see the difference.

1.3.4 Selecting a specific element with class name:

<h1 class="center">This heading will not be affected</h1>

1.3.5 Grouping similar style to several tags/classes

Eg: <h1 class="class1">Hello World!</h1>

and in style tag as below

1.4 CSS Backgrounds

1.4.1 Simple background

Lets see how we can make a simple background to an element in HTML

<h1>My CSS web page!</h1>

1.4.2 Background to specific elements:

<h1>CSS background-color example!</h1>

Add the below style and check the preview.

1.4.3 background with image

1.4.4 Repeat image horizontally

1.4.6 Positioning background image

1.5 CSS Text

1.5.1 CSS Text color:

<h1>This is heading 1</h1>

<h1>CSS text-align Example</h1>

1.5.3 Text decoration

Now we shall see various text decoration patterns.

<h1>This is heading 1</h1>

1.5.4 Text transformation

<p class="uppercase">This is some text.</p>

1.5.5 Text indentation

The text identation can be done using the below code.

1.5.6 CSS Fonts

1.5.7 Selecting the font style:

<p class="normal">This is a paragraph in normal style.</p>

1.5.8 setting the font size

<h1>This is heading 1</h1>

1.5.9 Setting with em:

<h1>This is heading 1</h1>

1.6 CSS Links

/* mouse over link */

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

1.7 CSS Lists

1.7.1 Styling lists with different bullets.

Below styling would set different styles to different ordered lists.

<p>Example of ordered lists:</p>

1.7.2 Un ordered lists

1.8 CSS Tables

1.8.1 Setting Table borders:

Set the styling as shown below.

1.8.2 Different borders for cells

1.8.3 Setting table width and height:

1.8.4 Text alignment in table

1.8.5 Vertical alignment of text in a table cell:

1.8.6 Padding in a table cell

1.8.7 Setting Background color in table:

1.9 CSS Border

1.9.1 Sample borders with CSS:

<p class="one">Some text.</p>

1.9.2 Setting Border color with CSS: