top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

How To Use IDs to Override Classes in CSS?

+1 vote
How To Use IDs to Override Classes in CSS?
posted Feb 18, 2015 by Sathyasree

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

1 Answer

+1 vote
Best answer

Class is a nice way to separate a group of tag instances. To identify one or two special instances, you can use the ID attributes and ID selectors. In the CSS example below, the ID selector "P#hot" wins over all other selectors, so the third row in the table will be in red:

<title>CSS Included</title>
<style type="text/css">
  /* matches P instances with id="hot" only */
  P#hot {color: red}

  /* matches P instances with class="url" only */
  P.url {margin-top: 0px; margin-left: 20px; 
    font-family: sans-serif; fond-weight: bold}

  /* matches P instances inside TABLE only */
  TABLE P {margin-top: 0px; margin-left: 40px; 
    font-family: serif; font-size: 12pt; color: blue}

  /* matches all instances of tag P */
  P {font-family: arial; font-size: 14pt; color: black}
<p>Welcome to resource listings:<br> 
<tr><td><p class="url"></p></td>
  <td><p>W3 home page.<p></td></tr>
<tr><td><p class="url"></p></td>
  <td><p>PHP home page.<p></td></tr>
<tr><td><p class="url" id="hot"></p></td>
  <td><p id="hot">Google search.<p></td></tr>
answer Feb 20, 2015 by Shivaranjini