CSS Exercises

(1)

CSS & HTML EXERCISES

Create HTML document and save it as mysuperheroes.html. The Create HTML document and save it as mysuperheroes.html. The document must contain the following coding.

document must contain the following coding.

<html> <html> <head> <head> <title>Cool Heroes</title> <title>Cool Heroes</title> </head> </head> <body> <body> <p> <p> <h1>My Superheroes</h1> <h1>My Superheroes</h1>

<h2>This is my favorite superhero</h2> <h2>This is my favorite superhero</h2> <img src=“

<img src=“SpidermanSpiderman.jpg” width=“92”>.jpg” width=“92”> </p> </p> <p> <p> <h2>Other Superheroes</h2> <h2>Other Superheroes</h2> <ol> <ol> <li>Batman</li> <li>Batman</li> <li>Iron Man</li> <li>Iron Man</li> <li>The Thing</li> <li>The Thing</li> </ol> </ol> </p> </p> <p> <p>

I like them because they are crime fighters who are: I like them because they are crime fighters who are:

<ul> <ul> <li>Cool</li> <li>Cool</li> <li>Powerful</li> <li>Powerful</li> <li>Fun</li> <li>Fun</li> </ul> </ul> </p> </p> <p> <p>

Below are my favorite superheroes and movies Below are my favorite superheroes and movies

<table> <table> <tr> <tr> <td>Superhero</td> <td>Superhero</td>

(2)

<td>Fav Movie</td> </tr> <tr> <td>Spiderman</td> <td>Spider-Man 2 (2004)</td> </tr> <tr> <td>Batman</td> <td>Batman Returns (1992)</td> </tr> <tr> <td>Transformers</td> <td>Transformers-3 (2014)</td> </tr> </table> </p> <p>

Click below to view their pictures

<a href= “Spiderman.jpg” target=“_blank” >Spiderman</a> <a href= “Batman.jpg” target=“_blank”>Batman</a>

<a href= “Transformers.jpg” target=“_blank”>Transformers</a> </p>

</body> </html>

* Give background color for your webpage in hexadecimal (any color).

You are now going to link CSS file to HTML file by using External type. Now, create a new file in .css format and save it as myherostyles.css.

In your .css file:

1. Make the table properties contains these following:  border-color (pink – in hexadecimal value)  border-style (dashed)

(3)

2. Insert background image for your webpage with fixed background attachment.

3. Change the h2 to color purple (in hexadecimal value), text

decoration overline, font family Verdana, and aligned to center, font size xx-large.

4. Change the ul to color green (in hexadecimal value), text decoration overline, font family Comic Sans MS, and aligned to right, font size 80%.

5. Change the ol to color grey (in hexadecimal value), text decoration underlined, font family Lucida, and aligned to left, font size in px. 6. Change the li to color blue (in hexadecimal value), , sans-serif,

10point, square (list-style-type)

7. Change the p to black (in hexadecimal value), text decoration overline, Times New Roman, left-aligned, font size xx-large

Additional Notes:

In the styles for the list, there are few types of bullet:

lis-style-type Bullet appearance Example disc solid circle  UAE

 Egypt circle circle o UAE

o Egypt

square square  UAE  Egypt

decimal decimal number 1. UAE 2. Egypt

Activity 1 (9th August 2014)

1. Load Notepad++ and key in the following in CSS format.

2. The stylesheet for a particular web site must contain the following styles:

h1 – red (in hexadecimal value), sans-serif font, 34 point, centre-aligned, bold

h2 - dark blue (in hexadecimal value), serif font, 20 point, left-aligned h3 – green (in hexadecimal value), san-serif font, 12 point,

(4)

li – blue (in hexadecimal value), sans-serif font, 10 point, bullet points, left-aligned

p – black (in hexadecimal value), serif font, 10 point, left-aligned

3. Save this stylesheet as Style_sheet.css

4. You are now going to create the web page that makes use of the stylesheet you have just created.

5. Open a new file in NotePad++

6. Write the skeleton of a basic HTML page.

7. Title of your webpage is “Task setting up a stylesheet”

8. Link your CSS file by using external type in <head> section. 9. In body, write the following HTML:

<h1> This is the h1 heading</h1> <h2> This is the h2 heading</h2> <h3> This is the h3 heading </h3>

<p> This is the text used for the majority of paragraphs on each page</p>

<ul>

<li>This is point one in the list</li> <li>This is point two in the list</li> <li>This is point three in the list</li> <li>This is point four in the list</li> </ul>

10.Save the file as WebPageWithCSSLink.html

(5)

Activity 2 (11th August 2014)

Changing the width and height of a table and the width of cells in the table

1. Load Notepad++.

2. Save this HTML as ChangeTableProperties.html 3. Write the most basic HTML code

4. Give a title “Change Table Properties”

5. Write the following as comment in your HTML In this activity I will learn:

A. How to change the width and height of a table B. How to change the color of a cell

6. In body section, enter the following HTML code <table height=”250” width=”300” border=”2”>

7. Change the color for Cell 1 to yellow (in hexadecimal value). 8. Change the color for Cell 2 to blue (in hexadecimal value). 9. Change the color for Cell 3 to silver (in hexadecimal value). 10.Change the color for Cell 4 to red (in hexadecimal value). 11.Change the color for Cell 5 to black (in hexadecimal value). 12.Change the color for Cell 6 to orange (in hexadecimal value).

(6)

Activity 3 (11 August 2014)

You are given the file Exercise2.html which creates the home page for Jake’s Coffee Shop website.

This displays as shown in figure 1.

(7)

Write the appropriate CSS to change the presentation of the webpage to that shown in figure 2. The

new page layout includes a header section, two columns (one for navigation menu and one for the

main content) and a footer section.

Figure 2. Display of Exercise2.html with CSS

The colours used are as follows: Text: #330000

Body background: #ffffcc

Header and footer background: #ccaa66

Left (navigation) column background: #E8D882 Right (main content) column background: #f1e8b0 The text is displayed in Verdana font.

You should write an external CSS file. You need to modify the original HTML file only to link to this

style sheet, mark up sections (using <div> tags) and set appropriate class and id attributes.

(8)