Text and Fonts

Question 1

You are given legacy code that contains all page headings in span elements. Your client wants you to make these headings bold. How would you achieve this while minimizing your work?

Answer 1

This is done by using CSS. The following CSS markup would make all <span> contents bold:
span{font-weight: bold;}</span>

Question 2

Without changing the HTML code of a web page, how would you make all the headers in h1 to show as italic?

Answer 2

h1 {font-style: italic;}

Question 3

You are provided an academic essay and asked to make an HTML web page to hold the contents in an exact manner. You complete this, but do not include underlined headings to avoid confusion with hyperlinks. Nevertheless, your client insists that you use underlined headings. How would you add an underline to all the headings without re- coding the HTML for the web page?

Answer 3

Assuming that the headings are contained within h1 elements, this would be achieved via the following CSS: h1 {text-decoration: underline;}

Question 4

An English classroom web page needs to show correct and wrong sentences. Your client wishes that the wrong sentences could be crossed-out. How could you achieve this via CSS?

Answer 4

The sentences could be wrapped in span tags, and the following CSS would add a strike- through: span{text-decoration: line-through;}

Question 5

On a web page with a greenish color scheme, you wish to color all headers green. What are the syntax options for the CSS markup for coloring fonts green?

Answer 5

h1{color: #00FF00;}
h1{color: green;}
h1{color: rgb(0,255,0);}

Question 6

If you do not specify the font size of paragraph elements, i.e. ‹p›, what would the default font size be set to?

Answer 6

16px

Question 7

A web page contains definitions of font size. However, the measurement units are not consistent, as some elements’ fonts are in em, while others’ are in px. What is the difference between these two measurement scales?

Answer 7

em size depends on the visibility settings of the user’s computer, while px settings are going to be consistent.

Question 8

You have a huge amount of text within an HTML page. This text includes headers in ‹h1› tags. Your client wishes you to make all headers as uppercase, even though they were typed into the web page in title case. How would you achieve this using CSS?

Answer 8

h1{text-transform:uppercase;}

Question 9

On a legacy website, you are contracted to convert all text within ‹code› tags to
lower-case, and all page headers, including second-level sub-headings to uppercase. Give the skeleton code for how this could be done.

Answer 9

code{text-transform: lowercase;}

h1,h2{text-transform: uppercase;}

Question 10

Give a skeleton code for how you would indent the first line of a paragraph text on a web page so that it looks more like how a natural paragraph would be in a text book.

Answer 10

p{text-indent: 20px;}