Convert From CSS To Pure HTML

Question

Instead of

<style> some css code</a>

and then using

<a href="mylink" class="some class">anchor</a>

I want to use something like this:

<a href="mylink" style="something">anchor</a>

So how would I convert this css in such a form (something):

<style>
.twitterbird {
margin-bottom: 10px;
width: 160px;
height:160px;
display:block;
background:transparent url('twitterbird.png') center top no-repeat;
}

.twitterbird:hover {
background-image: url('twitterbird_hover.png');
}
</style>

You can't [use pseudo-classes](http://stackoverflow.com/questions/5293280/css-pseudo-classes-with-inline-styles) in inline styles, everything but that is possible in your example. — Adrift, May 15 '13 at 16:01

Ryan Mortensen · Accepted Answer · 2013-05-15T16:18:11.857

2

I don't understand why you aren't linking to an external stylesheet.

Put...

<link rel="stylesheet" type="text/css" href="<!--thename of your css file.css-->" />

in your <head> section.

Take all of your styling and save it in a filename that is linked in the href="" of that line.

Like this...

.twitterbird {
margin-bottom: 10px;
width: 160px;
height:160px;
display:block;
background:transparent url('twitterbird.png') center top no-repeat;
}

.twitterbird:hover {
background-image: url('twitterbird_hover.png');
}

In the .css (cascading style sheet) file you do not use style tags. You would then use class names and id just as you would if you had your css between tags at the top of your html/php file.

edited May 15 '13 at 16:18

answered May 15 '13 at 16:11

Ryan Mortensen

2,307
3
22
27

Didn't know this is possible. Thanks. – Zox May 15 '13 at 16:15
By the way, I had a head tag on that 4th line. In your head section is where you'd should link. – Ryan Mortensen May 15 '13 at 16:18

score 1 · Answer 2 · answered May 15 '13 at 16:06

Given your example, you could use inline css:

<a href="mylink" style="margin-bottom: 10px; width: 160px; height: 160px; display: block; background: transparent url('twitterbird.png') center top no-repeat;">anchor</a>

Unfortunately, you won't be able to include the :hover bit like others have already mentioned.

score 1 · Answer 3 · answered May 15 '13 at 16:11

1

Try this

<a href="mylink" 
 style="margin-bottom: 10px;width: 160px;height:160px;display:block;background:transparent url('twitterbird.png') center top no-repeat;" 
 onmouseover="this.style.background='url(twitterbird_hover.png)'"       
 onmouseout="this.style.background='url(twitterbird.png)'">anchor</a>

please not that this is not the best way to go about it, you shouldn't really use inline styles/javascript

answered May 15 '13 at 16:11

iConnor

19,997
14
62
97

Cool. but i think i cannot use javascript but it will come in handy for other uses. – Zox May 15 '13 at 16:13
well then its not possible :) – iConnor May 15 '13 at 16:14

Convert From CSS To Pure HTML

3 Answers3