Skip navigation
iVengeanceHD
Currently Being Moderated

How do you change different styles to some texts in a paragraph. Please help! Pics included!

Jan 22, 2013 9:11 PM

Tags: #cs4 #cs3 #error #background #image #flash #internet #files #html #dreamweaver #install #links #css #form #ie #html5 #cs6 #ftp

I am trying to code the text "About Us Learn more about us!" which I surrounded it with a paragraph and then tried to change the styles of it but it doesn't work. I'm also trying to figure out how to shorten the distance between the paragraph from top to bottom. Any help or suggestion?

 

I'm trying to make it like this with the red text font size 15 and the black text font size 12, The red text will be hyperlinked to the page it belong to. The black is more like a description about the link.

 

Example:

 

(link)About Us(/link) Learn more about us!

 

Picture of design I'm copying of what I made in photoshop.

http://gyazo.com/fc3fd682669eb83b1474eb5adbf33064

 

My website.

http://visualizecontrollers.webege.com/

 
Replies
  • Currently Being Moderated
    Jan 23, 2013 5:21 AM   in reply to iVengeanceHD

    If you simply have it like: <p><a>About Us</a> Learn more about us!</p> then you can set different styles to <p> and <a>. As for the "the distance between the paragraph from top to bottom", try adjusting the margin for <p>.

     

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 23, 2013 5:33 AM   in reply to iVengeanceHD

    The first thing I would recommend is that you move all of your CSS styles to a separate document that you then link to your HTML.Once you've done this, add text styling classes to the CSS file to cover all of the "looks" that you envision. For example, you might code all text within a <p> tag to be a uniform:

     

    p {

         font-family: Times New Roman, serif;

         color: #000;

         font-size: 1em;

    }

     

    and code alternatives:

     

    .textStyle1 {

         font-family: Verdana, Ariel, Helvetica, sans serif;

         color: #56d2ac;

         font-size: 2em;

    }

     

    .textStyle2 {

         font-family: Verdana, Ariel, Helvetica, sans serif;

         color: #313131;

         font-size: 1.5em;

    }

     

    .textStyle3 {

         font-size: 0.75em;

    }

     

    etc. Of course, you are using the font of your choice and size units (whethers ems or pixels), and adding in any other styles you want such as color, weight, line height, letter spacing. You'll end up with some THML code that looks like this, if you're putting it all into one paragraph):

     

    <p><span class="text1>These words begin my paragraph with emphasis</span> while these words get general emphasis. <span class="text2">These words will get some emphasis</span>, but not as much as the text 1 class. <span class="text3>These words would receive lesser emphasis</span> than the default text identified with the "p" tag styling.</p>

     

    Chris

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 23, 2013 8:52 AM   in reply to iVengeanceHD

    > Does that mean I have to make a style sheet for different pages of my website?

     

    No you don't have to - you can just have 1 CSS file and any number of HTML files can use it via link.

     

    --

    Kenneth Kawamoto

    htp://www.materiaprima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 23, 2013 10:51 AM   in reply to iVengeanceHD

    How to Link HTML pages to External CSS file in DW

    http://alt-web.com/DEMOS/DW-Link-Stylesheet.shtml

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points