How to get on a single page different links based on css


Tags: html,css

Problem :

Perhaps a simple question. I want to keep a single style.css to put al my formatting in for a website. I want some links (not all the links!) to behave different, as those links should not be underlined. Also they require different font settings (larger and different colors) This code works inside an HTML to remove the link underline:

<a style=" text-decoration:none;" href="News.html">

I would like to use something like

<a class="nounderline" href="news.html">

And then put al my settings into it, but i am unsure on how to write it in the central style.css file i dont know how to handle hoover and visited colors, not sure how to write it down, could someone explain how to write such a CSS so that it wont affect all hyperlinks ?



Solution :

You can structure your css like this:

a { color: #0f0; }

a.special { 
    text-decoration: none; 
    color: #00f; 
}

a:hover {
    color: #0ff;
}

a.special:hover {
    text-decoration: underline;
    color: #ff0;
}

In your HTML, you declare all normal anchors as is. But, provide class special to those anchors you want to be treated specially.


    CSS Howto..

    Does anyone know how to create this 3d flip animation via CSS?

    How to make css a:active work after the click?

    Show missing CSS in Google Chrome

    How to make a number of breaks in CSS? [closed]

    How to hide element with css with specific title?

    How to use background image in CSS?

    How to represent x and y in svg symbol

    JQuery toggled div not showing on resize

    How to select 1st Column of div Table?

    How to add hover effect to using CKEditor?
    Here is a script to highlight columns where there is checkmarks with an orange background-color. var CKE = $( '.editor' ); CKE.ckeditor(); var columnIndex=0; $("#update").click(function(){ // Output CKEditor's result in...
    Read more

    How to store a global variable in JQuery?

    How to optimize an image sequence in Chrome?

    How to auto position sidenav in twitter bootstrap while sliding

    How to make a div fill up remaining horizontal space

    How to draw many diagonal lines[right hash lines] using css, html?

    How to set vertical alignmetn of text in bootstrap select control?

    How to apply a defined class to a new class in my css?

    Box-shadow is not showing or z-index

    Simple CSS layout - how can I achieve this layout, and make it scale easily?

    How to change an input button image using CSS?

    How to attach a div to a particular dimension in html

    How to delay the display of the background image in a div

    How to deploy a jekyll site locally with css, js and background images included?

    disabling stylesheets to increase the speed of showing/hiding divs

    How to delete Bullets from an Unordered List using CSS?

    (CSS-Javascript-Jquery) How to make thumbnails slider for a carousel? [closed]

    jqueryui menu's submenu — how to keep in front

    Web Extension : How do I use “browser_style = true”?

    How to get the image height of an image to set another div height

    How to update a web app without suffering cached CSS issues?