CODEWITHSUNDEEP
htmlcss
JBuss
JBuss

Reputation: 43

Issue styling text within a div

having a few problems with styling some text on my webpage. I want to indent the whole of the text 8 pixels and not just the 1st line. I also want to change the whole font and size of the text and not just the 1st line. The text on the webpage can be viewed at jbussey.co.uk/bobbin/bridal.html and the my css code can be seen below. Any help is much appreciated. Thanks

<div id="othermain"><p>
Is your big day approaching? Need a Wedding Dress, Bridesmaid Dress or any Bridal Wear altering or remodelling? You are definitely looking in the right place, this is our speciality! <br><br> At Bobbin Alterations, 
we want to make sure that your dress is the perfect fit and style for you, for your special occasion. whether it be a Wedding, Prom, a dinner or any other special occasion. We understand that planning you're
big celebration can be very demanding at times, but we're here to take your worries away and make it as stress free as possible.<br><br> Looking good and comfortability is crucial, and with our help, we can tailor and alter a dress the highlights your features and make you feel wonderful.
    <div id="testimonial"></div>
    <br><br>Our standard dress alterations include:<br>
    <br> - Shortening
    <br> - Seams
    <br> - Hemlines
    <br> - Beading
    <br> - Shoulder Adjustments
    <br> - Straps
    <br> - Veils
    <br> - Zips<br>
    <br>We've had the privilege of helping with endless amounts of weddings and proms and take extreme pride in the happiness that is made through our work.<br>
    <br><br>Use the Order form to place an order, or call us on 01325 59976 with an Enquiry, to guarantee a First Class service and a truly memorable occasion.
</div>

#othermain{
    width:1024px;
    height: 480px;
    background-color:#FFFFFF;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    -moz-border-radius: 10px; /* for firefox */
    -webkit-border-radius: 10px; /* for safari & chrome */
    border-radius: 10px; /* for others (opera) */
        }
p {text-indent:8px; }

Upvotes: 0

Views: 38

Answers (1)

GolezTrol
GolezTrol

Reputation: 116110

p {text-indent:8px; }

This text-indent above can be removed. This property is especially for indenting the first line. If you don't want/need that, you can remove it and use padding instead.

You can just add a padding to the container. For instance

#othermain { 
  padding: 10px;
}

This will add a padding on all sides, keeping the content nicely inside the rounded corners.

Of course you can also add specific padding on one side. For instance:

#testimonial {
  padding-left: 20px; /* Indent this block a little more */
}

As a general tip: You can use classes as well. Instead of #main1 {, you open with .main { (notice the period). That way, you can declare a style and use it multiple times. To every block that needs the yellow background and the rounded corners, you can add the same class. That way your CSS will be much more generic and (I think) better readable.

Upvotes: 1

Related Questions