Banner - text only

HTML & CSS
1

I am trying to create a banner which is text only. Its to help me get past problems with responsive design.

I tried using
<center>
<h1>My website name</h1><br>
My website slogan here
</center>

I am not an expert in the finer points of html. The gap between the title is far too big. How can I get round that

2

A few things:
#1 use CSS to style (space, fonts, color, etc)
#2 the CENTER tag is deprecated ( assuming you are using HTML4 and up) , and anyway you really don need it
#3 the BR is OK, but you really don’t need it.

here is an example:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
 .banner { 
 		width:960px; margin:0 auto; /* size of banner, also centers the color background*/
   		text-align:center; /*centers-text for all child elements!*/
   	 	padding:0;
		font-weight:normal;
		font-size:400%;
		background:  orange;
		text-shadow: 0 1px 0 #fff;
		padding: .5em 0 ;

 }
 .banner small {
	 display:block; /* see you dont really need the br*/
	 font-family:sans-serif; font-size:40%;
	 margin: .125ex 0 0  0 ; /* determines space from site name, 1st # is the value for the space left at the top... 1ex=same space as the height of the  letter'x' ( might as well use good typography!)  */
 }
.banner h1 +div { font-weight: bold; font-family:sans; font-s
 </style>
</head>
<div >
	<h1 class="banner" >My website name<br><small>My website slogan here</small></h1> 
	
<div>
<body>
</body>
</html>

hope that helps

3

Yes - that does help. Though I would change the orange background though