Style header CSS

I want to create header for my website widgets.

The header is like below image :

I wrote this code now :

.Widget-Header
{

    background-color: #f7901e;
    height: 40px;
    font-family: Sansation;
    font-weight: bold;
    font-size: 21px;

}

Now I don't know how to style hea开发者_JAVA技巧der icon and title.

SHould I consider separate tag for header text and Icon ?

How do I do for header Icons ? Would you please give an example ?

Update

I want to use this header class for some header containers with diffrent Icons.

So How do I do now ?

---

You could do it all with CSS and a background image. That way, the markup is clean (presentation and structure is separated) users who disable CSS will not need to download the image and still retain a functional anchor.

Updated Demo - using a single style for the majority of the properties and defining one extra rule for each icon as a background-image property.

Updated Demo 2 since the elements should be headings, so have made them <h2> and moved the anchor to the right side, matching the original question.

HTML

<h2 class="first">Stop Clock<a href="#">+</a></h2>
<h2 class="second">Something else<a href="#">+</a></h2>

CSS

h2 {
    background: #f7901e no-repeat;
    height: 40px;
    font-family: Sansation;
    font-weight: bold;
    font-size: 21px;
    width:400px;
    margin-bottom:5px;
    padding-left:50px;
    line-height:2;
    position:relative;
}

.first {
    background-image:url(http://lorempixum.com/40/40/city/1)
}

.second {
    background-image:url(http://lorempixum.com/40/40/city/2)
}

h2 a {
    position:absolute;
    right:10px;
    top:15px;
    background:url(http://lorempixum.com/10/10) no-repeat;
    text-decoration:none;
    width:10px;
    display:inline-block;
    vertical-align:middle;
    text-indent:1000px;
    font-size:10px;
    line-height:1;
}

---

You should use separate tags for the header items if you want to be able to refer to or manipulate them later; for example, to play with spacing. HTML should be used for semantics and CSS should be used for display.

Based on the information you've given, no additional tags should be required for your header to look like your image. This is because everything inside Widget-Header will inherit the style properties of Widget-Header.

---

first create a master div to hold both divs

#holder {
 width: 800px;
 overflow: hidden; /* so the floats stay in the div */
 background: orange;
}

then create styling for the divs inside the master holder

#left {
 float: left; /* the div will float left with link being the width of the object in it*/
}

#right {
 float: right; /* will float right, with same property */
}

finally your html would look like this

<div id="holder">
 <div id="left">
  this text is floated to left
 </div>

 <div id="right">
  this text is floated to right
 </div>
</div>

---

UPDATE

http://jsfiddle.net/UnsungHero97/as8RQ/3/

---

I would recommend breaking it up into elements, a wrapper for everything, a container for the left image, and a container for the right image. Check out the fiddle...

DEMO

http://jsfiddle.net/UnsungHero97/as8RQ/1/

HTML

<div id="header">
    <div id="logo"></div>
    <div id="plus"></div>
</div>

CSS

#header {
    background-color: #f7901e;
    height: 36px;
    width: 100%;
    min-width: 300px;
    position: relative;
}

#logo {
    background: url("/path/to/your/image") no-repeat;
    height: 36px; /* same height as #header height */
    width: 148px;
    position: absolute;
    top: 0px;
    left: 16px;
}
#plus {
    background: url("/path/to/your/image") no-repeat;
    height: 36px; /* same height as #header height */
    width: 41px;
    position: absolute;
    top: 0px;
    right: 16px;
}

I hope this helps.