Inline CSS Not Working

Question

I have CSS in a

<a>

tag.

Why is

color

not applied?

HTML:

    <a href="example.com" style="

     .button {  

       color: red;  

     }

     .button:hover {

       color: blue;

     }">text</a>

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

In its current form your HTML is invalid as your style attribute is attempting to use pseudo classes (:active, :hover) and class selectors (.button). The style attribute can only include declaration blocks (without braces).

The value of the style attribute must match the syntax of the contents of a CSS declaration block (excluding the delimiting braces)

CSS Style Attributes (http://www.w3.org/TR/css-style-attr/)

A CSS declaration block is defined as:

A declaration block starts with a left curly brace ({) and ends with the matching right curly brace (}). In between there must be a list of zero or more semicolon-separated (;) declarations.

Syntax and basic data types (http://www.w3.org/TR/CSS21/syndata.html#rule-sets)

Ideally the style rules would be moved into a separate stylesheet included in the head of the page but you could get away with extracting the rules into style tags.

<style>
  .button {
    text-decoration: none;
    text-align: center;
    padding: 6px 16px;
    border: outset 5px #005072;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    font: 18px Verdana, Geneva, sans-serif;
    font-weight: bold;
    color: #000000;
    background-color: #a62152;
    background-image: -moz-linear-gradient(top, #a62152 0%, #4326b5 100%);
    background-image: -webkit-linear-gradient(top, #a62152 0%, #4326b5 100%);
    background-image: -o-linear-gradient(top, #a62152 0%, #4326b5 100%);
    background-image: -ms-linear-gradient(top, #a62152 0%, #4326b5 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4326b5', endColorstr='#4326b5', GradientType=0);
    background-image: linear-gradient(top, #a62152 0%, #4326b5 100%);
    -webkit-box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
    -moz-box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
    box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
    text-shadow: 1px -1px 2px #ffffff;
    filter: dropshadow(color=#ffffff, offx=1, offy=-1);
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
  }
  .button:hover {
    padding: 6px 16px;
    border: outset 5px #005072;
    font: 18px Verdana, Geneva, sans-serif;
    font-weight: bold;
    color: #ffffff;
    background-color: #573bc7;
    background-image: -moz-linear-gradient(top, #573bc7 0%, #a5194c 100%);
    background-image: -webkit-linear-gradient(top, #573bc7 0%, #a5194c 100%);
    background-image: -o-linear-gradient(top, #573bc7 0%, #a5194c 100%);
    background-image: -ms-linear-gradient(top, #573bc7 0%, #a5194c 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a5194c', endColorstr='#a5194c', GradientType=0);
    background-image: linear-gradient(top, #573bc7 0%, #a5194c 100%);
    -webkit-box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
    -moz-box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
    box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
    text-shadow: 1px -1px 3px #2fb5b1;
    filter: dropshadow(color=#2fb5b1, offx=1, offy=-1);
  }
  .button:active {
    padding: 6px 16px;
    border: inset 5px #005072;
    font: 18px Verdana, Geneva, sans-serif;
    font-weight: bold;
    color: #ffffff;
    background-color: #4326b5;
    background-image: -moz-linear-gradient(top, #4326b5 0%, #a62152 100%);
    background-image: -webkit-linear-gradient(top, #4326b5 0%, #a62152 100%);
    background-image: -o-linear-gradient(top, #4326b5 0%, #a62152 100%);
    background-image: -ms-linear-gradient(top, #4326b5 0%, #a62152 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a62152', endColorstr='#a62152', GradientType=0);
    background-image: linear-gradient(top, #4326b5 0%, #a62152 100%);
    -webkit-box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
    -moz-box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
    box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
    text-shadow: 1px -1px 9px #36cfb0;
    filter: dropshadow(color=#36cfb0, offx=1, offy=-1);
  }
</style>
<a target="_blank" href="http://www.youtube.com/user/danielspringermusic?sub_confirmation=1" class="button">Subscribe</a>

To summarise, you need to:

Add a style block to your page (preferably in the head)
Move the CSS code from the style attribute in the a to this style block
Add class="button" to the a

Applying styles to elements is one of the fundamentals of building a web page so I would suggest that you follow some tutorials to teach yourself the basics. Learning the Web looks like a good place to start.

Conversely, it appears that you are using Blogger. You can add custom CSS by following these steps:

Sign in on blogger.com.

Click on your blog.

On the left side of the page, click Templates > Customize > Advanced.

From here, you can change colors and fonts.

To make changes using custom CSS, click Add CSS.

Use CSS to change your blog's format (https://support.google.com/blogger/answer/41954?hl=en)

Inline CSS Not Working

Sign up