Why can’t I use heading tags to make my text bigger?
Heading tags have a very specific role, they are to help the user ( and search engine spiders ) understand what the topic of the paragraph sitting below that header is about. The larger the header (i.e. Heading 1) the more importance that heading has to the search engine spider and usually it is a large indicator to the user what the page is about too.
If you decide you want to use heading tags to increase your font size then you are creating a humungous title and search engines don’t like that and it will push you down the organic search results.
Don’t be a DIV! Increase font size with CSS
When you start really getting into updating your website or blog you want to do things faster and faster to fit more and more into your 24 hour day, even 24 hours isn’t enough time to do everything so you start to cut corners and standards get effected. Don’t feel bad about it, I’m a victim of this myself!
Instead of rushing your layouts and content creation on your site simply spend ten minutes setting up some divs so in future you can repeat the div.
What is a DIV?
A div is a html tag that allows you to add style to a part of text with CSS coding. Don’t worry if you don’t know much CSS I am going to show you the one this blog post is about, font sizes and line spacing.
<div id=”nameofdiv”> A div will look like this, you need to ensure you are in html mode when adding tags otherwise they won’t work.All Div’s ( and html code for that matter ) end with a closing tag like this</div>
There are two different types of Div.
- Class
- ID
You use <div class=”nameofdiv”> when you specifcy a style that will be reused by a set of web elements.
You use <div id =”nameofdiv”> when you want one web element to have its own unique style.
You can probably guess but the one we want to use is the “id” to change the font size of EVERY introduction paragraph to a page.
Step by step guide to using <Div id=””></div>
- 1. Give your div id a name but something useful and memorable like “firstpara”so it will look this <div id=firstpara”>.
- 2. Next you need to add some CSS Styling, most websites if setup correctly will have an external stylesheet so locate it and add the following code.
#firstpara {
font-size:20px;
line-height:110%;
3. Save the stylesheet and apply <div id=”firstpara>The first introduction paragraph here</div> and save the page. Your style should now be applied.
Still stuck on CSS? A total novice? You have a few options…
The free option
http://www.w3schools.com/ is the free option and was set up to make learning to code websites have a standard design level so that users get the best experience possible.
The cost but advanced guides
I am a user of online platforms like Lynda and Treehouse because they are regularly updated and give the latest technological advances so you can keep advancing your skills or learn a new skill you may not have had before but wanted to learn as well as being structured in a way that is helpful and easy to manage in terms of learning.
I hope this blog post has helped you to increase font sizes correctly, (you may have noticed I did a little bit of styling at the start of this post to show an example) if you get suck or have any questions please do not hesitate to leave a comment below I am happy to help.