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.
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. }
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;
}