CSS Help Please

**mujahidtaban** · 12-19-2010, 10:55 AM

Hello there,

Without using CSS in HTML, I was using the code given below within BODY to show following two images:

one in the background
other on the left side

Code:

<img src="http://www.urdufans.com/forum/ls/admin.gif" style="border: 0pt none;"> <span style="color: #FF0000; background-image: url('http://www.urdufans.com/forum/bg/admin.gif')"><b>Mujahid Taban</b></span>

Using this code I was showing both images like

Now I want to use CSS within HEAD. Please tell me what CSS code I can use for this purpose?

Regards,
mujahidtaban

**Schmoopy** · 12-19-2010, 11:01 AM

If you want to use it within the <head> tag, and not an external CSS file, you can do this:

Code:

<html>

  <head>

    <style>
      img{
        border:none;
      }
		
      #heart{
        color: #FF0000;
        background-image: url('http://www.urdufans.com/forum/bg/admin.gif');		
      }
    </style>

  </head>

  <body>

    <img src="http://www.urdufans.com/forum/ls/admin.gif"><span id="heart"><strong>Mujahid Taban</strong></span>

  </body>

</html>

You can replace the id="heart" bit, with whatever you feel is relevant for that element. Just remember to replace the #heart bit within the <style> tag too.

Sorry about the indentation, it never copies very well from my editor onto here >.<

**mujahidtaban** · 12-19-2010, 11:08 AM

Thanks Schmoopy.

Please also tell me how I can use this in external css. I think the code will remain same. Right?

**Schmoopy** · 12-19-2010, 11:13 AM

Yea that's right, for an external CSS file, use:

Code:

<head>
  <link rel="stylesheet" href="path/to/style.css" type="text/css">
</head>

In your style.css file:

Code:

img{
  border:none;
}
		
#heart{
  color: #FF0000;
  background-image: url('http://www.urdufans.com/forum/bg/admin.gif');		
}

**mujahidtaban** · 12-19-2010, 03:12 PM

Let me elaborate my question.

For

, I am using following code:

Code:

<html>

<head>

</head>

<body>
<img src="http://www.urdufans.com/forum/ls/admin.gif" style="border: 0pt none;"> <span style="color: #FF0000; background-image: url('http://www.urdufans.com/forum/bg/admin.gif')"><b>Mujahid Taban</b></span>
</body>

</html>

Now I want to use an external CSS file in order to reduce my code becasue I have to use "Mujahid Taban" many times in the page. You have suggested me following CSS and HTML:

In style.css file:

Code:

img{
  border:none;
}
		
#heart{
  color: #FF0000;
  background-image: url('http://www.urdufans.com/forum/bg/admin.gif');		
}

In index.html file:

Code:

<html>

<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
<img src="http://www.urdufans.com/forum/ls/admin.gif"> <span id="heart"><strong>Mujahid Taban</strong></span>
</body>

</html>

That reduced the code a little but I want only following code in HTML:

Code:

<span id="heart">Mujahid Taban</span>

Everything else should too be in external CSS. What CSS code I should use for LEFT SIDE image (heart) and for removing strong.

**traq** · 12-20-2010, 04:38 AM

add font-weight: bold; to the #heart rule in your css file.

To use css to add the admin.gif image before the span, you could use the :before pseudo-class:

Code:

#heart:before{ content: url(http://www.urdufans.com/forum/ls/admin.gif) }

**traq** · 12-20-2010, 09:39 PM

short answer: no.
long answer: maybe, but it's "wrong" and -more importantly- won't always work, especially across different browsers.

It's best to make two separate rules.

**mujahidtaban** · 12-21-2010, 06:20 AM

Originally Posted by traq

short answer: no.
long answer: maybe, but it's "wrong" and -more importantly- won't always work, especially across different browsers.

It's best to make two separate rules.

hmmmm ok. may be its a foolish question: can i include external multple css in css OR any other way to solve my problem? like i said that i have option to edit only the code between #heart{I CAN ENTER CSS CODE HERE}

**traq** · 12-21-2010, 07:02 AM

I'm not sure what you mean when you say that you "have option to edit only the code between #heart{I CAN ENTER CSS CODE HERE}".

Also, I'm a little confused by "there is a place for entering CSS code for this heading".

Are you using an html editor of some sort (dreamweaver, frontpage, or similar) or a CMS (joomla, wordpress, etc.)?

I don't understand why you would be limited in where or how you can write your css code. Therefore, I don't think I'm answering your question correctly.

In any case, this

Code:

#heart{
  color: #FF0000;
  background-image: url('http://www.oneurdu.org/images/0/1.gif');
  font-weight: bold;
  before{ content: url(http://www.oneurdu.org/images/1/1.gif)
}

with or without outer brackets, is not a valid construct. If it works at all, it won't work reliably or consistently.

CSS considers #heart and #heart:before to be different selectors. CSS selectors can't be "nested", they must all be listed independently. your rules need to be seperate:

Code:

#heart{
  color: #FF0000;
  background-image: url('http://www.oneurdu.org/images/0/1.gif');
  font-weight: bold;
}
#heart:before{
  content: url(http://www.oneurdu.org/images/1/1.gif)
}

Thread: CSS Help Please

Thread Tools

Search Thread

CSS Help Please

The Following User Says Thank You to Schmoopy For This Useful Post:

The Following User Says Thank You to Schmoopy For This Useful Post:

The Following User Says Thank You to traq For This Useful Post:

The Following User Says Thank You to traq For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions