CSS Exercises

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 disc

Bullet appearance solid circle

Example UAE Egypt o UAE o Egypt UAE Egypt 1. UAE 2. Egypt  

circle

circle

square

square

 

decimal

th

decimal number

Activity 1 (9  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 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.

th

Activity 2 (11  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 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 Jake’s 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