PLR Web Design

Posts Tagged ‘Boxes HTML’

Break up long texts and build reader interest by inserting some attention getting CSS boxes into your sales letters, articles and blog posts.

Here is 11 HTML Boxes Styled with Inline CSS You Can Practice With

CSS Box #1

Box #1 CSS Code

<div style=”padding: 10px; border: 1px solid #FFFF66; background-color: #FFFFCC;”>Your Text Here</div>

CSS Box #2

Box #2 CSS Code

<div style=”padding: 10px; border: 1px solid #000000; background-color: #CCFFCC; font-weight: bold; text-align: center;”>Your Text Here</div>

CSS Box #3

Box #3 CSS Code

<div style=”padding: 10px; border: 3px dashed red; background-color: #FFFF99; font-weight: bold; text-align: center; font-size: 110%;”>Your Text Here</div>

CSS Box #4

Box #4 CSS Code

<div style=”padding: 10px; border: 4px double #CC66FF; background-color: #CCCCFF; font-weight: bold; text-align: center; font-size: 110%;”>Your Text Here</div>

CSS Box #5

Box #5 CSS Code

<div style=”padding: 10px; border: 4px dotted #333333; background-color: #FFFF99; font-weight: bold; text-align: center; font-size: 120%; color: red;”>Your Text Here</div>

CSS Box #6

Box #6 CSS Code

<div style=”padding: 10px; border: 7px ridge #FF9966; background-color: #FFCC99; font-weight: bold; text-align: center; font-size: 120%;”>Your Text Here</div>

CSS Box #7

Box #7 CSS Code

<div style=”padding: 10px; border: 10px outset #999999; background-color: #C0C0C0; font-weight: bold; text-align: center; font-size: 130%;”>Your Text Here</div>

CSS Box #8

CSS Box #8 CSS Code

<div style=”padding: 10px; border: 7px groove #666; background-color: #000; font-weight: bold; text-align: center; font-size: 120%; color: #FFF;”>Your Text Here</div>

CSS Box #9

Box #9 CSS Code

<div style=”padding: 10px; border-top: 1px solid black; border-right: 1px solid black; border-bottom: 8px ridge black; border-left: 1px solid black; background-color: #FFFF99; font-weight: bold; text-align: center; font-size: 120%;”>Your Text Here</div>

CSS Box #10

Box #10 CSS Code

<div style=”padding: 10px; border-left: 10px groove #99FF99; background-color: #CCFFCC; font-weight: bold; margin-left: 60px;”>Your Text Here</div>

CSS Box #11

Box #11 CSS Code

<div style=”padding: 10px; border: 1px outset #666666; background-color: #FFFF66; font-weight: bold; text-align: center; font-size: 110%; margin: 0 auto; width: 70%;”>Your Text Here</div>

Notes

The Inline CSS codes above can also be inserted into an external stylesheet and referenced by the page to display the box.

Get more CSS Properties for these boxes.

Get more hex colors from htmlColorCodes.org

Color Names can also be used to color the text and background.