Crowdly
Add to Chrome
Last week, we developed a web page to display a fictional "World Gurning Competi...
✅ The verified answer to this question is available below. Our community-reviewed solutions help you understand the material better.
Last week, we developed a web page to display a fictional "World Gurning Competition".
In this week's exercise, you will follow the steps to add CSS styling to this web page. We will practice all 3 different ways to add styling to the web page:
- inline (using a style attribute in HTML elements),
- document (using style element in the HTML head section), and
- external (using external CSS files).
When you complete this exercise, the webpage will look like the following:
Part 1. Inline CSS
Make a copy of the web pagecompetition.html that you developed last week into a new file called competition1.html. We will use inline CSS for it. Follow the steps below to modify the file competition1.html.
Step 1. Using font-size property The CSS property sets the size of the font.
Last week we used the HTML
font tag to set the font size and color for the text World Gurning Competitionand the smiley face. Now we will use CSS instead.
Remove all thefont tags from the text World Gurning Competition and the smiley face, and put all of them into a single paragraph tag (p). In this paragraph tag, use inline CSS to set font-sizeto
50px.
In the first table row tag (tr), use inline CSS to set font-sizeto 40px.
In all the table data tags (td) on the ranking column, use inline CSS to set font-size to 60px.
Step 2. Using color property The CSS property sets the foreground color value of an element's text.
Put the word
World into a span tag; and in this span tag, use inline CSS to set color to orange. Put the word Gurning into another span tag, and use inline CSS to set color to pink.
Put the word
Competition into a 3rd span tag and use inline CSS to set color to blue.
In the first table row tag (tr), use inline CSS to setcolor to navy.
In all the table data tags (td) on the ranking column, use inline CSS to setcolor to maroon.
In all the unordered list tags (ul), use inline CSS to setcolor to green.
In all the list item tags (li) that contain the team leader, use inline CSS to setcolor to purple.
Step 3. Using background-color property The CSS property sets the background color of an element.
In the paragraph tag (p) that contains the text
World Gurning Competition, use inline CSS to set background-color to #ff000010.
In the first table row tag (tr), use inline CSS to setbackground-color to #00000010.
In the table row tags (tr) that correspond to the odd ranking numbers, use inline CSS to setbackground-color to #cc007711.
In the table row tags (tr) that correspond to the even ranking numbers, use inline CSS to setbackground-color to #55ff7720.
Step 4. Using padding property The .
In the paragraph tag (p) that contains the text
World Gurning Competition, use inline CSS to set padding to 30px.
In all the table header tag (th), use inline CSS to setpadding to 20px.
In all the table data tag (td), use inline CSS to setpadding to 20px.
In all the list item tags (li), use inline CSS to setpadding to 10px.
Step 5. Using text-align and vertical-align properties The CSS property sets the horizontal alignment of a block element or table-cell box.
The CSS property sets the vertical alignment of an inline, inline-block or table-cell box.
In the paragraph tag (p) that contains the text
World Gurning Competition, use inline CSS to set text-align to center.
Last week we used the attributesalign and valign for the table header tag (th) and table data tag (td). This week we will use CSS, so we now remove all the attributes align and valignfrom
the th and td tags.
In all the table header tags (th) and table data tags (td) of the 1st column, use inline CSS to settext-align to right and vertical-align to top.
In all the table header tags (th) and table data tags (td) of the 2nd column, use inline CSS to settext-align to center and vertical-align to top.
In all the table header tags (th) and table data tags (td) of the 3rd column, use inline CSS to settext-align to left and vertical-align to top.
Step 6. Using border-style, border-color and border-width propertiesThe . The values are: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.
The .
The .
In the paragraph tag (p) that contains the text
World Gurning Competition, use inline CSS to set border-style to dotted, border-color to red, border-width to 5px.
In all the table header tags (th), use inline CSS to set
border-style to dashed, border-color to black, border-width to 5px.
In all the table data tags (td), use inline CSS to set
border-style to solid, border-color to gray, border-width to 1px.
Step 7. Using border-collapse and border-spacing propertiesThe CSS property sets whether cells inside a table have shared or separate borders. The values are: collapse, separate.
The is separate.
In the table tag (table), remove the attribute
border.
In the table tag, use inline CSS to set
border-style to dotted, border-collapse to separate, border-spacing to 10px. Observe what it looks like for the table border and table cell borders.
Now, in the above table tag, use inline CSS to set
border-style to none, border-collapse to collapse. Observe what it looks like for the table border and table cell borders this time. Notice the difference?!