SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to put a border around a paragraph

    I'm in chapter 4 of your book "build your website the right way, first edition. I'm stuck on the imaginary web site where you put a "simple black border" around a paragraph. Is there a markup in the HTML markup as well as in the CSS markup? if so, what are they. I spent approximately 6 to 7 hours trying to but a border around paragraph. I experimented with every markup I know. I went to the web sites for help and over and over again in the book. What is your suggestions for the correct markups for putting a border around a paragraph.

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,732
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    there are several ways to accomplish this ( assuming , of course your HTML is correct)

    First off.. any paragraph of content should be marked up as a <p>...</p>

    once you have done that then you can style with CSS


    p { border: 10px solid red ;}

    note: you will need to give valid SIZE ( px, em, pt ... but not %)
    note: you will need to give valid STYLE ( SOLID, DASHED, GROVE, RIDGE, DOTTED, DOUBLE , INSET , OUTSET)
    note: you will need to give valid COLOR: #HEX, color code, or rgba()


    you can add borders to individual sides too!

    p { border-bottom: 10px solid red ;}


    if you want to only have a SPECIFIC paragraph bordered then you mus use classes or ids in your mark up and CSS

    .p-bord{border: 10px solid red ; }
    <p class="pbord">...</p>

    REMEMBER ALSO your CSS mus be brought in via a LINK or reside in the STYLE tag INSIDE THE HEAD tag of your document.

    ( Well you can do inline CSS withing the tag itself, but that is really cumbersome and defeats the purpose of CSS anyway)

    hope that helps

  3. #3
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,334
    Mentioned
    214 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    if you want to only have a SPECIFIC paragraph bordered then you mus use classes or ids in your mark up and CSS

    .p-bord{border: 10px solid red ; }
    <p class="pbord">...</p>
    Of course, it will work better if you remember to check that you've used the same class in your HTML and CSS. Either p-bord or pbord would be fine, but they do need to match.
    Don't be arrogant. Be kind to a koala that thinks it's a bear.

  4. #4
    SitePoint Wizard webcosmo's Avatar
    Join Date
    Oct 2007
    Location
    Boston, MA
    Posts
    1,432
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Also, if you want to have a specific dimension of the box around the paragraph, you must add the property display:block; width and height, but dimensions are not compulsory. You can also use padding and margins.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •