Hey,

 

How would I go about creating text like http://www.fivesite.co.uk/ - I mean the part that says "award winning business web designers and website developers - our web design team builds brands, generates leads and boosts online sales for our varied clients". Could you also explain the <div> tags part as well please. I've tried creating it, and the CSS and HTML code looks okay to me, I just can't get it to appear on the page.

 

Regards

Ryan

Code as used on the website

 

HTML

 

<h1 class="line1">
award winning business
<font color="#8f115e">web designers</font>
and
<font color="#8f115e">website developers</font>
- our
<font color="#8f115e">web design</font>
team builds brands, generates leads and boosts online sales for our
<a href="/web_designers_portfolio/">varied clients</a>
</h1>

 

CSS

 

h1.line1 {
 color: #B1B3B5;
 font-size: 2.2em;
 font-weight: bold;
 letter-spacing: -1px;
}

h1 {
 margin: 0;
 padding: 0;
 text-transform: lowercase;
}

Edited July 12, 201115 yr by benhawk

Thank you, it's much appreciated!

It's invalid HTML, as it contains the <font> tag, which is deprecated.

 

Much better to use valid XHTML elements. In fact, the best method:

 

<h1>
award winning business <em>web designers</em> and <em>website developers</em> - our <em>web design</em> team builds brands, generates leads and boosts online sales for our <a href="/web_designers_portfolio/">varied clients</a>
</h1>

 

 

.homeColumn2 h1 {
 color: #B1B3B5;
 font-size: 2.2em;
 font-weight: bold;
 letter-spacing: -1px;
 margin: 0;
 padding: 0;
 text-transform: lowercase;
}

.homeColumn2 h1 em {
 color:#8f115e;
 font-style:normal;
}

 

The .homeColumn2 is the div area that the h1 tag sits within. It's far better to use this for styling than elements which have implicit meaning. Neater, easier to maintain etc.

 

There's enough bad code out there already without teaching people how to code incorrectly!

 

The reason for the use of the <em> tag is semantics:

 

http://www.w3schools.com/tags/tag_phrase_elements.asp