CODEWITHSUNDEEP
csshtml
mrkd1991
mrkd1991

Reputation: 388

Correct method of setting CSS font-weight?

I am constructing a basic html5 website with 5 pages for practice as I am in the process of relearning html5 and CSS.

I have a div with ID "education" and Class "content-list". Inside this div is a Caption and an unordered list Class "content-ul"(NOTE: Caption is contained in "content-list"). The list contains 3 list items.

I want to set the font-weight to bold for the caption, but not the unordered list.

Here's what I have:

HTML:

HTML:
<div id="education" class="content-list">
<caption>Education:</caption>
<ul class="content-ul">
<li>Tafe</li>
<li>College</li>
<li>High School</li>
</ul>
</div>

CSS:

.content-list {
... styles
font-weight:bold; /* Sets caption and list to bold */
.... styles
}

.content-ul {
.... styles
font-weight:normal; /* Sets list back to normal */
.... styles
}

This achieves the desired result, but I am wondering if there is a better/more efficient way of doing this.

Keep in mind, 4 of the 5 pages use this code. For this reason I opted against using in line styles as I would have to do it 4 times in total. This would remove the need to set the list to bold and then back to normal again, but would still use more code than the chosen method.

Any help/suggestions would be great.

Upvotes: 2

Views: 346

Answers (2)

Asons
Asons

Reputation: 87191

caption is for tables, use i.e. a h4 for lists

<div id="education" class="content-list">
  <h4>Education:</h4>
  <ul class="content-ul">
    <li>Tafe</li>
    <li>College</li>
    <li>High School</li>
  </ul>
</div>

Side note, styling a caption work when used properly

table, th, td {
    border: 1px solid black;
}
table caption {
    color: red;
    font-weight: bold;
}
<table>
  <caption>Caption</caption>
  <tr>
    <th>Header</th>
  </tr>
  <tr>
    <td>Cell</td>
  </tr>
</table>

Upvotes: 2

user7731037
user7731037

Reputation:

Looking through your example, I can see you only want Education to be bold and not the content other than it. For this simply, do it like

caption{
    font-weight:bold
}

CSS in OP won't be needed.

Upvotes: 2

Related Questions