Home
Search
Latest images
Register
Log inLatest topics
Most Used Keywords
How to create a box filled with a color with HTML / CSS?
How to create a box filled with a color with HTML / CSS?
by Adminkunlex Thu Dec 24, 2020 9:02 pm
How do you create a box filled with a color with HTML / CSS?
Using the CSS3 Box Model, one would fill the Content area as defined in the Style Sheet. The CSS3 Box
Model is essentially a box that wraps around every HTML element. It consists of: margins, borders,
padding, and the actual content.
Explanation of the different parts:
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent
So, if we were to define the Content portion to be 200px wide filled with a light blue color, the code would be:
div {
background-color: lightblue;
width: 200px;
}
The whole webpage code (HTML5 & CSS3) would be:
<!DOCTYPE html><html><head><style>div
{ background-color: lightblue; width: 200px; padding:
25px; }</style></head><body><div>Lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</
div></body></html>
To learn more, please play with each section:
div {
background-color: lightblue;
width: 200px;
padding: 25px;
border: 25px solid navy;
}
Using the CSS3 Box Model, one would fill the Content area as defined in the Style Sheet. The CSS3 Box
Model is essentially a box that wraps around every HTML element. It consists of: margins, borders,
padding, and the actual content.
Explanation of the different parts:
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent
So, if we were to define the Content portion to be 200px wide filled with a light blue color, the code would be:
div {
background-color: lightblue;
width: 200px;
}
The whole webpage code (HTML5 & CSS3) would be:
<!DOCTYPE html><html><head><style>div
{ background-color: lightblue; width: 200px; padding:
25px; }</style></head><body><div>Lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</
div></body></html>
To learn more, please play with each section:
div {
background-color: lightblue;
width: 200px;
padding: 25px;
border: 25px solid navy;
}
Adminkunlex- Admin
- Posts : 1203
Join date : 2019-07-15
Age : 24
Location : Ikirun, Osun State -
Similar topics» Android Game: Pango Paper Color
» What is a div in HTML?
» How to create a box in HTML?
» How to make the input box bigger in HTML?
» What is a div in HTML?
» How to create a box in HTML?
» How to make the input box bigger in HTML?
Permissions in this forum:
You cannot reply to topics in this forum|
|
|
» Java app: Oxford English Dictionary 240x320.jar
» Pastor Lines Up Bachelors In Church, Asks Single Ladies To Select For Marriage (Video)
» Watch The Moment Portable Went Crazy At An Event
» Jimi Odukoya Steals The Show At Woman King's Movie Premiere
» Jimi Odukoya Steals The Show At Woman King's Movie Premiere
» Asthmatic Boy Collapses As Police Invade A Church In Delta (Video)
» Ernest Obi: Any Man Who Doesn’t Sexually Satisfy His Partner Should Be Locked Up
» Pastor Tobi, Davido, Zlatan Pray And Dine With Eniola Badmus On Her Birthday
» BBNaija: Eloswag's Mother Begs Nigerians To Vote For Him (Photos, Video)
» Asa Sings 'Fire On The Mountain' In Front Of Buhari At NNPC Relaunch
» Simi Reacts As Female Fan Rocks Adekunle Gold On Stage In Uganda [Pics]
» Banky W & Adesua Etomi Attend Mercy Chinwo's Wedding Event (Photos)
» Burna Boy Meets Mia Mottley, The Prime Minister Of Barbados (Pics)
» Waje – All Day ft. Tiwa Savage
» [Music] Adekunle Gold – 5 Star Mp3
» [Music] DJ Tunez – Already ft. Amexin
» [Music] Olakira – Polongo Mp3
» [Music] Chike – Hard To Find ft. Flavour Mp3
» [Music] Iyanya – Like ft. Davido & Kizz Daniel
» Java Game: LEGO Batman.jar
» Java Game: Lost Empire.jar
» Actor Uche Odoputa Weds In The UK (Photos)
» Comedienne Princess Lays Heavy Curses On Yomi Fabiyi And Others
» Tiwa Savage Bags Honorary Degree From The University Of Kent, UK (photos)