Question

Create a webpage with the following features. Write down the codes here.

A. Create the following elements with the given CSS.

1 Heading - Red Color, Font-Size: 70px, - Use the ID Selector

1 Heading and a Paragraph within a DIV Tag - Yellow Background - Color and Blue Font Color - Use the type Selector to apply CSS to the DIV element.

1 Heading with H2 and a Paragraph - Pink Background - color and red font color - Use the Class Selector

Answer 1

Explanation:

STEP 1: WRITING THE HTML

For this tutorial, I suggest you use only the very simplest of tools. E.g., Notepad (under Windows), TextEdit (on the Mac) or KEdit (under KDE) will do fine. Once you understand the principles, you may want to switch to more advanced tools, or even to commercial programs, such as Style Master, Dreamweaver or GoLive. But for your very first CSS style sheet, it is good not to be distracted by too many advanced features.

Don't use a wordprocessor, such as Microsoft Word or OpenOffice. They typically make files that a Web browser cannot read. For HTML and CSS, we want simple, plain text files.

STEP 2: ADDING SOME COLORS

You probably see some black text on a white background, but it depends on how the browser is configured. So one easy thing we can do to make the page more stylish is to add some colors. (Leave the browser open, we will use it again later.)

We will start with a style sheet embedded inside the HTML file. Later, we will put the HTML and the CSS in separate files. Separate files is good, since it makes it easier to use the same style sheet for multiple HTML files: you only have to write the style sheet once. But for this step, we just keep everything in one file.

We need to add a <style> element to the HTML file. The style sheet will be inside that element. So go back to the editor window and add the following five lines in the head part of the HTML file. The lines to add are shown in red.