Practice: Develop a Webpage Using HTML and CSS

Now it's time to practice developing a small webpage using HTML and CSS. In this example, you'll create a biography webpage using font, color, and text-decoration styles. Watch what happens to the biography text by changing the style.

You can also try this example using an editor and a web browser. The HTML file to start this exercise can be found at this link.

Working with CSS

The following live example shows a biography, which has been styled using CSS. The CSS properties that I have used are as follows – each one links to its property page on MDN, which will give you more examples of its use.

In the box below, you will find some CSS already in place. This selects parts of the document using element selectors, classes, and pseudo-classes. Make the following changes to this CSS:

  1. Make the level one heading pink, using the CSS color keyword hotpink.
  2. Give the heading a 10px dotted border-bottom which uses the CSS color keyword purple.
  3. Make the level 2 heading italic.
  4. Give the ul used for the contact details a background-color of #eeeeee, and a 5px solid purple border. Use some padding to push the content away from the border.
  5. Make the links green on hover.

You should end up with something like this image.


Afterwards try looking up some properties not mentioned on this page in the MDN CSS reference and get adventurous!

Remember that there is no wrong answer here – at this stage in your learning you can afford to have a bit of fun.

Jane Doe
Web Developer

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Contact information

  • Email: jane@example.com
  • Web: http://example.com
  • Tel: 123 45678

CSS and HTML

body {
    font-family: Arial, Helvetica, sans-serif;
}

h1 {
    color: #375e97;
    font-size: 2em;
    font-family: Georgia, 'Times New Roman', Times, serif;
   
    border-bottom: 1px solid #375e97;
}

h2 {
    font-size: 1.5em;
}

.job-title {
    color: #999999;
    font-weight: bold;
}

a:link, a:visited {
   
    color: #fb6542;
}

a:hover {
    text-decoration: none;
}

<h1>Jane Doe</h1>
<div class="job-title">Web Developer</div>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove
    right at the coast of the Semantics, a large language ocean.</p>

<p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences
    fly into your mouth. </p>

<h2>Contact information</h2>
<ul>
    <li>Email: <a href="mailto:jane@example.com">jane@example.com</a></li>
    <li>Web:
    <a href="http://example.com">http://example.com</a></li>
    <li>Tel: 123 45678</li>
</ul>