How to use CSS Class and ID selectors - html

Question

I am new to css and i have been trying to come up with a nice looking homepage but got confused with the right selectors to use.
I have designed the buttons very well using unordered lists but the lists in the other content also inherit the formats of the buttons.
how should i assign a one class or two to the unorderd button list?
many thanks!
i want the class to have the following code.
here is the code i used for the buttons.
/* button styling */
ul {
list-style: none;
margin: 0;
}
li {
float: left;
}
a {
background: #404853;
background: linear-gradient(#687587, #404853);
border-left: 1px solid rgba(0, 0, 0, 0.2);
border-right: 1px solid rgba(255, 255, 255, 0.1);
color: #fff;
display: block;
font-size: 11px;
font-weight: bold;
padding: 0 20px;
line-height: 38px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
text-transform: uppercase;
}
a:hover {
background: #454d59;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4);
border-right: 1px solid rgba(0, 0, 0, 0.2);
color: #d0d2d5;
}
li:first-child a {
border-left: none;
border-radius: 4px 0 0 4px;
}
li:last-child a {
border-right: none;
border-radius: 0 4px 4px 0;
}

Answer 1

You should scope your selector to make them more explicit.
A good way is, if your ul is in a header element:
header ul {}
header ul li {}
Or also, if it is in some element with id #navigation:
#navigation ul {}
#navigation ul li {}
This will affect all ul elements inside header or #navigation.
Another way is to add an ID to your unsorted list in your html:
<ul id="navigation">
<li></li>
</ul>
In this case you could use just that ID in your selector:
ul#navigation {}
ul#navigation li {}
Or just:
#navigation {}
#navigation li {}

Answer 2

Ok, so as I think you know, you are using very broad selectors here - which is of course the reason why all of your <li> tags are appearing the same, site-wide.
As you say, classes, or even ids could be used to help here.
Although there is some debate over whether you should use ids at all in CSS, I will show you examples of both.
IDs:
First rule of IDs: IDs must be unique to the page!.
This doesn't mean you can't reuse the ID on other pages within your site, but you must ensure that, per page load, your IDs are unique. In CSS selectors, an ID selector is decorated with a #.
Example:
HTML:
<ul id="myList">
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
</ul>
CSS:
/* This selector will select the element with the "myList" ID,
in this case, the <ul> tag in the above example.
Keep in mind, it isn't selecting the <li> tags */
#myList
{
float: left;
}
/* The following style selects all
<li> tags WITHIN any element with the "myList" ID */
#myList li
{
font-weight:bold;
}
Classes:
Classes are, for the most part, the same as IDs but do not have to be unique to a certain page. Classes are decorated with a . (period).
HTML:
<ul class="myList">
<li>Text 1</li>
<li class="selected">Text 2</li>
<li>Text 3</li>
</ul>
CSS:
/* same as before, but now we are targeting a class */
.myList
{
float: left;
}
/* as you can see, there is no difference in the usage here. */
.myList li
{
color:blue;
}
/* if you prefix the class or ID name with an element tag
(in this case, li for the <li> element), then the selector will
only select elements with the specified ID/Class, that is of
that element type.
In this example, the following selector means:
"Select all <li> tags that have the class 'selected'"
This is useful, say, in a navigation bar. */
li.selected
{
/* this will overwrite the
color attribute defined in the
".myList li" style, in this case,
to highlight that the selected item is green */
color:green;
}
JSFiddle: (Very useful site)http://jsfiddle.net/fSsdf/
I hope this helps!

Answer 3

HTML:
<ul class="class1">
<li>Content</li>
<li>Content</li>
</ul>
CSS:
ul.class1{
float: left;
}