Jason 14

Hi there

I',m trying to add something to my html page using CSS instead of creating an actual image with Paint. Basically all I want to do is have a "box-shape" with a certain color appear on my webpage. Just a box, a simple box.

But I'm not aware of the correct term to use when referring to it and haven't found an answer on google. Is this possible in CSS?


Please correct me if this may not be the most desired approach to my problem, but I think I may have figured it out.

Here's the code I am using: (I basically am just using a Horizontal Rule, and changing its attributes to get the style I desire.)

<hr style="position:absolute; top:0; left:0; border:none; width:100px; height:15px; background-color:#0f0f0f;" />

1 answer

This was chosen as the best answer

i'ld go for a floated (so you can give it a specific width & height) div with a background-color

you can do it with a p-tag to if u want, or if you want to make it clickable, you can use an a-tag...

you can even put text in the box, if you don't want the text in it, leave it out :),


<div class="box"> this text will be in the red box </div>


.box { float: left; display: inline; width: 100px; height: 100px; background-color: # ff0000; }

edit: ofcourse you can use the inline-styles if you're more comfortable with that rather than classes in external stylesheets. but not recommended.

Answered about 7 years ago by Dries Delaey
  • Thank you, and I appreciate your help on this. Can I please ask you, why are inline styles not recommended? Is it because I'd have to do all the styles for every page instead of having one main stylesheet? Jason about 7 years ago
  • you've answered you're own question indeed :) if you define a class in your external stylesheet, you can use it throughout the entire website. In function of maintainability (eg when you need to change the color of your box), you'ld only have to make the changes on one place : in your stylesheet. Dries Delaey about 7 years ago
  • There is no reason at all to use a floated box and I do not recommend floating it either. Floating restricts the element placement. You do not need to float anything to set its size. Rob about 7 years ago
  • Using inline styles goes against the whole paradigm of seperating content from presentation. It bloats the HTML unecessarily (why make search-engine spiders crawl all that additonal information, which they don't need, when they could be indexing pure content) and leaves the code looking a mess ;) danwellman about 7 years ago
  • Convention over configuration FTW. Dwayne Anderson about 7 years ago