CSS & HTML EXERCISES

Create HTML document and save it as mysuperheroes.html. The

document must contain the following coding.

Cool Heroes

My Superheroes

This is my favorite superhero

Other Superheroes

Batman

Iron Man

The Thing

I like them because they are crime fighters who are:

Cool

Powerful

Fun

Below are my favorite superheroes and movies

Superhero

Fav Movie

Spiderman

Spider-Man 2 (2004)

Batman

Batman Returns (1992)

Transformers

Transformers-3 (2014)

Click below to view their pictures

Spiderman

Batman

Transformers

* 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)

border-width (thick)

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, left-

aligned

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 section.

9. In body, write the following HTML:

This is the h1 heading

This is the h2 heading

This is the h3 heading

This is the text used for the majority of paragraphs on each

page

This is point one in the list

This is point two in the list

This is point three in the list

This is point four in the list

10. Save the file as WebPageWithCSSLink.html

11. Load your web browser and see how the webpage look like.

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

This is Cell 1

This is Cell 2

This is Cell 3

This is Cell 4

This is Cell 5

This is Cell 6

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).

Activity 3 (11 August 2014)

You are given the file Exercise2.html which creates the home page for

Jakes Coffee Shop website.

This displays as shown in figure 1.

Figure 1. Display of original HTML file

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 tags) and set appropriate class

and id attributes.

http://www.codecademy.com/en/tracks/htmlcss