- HTML Colored Box
- Step by Step Guide to Make HTML BOX
- Leave a Reply Cancel reply
- You Might Also Like
- How to Create Figure Caption HTML | Advanced Guide
- How to Select a Default Value for an HTML Radio Button?
- HTML Table Spacing Between Rows and Columns
- The Best Way to Use HTML Inline and Block elements
- Top 10 Most Important HTML Input Tag Attributes to know
- How to Create a Coloured («Colored») Box in HTML/CSS
- How to put text into a box that has a background colour
- How to Create a Coloured («Colored») Box in HTML/CSS
- Prerequisites
- Creating a Coloured Box
- Demo
- Browser Compatibility
- thesitewizard™ News Feed (RSS Site Feed)
- Please Do Not Reprint This Article
- Related Articles
- New Articles
- Popular Articles
- How to Link to This Page
- How to add left, right, bottom & top border in HTML CSS
- Using CSS border property.
- Using CSS border-style, border-width, and border-color properties.
- Add Bottom Border in HTML and CSS
- 1. Using border-bottom
- 2. Using Border Width, Style and Color
- Create Left Border in HTML and CSS
- 1. Add left border using border-bottom
- 2. Add left border using Border Width, Style and Color
- Create Right Border
- 1. Create right border using border-bottom
- 2. Add right border using Border Width, Style and Color
- Add Top Border HTML & CSS
- 1. Using border-top
- 2. Using Border Width, Style and Color
- About
- Recent Posts
HTML Colored Box
In this article, we will see how to create a colored box in HTML. We can not create an HTML box without the help of CSS.
Step by Step Guide to Make HTML BOX
Follow these steps to create your box easily:
- We need to create a tag in HTML to create a color box. If you want to put text inside that box, put it inside a tag.
- Then select your div in CSS and use the “background-color” property and set the color you want as bg-color as value, ex: red, pink, black, etc.
- Then use the “width” property to specify the width of your box and give a value in percentage %. Because only then your box will be device friendly for all devices.
- Finally use the “height” property to specify the height of your box, which you can also give a value in pixels. Then
- We can also set the padding of the box using the “padding” property, If you have text inside the box you can add padding to avoid touching the edge of your text box.
If you want to change the color of the box, you need to change the value of the “background-color” property.
Leave a Reply Cancel reply
You Might Also Like
How to Create Figure Caption HTML | Advanced Guide
How to Select a Default Value for an HTML Radio Button?
May 11, 2023
HTML Table Spacing Between Rows and Columns
The Best Way to Use HTML Inline and Block elements
Top 10 Most Important HTML Input Tag Attributes to know
May 19, 2022
How to Create a Coloured («Colored») Box in HTML/CSS
How to put text into a box that has a background colour
How to Create a Coloured («Colored») Box in HTML/CSS
I was asked by a visitor how he could create a box, give it a background colour («color» if you use a different variant of English), and insert text in it, the way some printed magazines and books sometimes place additional information in a separate box or panel on a page.
Prerequisites
This article assumes that you know a bit of HTML and CSS. Otherwise you will be at a loss as to where to put the code I supply below or how to adapt it for your purpose.
Creating a Coloured Box
The box itself can be any block tag in HTML. Many, if not most, webmasters use a for this purpose.
Let’s say that you have the following HTML snippet that you want to make into a box.
The CSS to give the DIV block a background colour is, predictably:
The background-color rule above specifies the HTML colour value of #cfc . You can of course use any other colour you like. Most web editors and plain text editors (other than the rudimentary Notepad that comes with Windows) have a colour picker, allowing you to visually select a colour to get the appropriate numerical value. Alternatively, if you prefer to do things the hard way, you can also consult the list of colours and their values on Wikipedia.
Unfortunately, although the above code is correct, if you use it as it stands, you will find that the background colour will hug the text you place very closely, causing the entire thing to seem barely like a box. To make things more box-like, you will probably want to add some space to the area around your text, and perhaps even give it a border.
The padding rule adds 10 pixels to the space between your text and the margins of the box, and the border rule creates a 1-pixel thick solid green border. You can of course change the values given here (ie, the number of pixels and the colour) to suit your page’s design.
If you’re posting to a blog that allows you to insert HTML, but does not make it easy for you to change the style sheet, you can even put those rules into your DIV tag.
Demo
The above code produces the following box.
This is a demo box to illustrate the code given in thesitewizard.com’s tutorial on creating coloured boxes.
Browser Compatibility
The CSS given above should work in all current browsers. It will probably even work in most older browsers too, including Internet Explorer 6 (which is most likely extinct today).
Copyright © 2017-2018 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
thesitewizard™ News Feed (RSS Site Feed)
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
Please Do Not Reprint This Article
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
Related Articles
New Articles
Popular Articles
How to Link to This Page
It will appear on your page as:
Copyright © 2017-2018 Christopher Heng. All rights reserved.
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.
This page was last updated on 20 December 2018.
How to add left, right, bottom & top border in HTML CSS
You can add borders to a parts of a webpage in two ways:
- Using CSS border property.
- Using CSS border-style, border-width, and border-color properties.
The border is a line that occurs between the padding and margin in HTML and CSS.
Using CSS border property.
The easiest way to create a border is by using the CSS border property. The structure of the border property is:
border: border-style border-width border-color;
.red-box < border: solid 2px red; > I have a red border around me
I have a red border around me
Using CSS border-style, border-width, and border-color properties.
An alternative method of adding borders to elements on a webpage is by using CSS border-style , border-width , and border-color properties.
.blue-box < border-style: dashed; border-width:5em; border-color:#0000ff; > I have a red border around me
I have a blue border around me
For this second method, you have to set the border-style property otherwise, borders will not appear on your webpage.
Add Bottom Border in HTML and CSS
The bottom border is usually used for underlining links or showing the active page on a navigation bar. There are two ways of setting the bottom border in CSS:
1. Using border-bottom
You can use the border-bottom to add the bottom border on text(heading, lists, paragraphs) or containers(div, section, nav, footer).
2. Using Border Width, Style and Color
You can also set the bottom border using the border-width , border-style and border-color properties.
Create Left Border in HTML and CSS
You can create the left border in CSS:
1. Add left border using border-bottom
You can use the border-left to create the left border on text(heading, lists, paragraphs) or containers(div, section, nav, footer).
2. Add left border using Border Width, Style and Color
You can also set the left border using the border-width , border-style and border-color properties.
Create Right Border
You can create the right border in CSS:
1. Create right border using border-bottom
You can use the border-right CSS property to create the right border on text on different parts of a HTML web page.
2. Add right border using Border Width, Style and Color
You can also set the right border using the border-color , border-style and border-width CSS properties.
Add Top Border HTML & CSS
There are two ways of setting the top border in CSS:
1. Using border-top
You can use the border-top to add the top border on text(heading, lists, paragraphs) or containers(div, section, nav, footer).
2. Using Border Width, Style and Color
You can also set the top border using the border-width , border-style and border-color properties.
Hi there! I am Avic Ndugu.
I have published 100+ blog posts on HTML, CSS, Javascript, React and other related topics. When I am not writing, I enjoy reading, hiking and listening to podcasts.
Front End Developer Newsletter
Receive a monthly Frontend Web Development newsletter.
Never any spam, easily unsubscribe any time.
About
If you are just starting out you can test the waters by attempting the project-based HTML tutorial for beginners that I made just for you.
Okay, you got me there, I made it because it was fun and I enjoy helping you on your learning journey as well.
You can also use the HTML and CSS projects list as a source of projects to build as you learn HTML, CSS and JavaScript.
Start understanding the whole web development field now
Stop all the confusion and start understanding how all the pieces of web development fit together.
Never any spam, easily unsubscribe any time.
Recent Posts
Copyright © 2018 — 2023 DevPractical. All rights reserved.