1 Reply Latest reply on Mar 18, 2010 10:23 AM by osgood_

    help with changing font size

    vkfreelance

      I am very new to dreamweaver and css or html, and just trying it out. I have created a page, but I want to change the font size in certain area, but not all of them. When I change the font size all my font changes, I have assigned a class to the selection of font I want to change, and have changed the font type, but it still isn't letting me change the size of just my selection.


      Also I want to put a link under each photo, like a caption, I have three in a row, but when I try to add my link, it wont let me align it with the photo (if you know what I mean).

       

      Hope that makes some sense.

       

      Vicky

        • 1. Re: help with changing font size
          osgood_ Level 8

          vkfreelance wrote:

           

          I am very new to dreamweaver and css or html, and just trying it out. I have created a page, but I want to change the font size in certain area, but not all of them. When I change the font size all my font changes, I have assigned a class to the selection of font I want to change, and have changed the font type, but it still isn't letting me change the size of just my selection.

           

           

          If you assign a class to a tag and produce some associated css it should change sizes.

           

          <p class="biggerFont">This is a bigger font size</p>

           

          The css:

           

          .biggerFont {

          font-size: 50px;

          }

          Also I want to put a link under each photo, like a caption, I have three in a row, but when I try to add my link, it wont let me align it with the photo (if you know what I mean).

           

          You would need to put each image in some kind of container. For now lets put them in <divs>

           

          <div id="image1"><img src="images/image1.jpg" width="200" height="200" alt="" /></div>

          <div id="image2"><img src="images/image2.jpg" width="200" height="200" alt="" /></div>

          <div id="image3"><img src="images/image3.jpg" width="200" height="200" alt="" /></div>

           

          Css to make the images appear side by side:

           

          #image1, #image2, #image3 {

          float: left;

          width: 200px;

          margin-left: 10px;

          display-inline; /* kills the double margin bug in IE6 */

          }

           

          Now add some link text under each image:

           

          <div id="image1"><img src="images/image1.jpg" width="200" height="200" alt="" /><a href="pageOne.html">Link One</a></div>

          <div id="image2"><img src="images/image2.jpg" width="200" height="200" alt="" /><a href="pageTwo.html">Link Two</a></div>

          <div id="image3"><img src="images/image3.jpg" width="200" height="200" alt="" /><a href="pageThree.html">Link Three</a></div>

           

          Css to style the link:

           

          #image1 a, #image2 a, #image3 a {

          text-decoration: none;

          color: #C30;

          }