Quick Tip: Styling your logo with H1
Hey everyone. Last quick tip for this week so let’s make it a good one! Everyone has a logo on their website (or most people) and not many people want to use the <img> tag to stick it on the front page so I’m about to show you how you can style your logo with the use of h1.
Step 1
We’ll start off with this code I prepared earlier in our HTML page (I’m using index.html):
<h1><a href="http://www.google.co.uk">Google</a></h1>
Now, upload index.html to your server.
Step 2
Now in your stylesheet (I’m using style.css) add the following:
h1 a {
display:block;
background-image:url(images/google_intl_en.jpg);
width:125px;
height:125px;
}
Upload that file to your sever and modify the logo to your liking.
Step 3
Now to get rid of that text then we must add in the following. Then re-upload style.css again to the server!
text-indent:-9999px;
This is a quick and easy way to style your logo and just 1 of the possibilities in CSS. Another great quick tip from Amazing Coder!
Lets see something a little more of an intermediate level huh? Everyone knows how to do this. Come on guys, raise the bar a little. How about some advanced CSS or some PHP or Ajax scripting. Not a great start
@Tommy hey thanks for commenting. We will be doing some more intermediate stuff but we wanted to start from the beginning for new people so we can gradually build up their ability. Thanks and stay tuned for more, new, great stuff!
Can I just ask why you would do it like this. Surly adding the background to a div would make more sense. You wouldn’t have to deal with making the h1 act like a block container or hide the text.
Why not use an anchor with an image inside it and leave a h1 tag to be a heading on the page, im not sure of the h1 tag should be a logo at all?, semantically h1 is a heading.
Post