CODEWITHSUNDEEP
csshtml-lists
AMS
AMS

Reputation: 21

CSS: Unordered List Styling

I need to create a CSS class that will allow me to list all the ingredients in a recipe. Here are the specifications for the unordered list:

I need to do this without effecting the regular paragraphs, regular unordered lists, or other settings.

Good at HTML; poor at CSS, so explicit directions would be helpful.

Upvotes: 2

Views: 3699

Answers (2)

dpmguise
dpmguise

Reputation: 728

CSS works by priority and identifiers. To target all H2 elements on a page, you would declare

h2 {
 color: #00FF00;
}

However, you can also get more specific and target only H2 elements within a DIV for instance:

div h2 {
 color: #00FF00;
}

Along with targeting just the elements, you can use either an ID or CLASS name to help the targeting. Use the # symbols to target IDs and the . to target CLASSES

HTML

<div id="ingredients">
<h2>Heading</h2>
<ul>
<li class="selected">Item 1</li>
<li>Item 2</li>
</ul>
</div>

CSS

    #ingredients {
    margin: 0em;
    margin-left: 1em;
    }    

    #ingredients h2 {
         color: #00FF00;
    margin-bottom: 0em;
        }

   #ingredients ul {
    margin-bottom: 2em;
   }
    #ingredients ul li {
     list-style: none;
     margin: 0em .5em;
     color: #00FFFF;
    }
    #ingredients ul li .selected {
     color: #FFFF00;
    }

Finally, CSS also has importance in the order of declaration, consider the following

h1 {
font-size: 2em;
font-color: #000000;
}

h1 {
font-color: #FF0000;
}

In this case, the H1 color will be red due to the fact the second H1 declaration overwrites the previous one. Just s note to remember. }

Upvotes: 3

deceze
deceze

Reputation: 522597

h2 {
    margin-bottom: 0;   // eliminate distance from headline, applies to all h2s though
}
ul {
    padding: 0 0 0 1em; // left indent, no other padding
    margin: 0 0 1em 0;  // space on bottom, maybe use a bottom-padding instead
}
ul li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

Upvotes: 0

Related Questions