[SOLVED] How do the symbols * . and # apply to IDs differently?

[Inkers]

So I've been doing some site reading and have been plowing through source CSS to see how 'other people' do it to get a grip on how CSS can be applied and what magic it makes happen.

There is one thing I'm a bit unsure about though. Reading through, I've often seen the symbols *, . or # applied in front of an ID or applied at least somewhere in the first line.

At first I thought that # was instead of 'div ID' to make things shorter and tidier but now I'm not sure. Would someone be able to explain to me how the symbols are used in CSS and how their application differentiates from the others? i.e using * instead of # and so on.

I'd be hugely grateful

[Aso]

# in css indicates an ID. Say if in your html you have

Code: Select all

 <div id="menu">text...</div>

You would use '#menu' in your css to apply the corresponding styles. The * symbol is a 'wild card' and applies to every element

I guess I should also mention that . is for assigning style to a class (much like an ID, but can have multiple instances in the same page)

So for

Code: Select all

<a class="link" href="#">text...</a>

You would use '.link' in your css

The only items in css that don't require the # or . or when you apply styles to html tags (body, div, a ,span etc).


Going back to the first example, 'div#menu' is effectively the same as using '#menu', the same as 'a.link is the same as '.link'. It's sometimes useful however to use the former, as you can tell straight off what tag you used that particular id or class on

[karinne]

Alright ... well ...

# is the symbol for ID selector ... so ... your ID
CSS

Code: Select all

#container {
   background-color: #990;
}

HTML

HTML: Select all

<div id="container">
   bla bla bla
</div>

. is the symbol for class selector which you use to determine a class name
CSS

Code: Select all

.something {
   color: #900;
}

HTML

HTML: Select all

<span class="something">bla bla bla</span>

and

* is the universal selector using this mean to apply the properties to ALL elements. Read this article - No Margin For Error

[Marc]

In the css you you will have '*','#' and '.'.

Firstly the * is for a universal selector, if you use this, this will apply to ALL.

# is for an id=. You can use it like:

CSS:

Code: Select all

#test {
/* My CSS here! */

HTML:

HTML: Select all

<div id="test"></div>

Please remember ID's can be applied to anything (<span>, etc.). You should also only use ID's ONCE per page.

.'s (dots) are for class=. You can use it like:

CSS:

Code: Select all

.thisisaclassincss {

/* My Css Here! /*
}

HTML: Select all

<span class="thisisacssclass"></span>

Classes can be used as many times as you like per page!

You can also use "BODY, HTML, p, etc" in your css. Like so:

Code: Select all

body {
/* My CSS here */
}

html {
/* My CSS here */
}

p {
/* My CSS here */
}

Hope that helps!

I will try and find a website that will explain this better

EDIT: Just noticed Karinne's post! Check out her links - especailly the No Margin For Error...

[MikeHopley]

"*" is the universal selector. It matches any element. For example:

Code: Select all

* {
margin: 0;
padding: 0;
}

This removes the margins and paddings from all elements. This is not usually a good idea. "*" is generally useless, but you can use it in combination with other selectors. It's also frequently used in a hack for Internet Explorer (this is bad practice).

"." denotes a class. For example:

Code: Select all

.note {
font-size: 120%;
}

This would increase the font size of all elements with the class name "note" (such as <p class="note">).

"#" denotes an ID. These are much the same as classes, but IDs must be unique; only one element can ever have an id (such as <div id="header">). IDs are more convenient to manipulate with javascript than classes are, and they also "rank" much higher than classes whenever there is a conflict of CSS rules.

Code: Select all

#header {
background: #000;
}

This sets the background of the item with ID "header".

[Marc]

LOL 3 people replyed with *nearly* the same thing Although, mine isnt as good as the other two... I only knocked it up in a minute whilst typing an email!

[Aso]

lol, enough info for you ?

[Inkers]

Ahhhh, I see! That makes a lot of sense! Thanks everyone!

[Monie]

I wish to add my example but, I'm afraid someone will delete my thread for clearing up... lol
All the example given above is very cristal clear..