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.
6 Answers 6
Use CSS specific selectors:
ul{
//CSS for ul
}
ul li{
//CSS for li
}
ul li a{
//add CSS for nav links
}
Comments
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).
Comments
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>
1 Comment
create another class, or use style=""
example:
<a href="link" style="color: #fff;">page</a>
Comments
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/
Comments
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
1 Comment
word-break, you are stuck. Can't be overridden with none because word-break doesn't accept none.
nonevalue. However, some styles, likeword-break, do not acceptnone.