I'm self-teaching myself web design.
I have a div and wanted to add color to the background of my icon so, my CSS looks like this
.icon {
width: 50px;
height: 20px;
}
.icon h3 {
background-color: yellow;
}<div class="icon">
<h3> google </h3>
</div>This is how it looks:
But I expected it to look like this (don't mind the font)
Why isn't it automatically placing all the h3 elements in the div?
As a background for your question, you need to know that most html elements have predefined CSS rules that normally include things like margin, padding, line-height, display among others. Those definition affect the way elements look and behave by default. So you need to use your browser's developer tools (F12 on most browsers) and inspect the specific element to see what styles are applied. In your specific case, what can be affecting is margin on the h3 element among other things.
In your specific case what you require can be achieved without a div but using only the h3 element. If you require a div it can also be achieved, but it complicates things a little bit since you have to be concerned over two elements instead of one.
What is important to mention is that the usage of fixed widths and heights is not a good idea for such elements as the text can vary in length and it will cause the icon to look broken.
Here's an example of both.
h3.icon {
width: 64px;
height: 20px;
display: inline-block;
background: yellow;
padding: 10px;
text-align: center;
border-radius: 4px;
}
.icon {
background: yellow;
padding: 10px;
display: inline-block;
width: 64px;
border-radius: 4px;
}
.icon h3 {
margin-bottom: 0;
margin-top: 0;
text-align: center;
}<h3 class="icon">Google</h3>
<br>
<div class="icon">
<h3>Google</h3>
</div>
The way you stated isn't the best practice, however, if you really want to implement your way then you must know the following:
1. Default style sheet and resetting:
Every browser has its own predefined stylesheet which affects many aspects especially the margin and the padding for all HTML elements, and as a general rule, any website first CSS line should be overriding this default behavior.
There are some ways to override these values, but as a beginner, you can use this:
* {
margin: 0;
padding: 0;
}
But this is a bad practice also, kind of performance issues, because using * means that you tell the browser that it should get all available HTML tags on earth and apply the style for them, another perspective - actually the formal one - is to mention all used tags in your website instead of *:
div, span, h1, h2, h3, h4, h5, h6, p, ul, ol, li ...{
margin: 0;
padding: 0;
}
2. Elements display values (Block-level elements and inline elements)
You've used h3, div which are block-level elements, and h3 tag has its own default font size which will not be fitted - as is - in the specified space for its div container 50px * 20px, so to workaround it you can change the font-size of the h3 to be a percentage of its parent container size.
This is a full snippet:
<!DOCTYPE html>
<html>
<head>
<style>
* { /* ! Don't use asterik (*) and replace it with all possible tags */
margin: 0;
padding: 0;
}
.icon {
width: 50px;
height: 20px;
}
.icon h3 {
background-color: yellow;
font-size: 85%;
}
</style>
</head>
<body bgcolor="gray">
<div class="icon">
<center> <!--Center the h3 in the div-->
<h3> google </h3>
</center>
</div>
</body>
</html>Remove background-color from h3
and add it to .icon
.icon {
width: 50px;
height: 20px;
background-color: yellow;
}
The problem is that here you are setting all titles with size h3 with yellow background:
.icon h3 {background-color: yellow;}
What you want is to set background-color: yellow to the entire div. The result is:
.icon {
width: 50px;
height: 20px;
background-color: yellow;
}
Also, your div is a bit small, try setting higher values of width and height in order to better visualize the result.
