7 Replies - 496 Views - Last Post: 16 May 2012 - 01:40 PM

#1 Redd4  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 01-April 12

basic, basic question

Posted 16 May 2012 - 11:36 AM

Guys feel free to shout at me for not searching, Ive a lot on though, and this is an easy way for me.
I want to change the colour of some text, on the fly as it were.
currently my code looks like this


<article>

<h1>TYRES TYRES TYRES TYRES TYRES<h1>
</br>

<ul>

<h2>We stock tyres for </br>

Cars </br>
Trucks </br>
Farm and Plant machinery</h2>

</ul>

</article>

]


but, id like the "We Stock tyres for" bit in red, to be precise #990000.
is there any way to change the color on the fly, ive tried created a h3 tag that defined it as red, but this broke up the unordered list, createing a space between the "we stock tyres for" and the rest of the list.

advice, as always, appreciated. thanks for reading.

redd .

Is This A Good Question/Topic? 0
  • +

Replies To: basic, basic question

#2 rusoaica  Icon User is offline

  • D.I.C Head

Reputation: 48
  • View blog
  • Posts: 221
  • Joined: 10-March 12

Re: basic, basic question

Posted 16 May 2012 - 11:39 AM

this might help formating the text

<font color = #990000 face = arial size = 8>we stock tires for</font>
Was This Post Helpful? -2
  • +
  • -

#3 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,991
  • Joined: 08-June 10

Re: basic, basic question

Posted 16 May 2012 - 11:57 AM

rusoaica, that method has been obsolete for a good decade now. If you want to alter the appearance of a page, you use CSS.

The simplest alternative to what you did is:
<span style="color: #990000; font-family: Arial, sans; font-size: 48px;">We stock tires for</span>


A better method would be to put that style in a selector in the header of the pages.
<!-- Something like this would go in the <head> section of the page -->
<style type="text/css">
span.red {
    color: #990000; 
    font-family: Arial, sans; 
    font-size: 48px;
}
</style>

<!-- And then, wherever you have the text in the HTML -->
<h2><span class="red">We stock tires for</span>


And a still better method would be to put that style into an external CSS stylesheet and <link> to it in the header. (Reduces bandwidth, as it allows caching. Also a lot cleaner to read that way.)

This is what you would recommend you do, Redd4.


Also, your use of the <ul> element is incorrect. Items in <ul> and <ol> elements should be listed in <li> elements. Like:
<h2>We stock tires for:</h2>
<ul>
    <li>Cars</li>
    <li>Trucks</li>
    <li>Farm animals and Plants</li>
</ul>


Then, in order to get that looking like you want it to look, you change the default appearance through CSS. (Read up on the list-style styles for that.)

This post has been edited by Dormilich: 16 May 2012 - 12:33 PM

Was This Post Helpful? 1
  • +
  • -

#4 Redd4  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 01-April 12

Re: basic, basic question

Posted 16 May 2012 - 11:58 AM

Wow, thats brilliant thanks. worked a charm

Posted Image


this site is for an assignment but will eventually go online too.
I was wondering, see the way theres an outline on the banner, I did that in inDesign by defining the stroke to be 1.2 and giving the stroke a colour.

however, the banner is an image and images are rubbish for search engines / SEO.
I found out today how to use non-system fonts through css, storing the ttf or otf files in the folder.

but is there anyway to add an outline / stroke to these fonts?

it would be nice to add an outline to the red to make it stand out, from the image its sitting on top of
Was This Post Helpful? 0
  • +
  • -

#5 rusoaica  Icon User is offline

  • D.I.C Head

Reputation: 48
  • View blog
  • Posts: 221
  • Joined: 10-March 12

Re: basic, basic question

Posted 16 May 2012 - 12:07 PM

Atli, i gave him the simpliest method that came through my mind :)
Was This Post Helpful? 1
  • +
  • -

#6 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,991
  • Joined: 08-June 10

Re: basic, basic question

Posted 16 May 2012 - 12:29 PM

View PostRedd4, on 16 May 2012 - 06:58 PM, said:

but is there anyway to add an outline / stroke to these fonts?

Not in any established way I know of. Not without some sort of trickery, like overlaying different sized fonts on top of each other. (Which is a major headache. Believe me, I've tried :))

There is a text-outline style defined in the CSS3 specs, but nobody seems to have implemented it yet. However, Webkit appears to have a -webkit-text-stroke style that works, but I can't find anything comparable in the other browsers.

View PostRedd4, on 16 May 2012 - 06:58 PM, said:

however, the banner is an image and images are rubbish for search engines / SEO.

Search engines are pretty good about indexing alt attributes for images. Having a header image with "My site" in some fancy text, this should mark it as relatively important:
<h1 id="main_header"><img src="MySite.jpg" alt="My Site"/></h1>


The ID perhaps doesn't help, but as smart as the crawlers are getting, I wouldn't be surprised if they actually understood simple things like that.
Was This Post Helpful? 1
  • +
  • -

#7 Redd4  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 01-April 12

Re: basic, basic question

Posted 16 May 2012 - 12:40 PM

cool cool. huge thankyou to all you guys, great to be that bit wiser. have a nice evening,

regards,
Redd .
Was This Post Helpful? 0
  • +
  • -

#8 rusoaica  Icon User is offline

  • D.I.C Head

Reputation: 48
  • View blog
  • Posts: 221
  • Joined: 10-March 12

Re: basic, basic question

Posted 16 May 2012 - 01:40 PM

you too, mate!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1