Crowdly
Add to Chrome
Part 2. Document CSS Make a copy of the web page competition.html that yo...
✅ The verified answer to this question is available below. Our community-reviewed solutions help you understand the material better.
Part 2. Document CSS
Make a copy of the web pagecompetition.html that you developed last week into a new file called competition2.html. We will use document CSS for it. In the head element, add a styletag.
Follow the steps below to modify the file
competition2.html.
Step 1. Using font-size property The CSS property sets the size of the font.
Remove all the font tags from the text
World Gurning Competition and the smiley face, and put them into a single paragraph tag (p). Give this paragraph tag the id called competitionPara. Use CSS id selector to select
the id
competitionPara and set font-size to 50px.
In the first table row tag (tr), give it an id calledheaderRow. Use the document CSS to select the id headerRow and set font-size to 40px.
In all the table data tags (td) on the ranking column, set the class torankingNumber. Use the document CSS to select the class rankingNumber and 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 give it an id called word1. Use CSS id selector to select the id word1 and set color to orange.
Put the wordGurning into another span tag and give it an id called word2. Use CSS id selector to select the id word2 and set color to pink.
Put the wordCompetition into a 3rd span tag and give it an id called word3. Use CSS id selector to select the id word3 and set color to blue.
Use the document CSS to select the idheaderRow and set color to navy.
Use the document CSS to select the classrankingNumber and set color to maroon.
In all the unordered list tags (ul), set the class tomemberList. Use the document CSS to select the class memberList and set color to green.
In all the list item tags (li) that contain the team leader, set the class toleader. Use the document CSS to select the class leader and set color to purple.
Step 3. Using background-color property The CSS property sets the background color of an element.
Use the document CSS to select the id
competitionPara and set background-color to #ff000010.
Use the document CSS to select the idheaderRow and set background-color to #00000010.
In the table row tags (tr) that correspond to the odd ranking numbers, set the class tooddRow. In the table row tags (tr) that correspond to the even ranking numbers, set the class to evenRow.
Use the document CSS to select the classoddRow and set background-color to #cc007711.
Use the document CSS to select the classevenRow and set background-color to #55ff7720.
Step 4. Using padding property The .
Use the document CSS to select the id
competitionPara and set padding to 30px.
In the table tag, give it an id calledteamTable. Use the document CSS to select all the table header tags (th) which are descendants of the id teamTable and set padding to 20px.
Use the document CSS to select all the table data tags (td) which are descendants of the idteamTable and set padding to 20px.
Use the document CSS to select all the list item tags (li) which are children of the classmemberList and set padding 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.
Use the document CSS to select the id
competitionPara and 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 table header tags (th) and the table data tags (td).
In all the table header tags (th) and table data tags (td) of the 1st column, set the class torankColumn. Use document CSS to select the class rankColumn and set text-align to right and vertical-alignto
top.
In all the table header tags (th) and table data tags (td) of the 2nd column, set the class toteamColumn. Use document CSS to select the class teamColumn and set text-align to center and vertical-alignto
top.
In all the table header tags (th) and table data tags (td) of the 3rd column, set the class tomemberColumn. Use document CSS to select the class memberColumn and set text-align to leftand
vertical-align to top.
Step 6. Using border-style, border-color and border-width properties The . The values are: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.
The .
The .
Use the document CSS to select the id
competitionPara and set border-style to dotted, border-color to red, border-width to 5px.
Use the document CSS to select all the table header tags (th) which are descendants of the idteamTable and set border-style to dashed, border-color to black, border-widthto 5px.
Use the document CSS to select all the table data tags (td) which are descendants of the idteamTable and set border-style to solid, border-color to gray, border-widthto 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.
Use document CSS to select the id
teamTable and 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 document CSS id selector
teamTable, 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?!