Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
3K views

CSS Exercises

The document provides instructions for completing CSS and HTML exercises including creating an HTML file with headings, images, lists and a table then linking an external CSS file to style elements like the table, headings, lists and paragraphs. The CSS file is to include styles for properties of the table like border color, style and width as well as styles for headings, lists and paragraphs including font, size, color and alignment. Additional exercises provide instructions for changing table properties like height, width and cell colors and creating an external CSS file to style an HTML page with a header, two columns and footer based on provided colors and layout.

Uploaded by

Warnnie Musah
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3K views

CSS Exercises

The document provides instructions for completing CSS and HTML exercises including creating an HTML file with headings, images, lists and a table then linking an external CSS file to style elements like the table, headings, lists and paragraphs. The CSS file is to include styles for properties of the table like border color, style and width as well as styles for headings, lists and paragraphs including font, size, color and alignment. Additional exercises provide instructions for changing table properties like height, width and cell colors and creating an external CSS file to style an HTML page with a header, two columns and footer based on provided colors and layout.

Uploaded by

Warnnie Musah
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

CSS & HTML EXERCISES

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


document must contain the following coding.
<html>
<head>
<title>Cool Heroes</title>
</head>
<body>
<p>
<h1>My Superheroes</h1>
<h2>This is my favorite superhero</h2>
<img src=Spiderman.jpg width=92>
</p>
<p>
<h2>Other Superheroes</h2>
<ol>
<li>Batman</li>
<li>Iron Man</li>
<li>The Thing</li>
</ol>
</p>
<p>
I like them because they are crime fighters who are:
<ul>
<li>Cool</li>
<li>Powerful</li>
<li>Fun</li>
</ul>
</p>
<p>
Below are my favorite superheroes and movies
<table>
<tr>
<td>Superhero</td>

<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)
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
disc
solid circle

circle
circle
o
o
square
square

decimal
decimal number
1.
2.

Example
UAE
Egypt
UAE
Egypt
UAE
Egypt
UAE
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, centrealigned, bold
h2 - dark blue (in hexadecimal value), serif font, 20 point, left-aligned
h3 green (in hexadecimal value), san-serif font, 12 point, leftaligned

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
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.
2.
3.
4.
5.

Load Notepad++.
Save this HTML as ChangeTableProperties.html
Write the most basic HTML code
Give a title Change Table Properties
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>
<tr><td bgcolor= width=200>This is Cell 1</td>
<td width=50>This is Cell 2</td>
<td width=50>This is Cell 3</td>
</tr>
<tr><td width=200>This is Cell 4</td>
<td width=50>This is Cell 5</td>
<td width=50>This is Cell 6</td>
</tr>
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 <div> tags) and set appropriate class
and id attributes.

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

You might also like