Member Avatar for daviddoria

Here is my demo.css

#sidebar {}

#sidebar ul {
list-style-image: url(images/bullet.gif);
}

ul {
list-style-type: circle;
}

and demo.html

<html>
<head>
<link  REL="StyleSheet" TYPE="text/css" HREF="demo.css"> 
</head>
<body>

<ul class="sidebar">
<li> Test1</li>
<li> Test2</li>
</ul>

<ul>
<li> Test3</li>
<li> Test4</li>
</ul>

</body>
</html>

I would expect the two items in the first list to have the image bullet.gif next to them, and the two items in the second list to have circles. What I actually see is that all 4 items have circles. The image file is in the correct place because if I move the list-style-image line to the ul{} they all have the image.

I think I'm just a little confused with the terminology I've been seeing.

What is the #? Maybe it's a class name? Sometimes I see sidebar.ul instead of #sidebar ul - is there a difference?

Thanks!

Dave

  • 3 Contributors
  • 5 Replies
  • 442 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by daulex
Member Avatar for freshface001

the Problem is identifier.
if using '#' means call 'id'
example

#sidemenu{}

<ul id="sidemenu">

the same '.' for class

.sidemenu{}

<ul class="sidemenu">

you use following samples

#sidebar  li{
list-style-image: url(images/bullet.gif);
}

or

ul#sidebar{
list-style-image: url(images/bullet.gif);
}
Member Avatar for daviddoria

so when it is good to use id vs class?

also, what does the id ("#") character mean when it comes after the name, like in

ul#sidebar

(vs #sidebar li)

?

Thanks!

Dave

Member Avatar for daulex

id is the id of an element, thus the style you create for an id only applies to one object.

class on the other hand is a group of style variations that may be applied to several different objects.

simple example:
imagine you have some text that takes up the full width of the document then under the text you need 3 boxes that will be the same width and will have the same qualities, so all you will do is define a class like

.btbx {float:left;width:300px;margin-right:10px;background-color:#ccc;font-size:90%;}

and then use this html output:

<div class="btbx"><p>Box 1</p></div>
<div class="btbx"><p>Box 2</p></div>
<div class="btbx"><p>Box 3</p></div>

If you would use the id element for this task, you would have to define separate id's for every single one of the boxes.

Now the question comes in, what if I want box 2 to have a different background or font?

Create a new class, that will only contain the required style variations, as we will still use the previously defined float,width and margin properties. So the new class will look like this.

.b2 {background-color:#fff;font-size:100%;}

The new html output would look like this:

<div class="btbx"><p>Box 1</p></div>
<div class="btbx b2"><p>Box 2</p></div>
<div class="btbx"><p>Box 3</p></div>

I hope that answers your question.

The difference between #some and ul#come is only to aim you, so when you look through the css, you find ul#, then you find the name of the id. I personally don't use it, however it does help some people...

Member Avatar for daviddoria

Ok I'm getting there...
didn't you say you can apply it to multiple objects though? So couldn't it be like to make a "division" of the page that all uses btbx, like

<div class="btbx">
<p>Box 1</p>
<p>Box 2</p>
<p>Box 3</p>
</div>

If that's not right, then I guess my question has changed to what exactly is a "div" - in my examples, the properties were applied directly to the ul object

<ul class="sidemenu">

not to any "div" thing. haha sorry for the terrible terminology!

Thanks!

Dave

Member Avatar for daulex

in theory you can do that, however that would not validate properly, if you wished to expand the content within the <p></p>, the reason div's are there is to create blocks that set an area for the content to be inserted. the correct markup is essential to proper coding.
<div> is an area within which you place the content
<h1/h2/h3> - headings
<ul/ol> - unordered / ordered lists
<p> - paragraphs
That is exactly what they are supposed to do.

Valid markup does not allow for <div> elements to be placed within paragraphs, as that does not make sense. Thus I use div.btbx to start with, as in this instance you will be able to place headings, lists, paragraphs and all the othere elements within it and still be able to validate the code. If I did not do that, the code would still "work", however the markup would be messed up and the "code is poetry" phrase would not apply ;).

These are your first steps. What you learn now will be what you will remember forever, if you continue with web design. Go and buy a book on html. There are millions of them, trust me, it is worth it. The tutorials will help you do stuff, copy-pasting will help you get the idea. Reading a good book will imprint the rules and help you structure the knowledge.

Standards are key.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.