How to convert CSS class to id?

this is the CSS code...

.breadcrumb {
    font-size: 10px;
    background-color: #006600;
    padding: 0px 2px 2px 2px;
    text-align: center;
    color: #FFFFFF;
}

.breadcrumb a {
    color: #FFFFFF;
    text-decoration: none;
}

.breadcrumb a:visited, .breadcrumb a:active {
    color: #FFFFFF;
}

.breadcrumb a:hover {
    text-decoration: unde开发者_Go百科rline;
}

and this is the code I am using to display a breadcrumb...

<p class="breadcrumb">Breadcrumb PHP code goes here</p>

I want the css code to be modified so that I can use id instead of class, as in:

<p id="breadcrumb">Breadcrumb PHP code goes here</p>

Can someone help?

Change the . in your CSS to #.

Having said that, you should ensure that there will only ever be a single instance of that p on your page at any given time if you're going to use an id selector.

All you have to do is change '.' to '#'. Like @Demian Brecht said, you should make sure that you only have one element on your page that has id="breadcrumb". You might be better off sticking with a class for this unless you are absolutely sure that there will only be one of these.

CSS class selectors don't have a big hit on page performance. I generally only use ID's for layout elements and then try to keep all the other selectors as classes. It will help when you want to reuse the the styles on multiple elements. ID's do however increase performance drastically for scripting, but if you search for a class within the context of a tag that does have an ID, the performance is still pretty good.

Here's how you would modify it.

#breadcrumb {
    font-size: 10px;
    background-color: #006600;
    padding: 0px 2px 2px 2px;
    text-align: center;
    color: #FFFFFF;
}

#breadcrumb a {
    color: #FFFFFF;
    text-decoration: none;
}

#breadcrumb a:visited, #breadcrumb a:active {
    color: #FFFFFF;
}

#breadcrumb a:hover {
    text-decoration: underline;
}