3 Lists - 3 Colors

1

Screen Shot 2020-11-07 at 9.18.56 AM
Screen Shot 2020-11-07 at 9.18.56 AM572×862 108 KB

<html>
<head>
  <title>Car Dealers in Whitehorse</title>
  <style>
    h1{color: rgb(51, 156, 24);}
    h2{color: rgb(199, 55, 134);}
    p{color: rgb(85, 123, 194);}
   ol{color: green;}
   ul{color: darkorange;}
  </style>
</head>
<body>
  <H1>Toyota of Whitehorse</H1>
  <h2>Service Department</h2>
  <p>The service folks are available from <br>
   <strong>Monday  - Friday</strong>  <br>
    <em>with the exception of holidays</em>
  </p>
  <button>Click To Contact Us</button>
  <li>tires</li>
  <li>lube jobs</li>
  <li>brakes</li>
<ul>
  <li>detailing</li>
  <li>polishing</li>
  <li>wiring</li>
<ul> <br>
<ol>
  <li>red</li>
  <li>pink</li>
  <li>blue</li>
</ol>
</body>
</html>

Here

I am playing with the basics of CSS. I have my colors for my
- ordered list (green)
- unordered list (dark orange)
In addition to the 2 above lists, I also have these 3 lines

  • tires

  • lube jobs

  • brakes

    • which I want to be in Indian Red but when I target these lines with this code

    li{color: indianred;}

    all three of my lists become Indian Red so my question is - if I am happy with the colors
    for my ordered list and unordered list, how can I assign a different color for my 3 entries
    that are not in the ol or the ul ?

    2

    You can scope your styles to target only a subset of your items. There are several ways to do that, and this article I wrote a long time ago walks you through the approaches: https://www.kirupa.com/html5/css_selectors_type_class_id.htm

    :slight_smile:

    3

    A really really good article. I now have a much better grasp of selectors as a result. Thank you.

    So a question arises nevertheless. I can see that a Class Selector for a situation like -

    <ul>

<li class="cool">Uno</li>

<li class="cool">Dos</li>

<li>Tres</li>

<li>Catorce</li>

</ul>

    will give you infinite control line by line as to the style you wish to apply but what is the deal with the ID Selector in this situation below -

    <div id="spaceship">

<p>Do or do not...there is no try.</p>

</div>

    for this example, as it is written, it would have been simpler to forget the ID Selector altogether since there is only 1

    tag and it would have been a case of using the p selector. So the advantage must be in a situation where there are a lot of

    tags within the

    tags and in that case applying an ID selector enables applying the style to all those

    elements simultaneously. Is this the way to think about the difference between the Class and the ID selectors? Anyway, a very nice tutorial to sort out these fine details of selectors.

    4

    sorry - I am forgetting to use the preformatting text button so in the previous post the tag symbols didn’t come through - let me try again to give you the full text of my note -

    A really really good article. I now have a much better grasp of selectors as a result. Thank you. So a question arises nevertheless. I can see that a Class Selector for a situation like -

    <ul>

<li class="cool">Uno</li>

<li class="cool">Dos</li>

<li>Tres</li>

<li>Catorce</li>

</ul>

    will give you infinite control line by line as to the style you wish to apply but what is the deal with the ID Selector in this situation below -

    <div id="spaceship">

<p>Do or do not...there is no try.</p>

</div>

    for this example, as it is written, it would have been simpler to forget the ID Selector altogether since there is only 1 <p> tag and it would have been a case of using the p selector. So the advantage must be in a situation where there are a lot of <p> tags within the <div> tags and in that case applying an ID selector enables applying the style to all those

    elements simultaneously. Is this the way to think about the difference between the Class and the ID selectors? Anyway, a very nice tutorial to sort out these fine details of selectors.

    5

    I believe you meant to say “there is only 1 <div> tag”. If so, you are right. This example could have just been done using an element/type selector targeting just <div> :slight_smile:

    That is good feedback as I mark this article for revising in the near future.

    :bookmark: