How to color ids and classes of CSS differently in gvim

Question

I using gvim and vim and Just Love it. But, I have one pet peeve though. I like to color #id and .class in CSS File differently, currently both #value and .value are colored same.

I would like to make syntax colors of ids and classes different in gvim and vim, so that I get visual feedback for what is class and id. How to achieve this?

Answer 1

Add this command to your .vimrc:
:hi link cssClassName Type

Why this works:

First of all, you need to find the syntax group names of the items you're using.
You can do this by placing the cursor over the area that's being syntax highlighted and run the command:
:echo synIDattr(synID(line("."), col("."), 1), "name")

You should get cssIdentifier and cssClassName for #id{...} and .class{...} respectively.

You can then see which hightlight group they're linked to using :highlight cssIdentifier and :highlight cssClassName. You can view the entire highlight set using :highlight.

By default, these are both linked to Function. The nicest solution is probably to link cssClassName to the Type syntax group instead. You should be able to use any colorscheme and it will still work:
:hi link cssClassName Type

If you add this to your .vimrc, vim will use this link instead of the one defined in the css syntax file.

Answer 2

If you are talking CSS then

For id

#value {
  color:red ; // or and hex value that you prefer
}

for class

.value {
  color : blue;
}

Added after question was edited

Well you would need to modify the color scheme file under ~/vim/colors

*Steps *

1. Locate the config file under /vim/colors (For windows its the location where vim is installed), it would have an extension of vim
2. Add the following lines to the end of the file and save it(make a backup)

syn match cssIdentifier "#[A-Za-z_@][A-Za-z0-9_@-]*"

syn match cssClass "\.[A-Za-z][A-Za-z0-9_-]\{0,\}"

hi cssIdentifier guifg=#FF9900 gui=none

hi cssClass guifg=#FF0000 gui=none

type :colorscheme filename in vim

If all goes well , the color of #id would be orange and that of .id red