First some general coding practices:
- (Assuming this isn't a copy-paste error) You do not need multiple
<style> tags for your CSS.
All the work you are doing with the html font tags can be handled easily in CSS. This makes it easier to edit and see what you are doing. There is a bit of conversion from the sizing you do to what is used in css. I used this SO answer: How to convert to px?
You have HTML tags that are not nested correctly. The rule is "first opened, last closed". Your message1 div includes a paragraph and anchor set of tags that are intermeshed, not correctly nested.
First Version, Mostly Cleaning:
<style>
.message1 {
height: 100px;
width: 100%;
background-color: #f0f0f0;
font-size: 1.13em;
color: #6d1a76;
}
.message2 {
height: 100px;
margin-top: 50px;
width: 100%;
background-color: #3a3a3a;
font-size: 1em;
color: #ffffff;
}
.messagetext {
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 20px;
padding: 0px;
}
</style>
<div class= "message1">
<div class= "messagetext">
<p class="Roboto">
<a href="URL">URL TEXT</a>
</p>
</div>
</div>
<div class= "message2">
<div class= "messagetext">
<p class="Roboto">TEXT</p>
</div>
</div>
Ok, now that this is a bit more readable, let's start changing your CSS to get the actual output you want.
- The gap between your top div and the bottom one is because of the margin you are adding to the class .message2,
margin-top: 50px;. Margin adds distance between the element it is applied to and the surrounding elements. In this case, it is pushing everything away from its top, including .message1 div.
- A super fun thing about HTML in the browser is that we get some styles applied to our elements "for free" or, without us explicitly asking for them. This is why links look the way they do AND why we still have space between the divs after removing the
margin-top: 50px;
This can be done through a reset.css file (see: CSS reset - What exactly does it do?
for more info). To do this ourselves, I've added a little bit of reset just for this. I've set the padding and margin of div, p, and a (the three elements you use in this html) to 0. This is the first style in the style tags. Note the commas between element names: you can apply 1 set of styles to multiple elements at once that way :)
- To get rid of that color on the links, we need to add another bit of reset. To do this, we'll create another style rule, this time just for a tags. We'll set the
text-decoration: none; to get rid of the underline. Next, we'll set the color: #6d1a76; to get that straightened out.
- You dont need that messagetext class, as you are only using it to set a margin on the content of your divs. Instead, add padding-left: 20px; to your message1 and message2 classes. Padding on an outer element pushes inner elements away from the parent's edges. Same effect, in this case, as adding margin to the inner element.
- Finally, we need to get that text centered vertically. There are several ways of doing this, but the best (IMO at least) is using CSS flex. For both message divs, we'll add two styles:
display: flex; and align-items: center; to fix:
New Version:
<style>
div, p, a {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #6d1a76;
}
.message1 {
height: 100px;
width: 100%;
background-color: #f0f0f0;
font-size: 1.13em;
color: #6d1a76;
margin: 0;
padding-left: 20px;
display: flex;
align-items: center;
}
.message2 {
height: 100px;
width: 100%;
background-color: #3a3a3a;
font-size: 1em;
color: #ffffff;
margin: 0;
padding-left: 20px;
display: flex;
align-items: center;
}
</style>
<div class= "message1">
<p class="Roboto">
<a href="URL">URL TEXT</a>
</p>
</div>
<div class= "message2">
<p class="Roboto">TEXT</p>
</div>
There is more work you can do with cleaning up your CSS as well so you aren't re-writing so many styles:
<style>
div, p, a {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #6d1a76;
}
div {
height: 100px;
width: 100%;
padding-left: 20px;
display: flex;
align-items: center;
}
.message1 {
background-color: #f0f0f0;
font-size: 1.13em;
color: #6d1a76;
}
.message2 {
background-color: #3a3a3a;
font-size: 1em;
color: #ffffff;
}
</style>
<div class= "message1">
<p class="Roboto">
<a href="URL">URL TEXT</a>
</p>
</div>
<div class= "message2">
<p class="Roboto">TEXT</p>
</div>
