CODEWITHSUNDEEP
htmlcss
Pontius
Pontius

Reputation: 79

Text spacing with different elements using CSS in HTML

Just started out with CSS and I'm currently trying to replicate a website based of a JPEG and the HTML-code for the gives site. I have a problem when it comes to the Header of the page and can't figure out how it's suppose to work.

The extract of the HTML code is:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>
        </title>
    </head>
    <body>
        <header id="overskrift">
            <h1>Informatikeren</h1>
            <br>
            Din største kilde til nyheter som allerede er skrevet på online.ntnu.no
        </header>

And the CSS I currently have is: 

#overskrift {
    background-color: black;
    color: white;
    text-align: center;
    height: 100px;
    display: block;
}

With my CSS it currently looks like this: Using my CSS

This is how it's supposed to look: The finished result

The font layout is not of importance and sorry for the text being in Norwegian.

Have tried using several different line heights etc, but that seems to make it worse.

Anyone got a good idea of how to code it correctly in the CSS? Altering the HTML isn't and option.

Thanks!

Regards,

Upvotes: 1

Views: 44

Answers (2)

Matthew3k
Matthew3k

Reputation: 191

You will need to apply styles to the H1 element directly. For example:

#overskrift h1 {
  font-family: Arial,sans-serif;
  font-size: 20px;
}

You might also declare "line-height" and "letter-spacing" properties to further style your text to match.

Upvotes: 0

Zaqx
Zaqx

Reputation: 1442

Your HTML should not contain a <br>. In addition to that you want to remove some of your CSS and add a global reset for margin and padding.

Note: For the example below, since you said changing the HTML was not an option, I’ve left the <br> in and am negating it with CSS. Again your HTML should not contain a <br> for this kind of UI.

* { margin:0; padding:0 }

#overskrift {
    background-color: black;
    color: white;
    text-align: center;
}

br {
  display: none;
}
<header id="overskrift">
    <h1>Informatikeren</h1>
    <br>
    Din største kilde til nyheter som allerede er skrevet på online.ntnu.no
</header>

Upvotes: 2

Related Questions