CODEWITHSUNDEEP
csshtml
hatakeK
hatakeK

Reputation: 65

Styling individual list items using inline style?

I'm completely new to HTML and CSS, so please bear with me.

I want to change the color of an individual list item in an ordered list, but I don't want the list number to change style. I also need to do this within the one html-document -- no separate CSS.

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title> Test-page </title>
</head>

<body>
<h1> An html-file </h1>


<ol>
<li> Item 1 </li>
<li style="color:blue"> Item 2 </li>
<li> Item 3 </li>
</ol>


</body>
</html>

The only thing I can think of to solve this using inline styling, is:

<ol>
<li> Item 1 </li>
<li><p style="color:blue"> Item 2 </li>
<li> Item 3 </li>
</ol>

But the list items will appear to be separate paragraphs. I don't want to use the font-tag, and I want to use HTML5. I want it to be as short as possible, in one file, therefore inline styling.

Upvotes: 2

Views: 15964

Answers (4)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201896

Any CSS rule that you set on a li element also applies to the list item marker (bullet, number). This is inconvenient, and CSS still lacks any way to style the list marker separately.

So your approach of using something like <li><p style="color:blue"> Item 2 </li> is the workaround you need to use, but when selecting the added inner element, you need to consider the consequences. A p element has default top and bottom margin, so using it, you would need to remove them here:

<li><p style="color:blue; margin:0"> Item 2 </li>

A simpler way is to use div instead of p, since div is a semantically emply block-level container element, which causes no change in default rendering except that its content starts on a fresh line and the content after it starts on a fresh line, which happens here anyway due to the list markup. So:

<li><div style="color:blue"> Item 2</div></li>

Instead of div, you can use span, if there is only inline (phrase-level) content. But div is more flexible, as it allows elements like inner lists, tables, etc.

Upvotes: 2

Joke_Sense10
Joke_Sense10

Reputation: 5412

<li><span style="color:blue">Item</span>2</li>

Upvotes: 0

Rahul
Rahul

Reputation: 842

Try using the span tag in place of p. And don't forget to close the tags properly:

<ol>
    <li><span style="color:blue">Item 2</span></li>
</ol>

All the best.

Upvotes: 0

Falguni Panchal
Falguni Panchal

Reputation: 8981

LIke this

demo

css

ol li span{
color:blue;
}

Upvotes: 0

Related Questions