Exercises: HTML and CSS Overview
Problems for exercises and homework for the “HTML and CSS” course @ SoftUni. Submit your solutions in the
SoftUni judge system at https://judge.softuni.bg/Contests/394/HTML-and-CSS-Overview .
1. My First Page
Create a Web Page like the following.
Create “my-first-page.html”
Constraints
<h1> tag for heading
<p> tag for paragraph
2. Definition Lists
Create a Web Page like the following.
© Software University Foundation (softuni.org). This work is licensed under the CC-BY-NC-SA license.
Follow us: Page 1 of 6
Create “definition-lists.html”
Constraints
<h2> tag for heading
<dl> tag for definition list
3. Reversed List
Create a Web Page like the following.
Create two files: “reversed-list.html” and “reversed-list.css”
© Software University Foundation (softuni.org). This work is licensed under the CC-BY-NC-SA license.
Follow us: Page 2 of 6
Constraints
<div> with id=wrapper as a container
o Background color: #dddddd
o Text color: #95191a
o Width container: 300px
o Border: 1px solid #000000
Hints
Use:
<ol> with reversed attribute
o <ol reversed="reversed">
Submit only reversed-list.html + reversed-list.css in ZIP file
4. The Runners Home
Create a Web Page like the following using Runners-Home.txt.
Create two files: “runners-home.html” and “runners-home.css”
Constraints
<div> with id=wrapper as a container
o Background color: #5bc0de
Hints
Use:
<h1> and <h2> tags for headings
<sup> tag for superscript text
<p> tag for paragraphs and <span> for Hello, Stranger!
<ul> tag for list items
© Software University Foundation (softuni.org). This work is licensed under the CC-BY-NC-SA license.
Follow us: Page 3 of 6
<hr /> for horizontal line
<footer> tag for copyright part + © for copy right symbol
5. Book Story
Create a Web Page like the following using Book-Story.txt.
Create two files: “book-story.html” and “book-story.css”
Constraints
<div> with id=wrapper as a container
o Width container: 400px
o Background color: #dddddd
o Border: 1px solid #000000
o Margin Left: 20px
o Padding: 10px
<p> tag for paragraph + font-size: 18px
<em> tag for italic text
Hints
Use:
© Software University Foundation (softuni.org). This work is licensed under the CC-BY-NC-SA license.
Follow us: Page 4 of 6
<h1> tag for heading + center the text
<q> tag for quotation text
o q::before {
content: open-quote;
}
o q::after {
content: close-quote;
}
6. *World Cup News
Create a Web Page like the following using World-Cup-News.txt.
Create two files: “world-cup-news.html” and “world-cup-news.css”
© Software University Foundation (softuni.org). This work is licensed under the CC-BY-NC-SA license.
Follow us: Page 5 of 6
Constraints
<div> with id= "wrapper" as a container
o Width container: 700px
o Height container: 730px
o Border: 1px solid #000000
o Center the container
o Padding: 10px
o Background color: #a6e1ec
<h1> and <h2> tags for headings
<p> tag for paragraph
<strong> tag for bold text
<em> tag for italic text
<img> tag for images
o Width: 200px
o Margin Right: 10px
o Vertical Align: middle
<span class= "text"> for the text next to images
o Text color: #2EA620
<li> tag
o Width: 520px
o Padding: 10px
o Margin Bottom: 5px
o Font Size: 14px
o Border: 1px solid #000000
© Software University Foundation (softuni.org). This work is licensed under the CC-BY-NC-SA license.
Follow us: Page 6 of 6
