CODEWITHSUNDEEP
htmlcsshyperlink
lil buda
lil buda

Reputation: 63

disable css style for certain elements

I used css to create a style for a menu which has links but now that style applies to all the links on the page. how can i disable that css style for some links? Here is the css code:

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

li {
font-size: 35px;
display: inline-block;
}

a:link, a:visited {
display: block;
width: 250px;
font-weight: bold;
color: #FFFFFF;
background-color: #0080FF;
text-align: center; 
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}

a:hover, a:active {
background-color: #66B2FF;
}

And here is the html code (It's a gallery):

<html>
    <head>
        <title>GALLERY</title>
        <link rel="stylesheet" type="text/css" href="styles.css">
        <script type="text/javascript" language="JavaScript">
        </script>
    </head>
<body>
<center><br/>
<font face="Geneva" id="title">GALLERY</font><br/><br/><br/>
</center>
<center>
<ul>
  <li><a href="index.html">home</a></li>
  <li><a href="about.html">about</a></li>
  <li><a href="gallery.html">gallery</a></li>
  <li><a href="contact.html">contact</a></li>
</ul><br/><br/><br/>


<table border="1">
    <tr>
        <td><a href="pictures/gallery/pic1.jpg" target="_blank"><img src="pictures/gallery/pic1.jpg" width="450" height="253"/></a></td>
        <td><a href="pictures/gallery/pic2.jpg" target="_blank"><img src="pictures/gallery/pic2.jpg" width="450" height="253"/></a></td>
        <td><a href="pictures/gallery/pic3.jpg" target="_blank"><img src="pictures/gallery/pic3.jpg" width="450" height="253"/></a></td>
        <td><a href="pictures/gallery/pic4.jpg" target="_blank"><img src="pictures/gallery/pic4.jpg" width="450" height="253"/></a></td>
    <tr>
    <tr>
        <td><a href="pictures/gallery/pic5.jpg" target="_blank"><img src="pictures/gallery/pic5.jpg" width="450" height="253"/></a></td>
        <td><a href="pictures/gallery/pic6.jpg" target="_blank"><img src="pictures/gallery/pic6.jpg" width="450" height="253"/></a></td>
        <td><a href="pictures/gallery/pic7.jpg" target="_blank"><img src="pictures/gallery/pic7.jpg" width="450" height="253"/></a></td>
        <td><a href="pictures/gallery/pic8.jpg" target="_blank"><img src="pictures/gallery/pic8.jpg" width="450" height="253"/></a></td>
    <tr>
    <tr>
        <td><a href="pictures/gallery/pic9.jpg" target="_blank"><img src="pictures/gallery/pic9.jpg" width="450" height="253"/></a></td>
        <td><a href="pictures/gallery/pic10.jpg" target="_blank"><img src="pictures/gallery/pic10.jpg" width="450" height="253"/></a></td>
        <td><a href="pictures/gallery/pic11.jpg" target="_blank"><img src="pictures/gallery/pic11.jpg" width="450" height="253"/></a></td>
        <td><a href="pictures/gallery/pic12.jpg" target="_blank"><img src="pictures/gallery/pic12.jpg" width="450" height="253"/></a></td>
    <tr>
    <tr>
        <td><a href="pictures/gallery/pic13.jpg" target="_blank"><img src="pictures/gallery/pic13.jpg" width="450" height="253"/></a></td>
        <td><a href="pictures/gallery/pic14.jpg" target="_blank"><img src="pictures/gallery/pic14.jpg" width="450" height="253"/></a></td>
        <td><a href="pictures/gallery/pic15.jpg" target="_blank"><img src="pictures/gallery/pic15.jpg" width="450" height="253"/></a></td>
        <td><a href="pictures/gallery/pic16.jpg" target="_blank"><img src="pictures/gallery/pic16.jpg" width="450" height="253"/></a></td>
    <tr>
</table>

</center>
</body>
</html>

So all the links in the table use the style from the css. How do I stop that? Thanks in advance.

Upvotes: 1

Views: 35621

Answers (6)

Sudhansu Choudhary
Sudhansu Choudhary

Reputation: 3360

You got to understand what css does. The purpose of applying css in not to remove it from some elements. If you want to "disable" or "exempt" some elements from having a particular css style, well the answer is you don't apply the css to those elements at first place.

Coming back to your code, I would suggest you do not generalize css rules the way you have done it for the <a> anchor tags you have. Rather you seperate them with classes using class="menuItems" or class="galleryImages". In short, don't do this,

ul li a{
    // some css
}

Do this,

.menuItems{
    // some css that is specific to menu items
}

.galleryImages{
    // some css that is specific to images
}

And in your html do this, 

<ul>
  <li><a href="index.html" class="menuItems">home</a></li>
  <li><a href="about.html" class="menuItems">about</a></li>
  <li><a href="gallery.html" class="menuItems">gallery</a></li>
  <li><a href="contact.html" class="menuItems">contact</a></li>
</ul>

 <tr>
        <td><a href="pictures/gallery/pic13.jpg" target="_blank" class="galleryImages"><img src="pictures/gallery/pic13.jpg" width="450" height="253"/></a></td>
        <td><a href="pictures/gallery/pic14.jpg" target="_blank" class="galleryImages"><img src="pictures/gallery/pic14.jpg" width="450" height="253"/></a></td>
        <td><a href="pictures/gallery/pic15.jpg" target="_blank" class="galleryImages"><img src="pictures/gallery/pic15.jpg" width="450" height="253"/></a></td>
        <td><a href="pictures/gallery/pic16.jpg" target="_blank" class="galleryImages"><img src="pictures/gallery/pic16.jpg" width="450" height="253"/></a></td>
    <tr>

Upvotes: 1

Lion
Lion

Reputation: 17908

Inline style-attributes should only be, if at all, only be used when it's a single item or maybe in limited cases for dynamic generated style. Otherwise you have redundant CSS, which will result in a bad maintainability. Also the size of your HTML increases. This can result in larger load times and higher traffic-costs, especially when people using your site on mobile devices with limited traffic. So its a good idea not to use them at all.

Using css classes or ids from the beginning has the advantage that you're very flexible:

<tr>
    <td><a class="gallery-link" href="pictures/gallery/pic13.jpg" target="_blank"><img src="pictures/gallery/pic13.jpg" width="450" height="253"/></a></td>
</tr>

Now you can style all gallery-links by using their class in css:

<style type="text/css">
.gallery-link {
    color: blue;
    [...]
}
</style>

In some cases the not-selector http://www.w3schools.com/cssref/sel_not.asp can be usefull. He will style ALL elements EXPECT the ones in the selector:

a:not(.gallery-link) {
    color: orange; 
}

So this is can be seen as the opposite of the css above: It will colorize all links orange which don't has the class .gallery-link - But mostly you would be better to set a general rule for all links like

a {
  color: blue;
}

or maybe you already have such a rule defined by a css-framework you're using. For your gallery-links and other element which should look differend you can define classes and ids, which you can style as you cant. They will have no influence on other a-elements whithout the specified class(es).

Upvotes: 1

NicuVlad
NicuVlad

Reputation: 2601

Use CSS specific selectors:

ul{
    //CSS for ul
}

ul li{
   //CSS for li
}

ul li a{
    //add CSS for nav links
}

Upvotes: 2

Deepak Nirala
Deepak Nirala

Reputation: 836

You need to understand that css property defined on page can be overridden by adding css property inline. Refer : http://www.expression-web-tutorial.com/Types_CSS_Styles.html#.VYVxElIoRoc

Upvotes: 0

moneyt
moneyt

Reputation: 452

If you know you're targeting only CSS3 capable browsers, you can use the :not() selector for CSS. Give your links that you don't want styled a class and then apply to your link css definitions:

a:link:not(.no-style), a:visited:not(.no-style){
...
} 

a:hover:not(.no-style), a:active:not(.no-style) {
...
}

JSFiddle: http://jsfiddle.net/L60ktyb3/

Upvotes: 0

edgarasb
edgarasb

Reputation: 11

create another class, or use style=""

example:

<a href="link" style="color: #fff;">page</a>

Upvotes: 0

Related Questions