Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Nov 2011
    Location
    Dallas, Texas
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Text Background Color

    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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    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 -
    Code:
    <!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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Nov 2011
    Location
    Dallas, Texas
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Quote Originally Posted by msmarti View Post
    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.
    I could not begin to guess how your titles get their bluish background without seeing your code.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Nov 2010
    Posts
    81
    Thanks
    13
    Thanked 3 Times in 3 Posts
    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
    Code:
    .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?
    Code:
    .divClass h1{
    color:#FFF;
    background-color:#a2a2a2;
    }
    #divId h1
    {
    color:#FFF;
    background-color:#a2a2a2;
    }
    Last edited by joanzn; 11-06-2011 at 04:29 AM.

  • #6
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    use

    div.foo {background-color:green;}

    <div class=foo>bar</div>

  • #7
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    if you want JUST the text to have a background, wrap it in an inline element - span

    Code:
    h1 span {
       background-color: #DDD;
    }
    Code:
    <h1>
       <span>text</span>
    </h1>

  • #8
    Regular Coder
    Join Date
    Sep 2011
    Posts
    103
    Thanks
    0
    Thanked 14 Times in 14 Posts


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •