...

View Full Version : Text Background Color



msmarti
11-05-2011, 07:08 PM
Can you tell me how to write a code for CSS on how to add a background color just to my post titles?

Thank you

Excavator
11-05-2011, 09:03 PM
Hello msmarti,
Since the heading element can take on a size, assigned or inherited, you can just put a background color on that.
Like this -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #FC6;
font: 1em "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #000;
}
#container {
width: 800px;
margin: 30px auto;
padding: 0 0 400px;
background: #999;
}
h1 {background: #ccc;}
</style>
</head>
<body>
<div id="container">
<h1>Title</h1>
<!--end container--></div>
</body>
</html>

msmarti
11-05-2011, 11:05 PM
Is this for a background just for a post title or is the page background. The title to each of my post is blueish and I want to add a solid brown color to the background of the post title, not the entire page.

Excavator
11-06-2011, 03:13 AM
Is this for a background just for a post title or is the page background. The title to each of my post is blueish and I want to add a solid brown color to the background of the post title, not the entire page.

H1 is a heading tag, see heading tags here (http://www.w3schools.com/tags/tag_hn.asp).
I could not begin to guess how your titles get their bluish background without seeing your code.

joanzn
11-06-2011, 03:24 AM
you wanna take your class or id for your heading(title) tags and just set the color of them...I'm assuming you have something like that for "posts" ONLY


.class{
color:#FFF;
background-color:#a2a2a2;

#ID {
color:#FFF;
background-color:#a2a2a2;
}


That's going to color your title and background at once.
And If it's in a div tag class then get a lil specific so your not styling all your headings ..somethin like this?


.divClass h1{
color:#FFF;
background-color:#a2a2a2;
}
#divId h1
{
color:#FFF;
background-color:#a2a2a2;
}

monlorf
11-08-2011, 01:46 PM
use

div.foo {background-color:green;}

<div class=foo>bar</div>

Sammy12
11-09-2011, 05:34 AM
if you want JUST the text to have a background, wrap it in an inline element - span



h1 span {
background-color: #DDD;
}




<h1>
<span>text</span>
</h1>

jassi.singh
11-09-2011, 06:05 AM
Refer: http://www.html.net/tutorials/css/lesson3.php
http://www.highdots.com/forums/cascading-style-sheets/h1-background-color-233502.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum