How to give your website a little more style

Ok, so by this time you must have a basic understanding of HTML. However your website is a bit lacking in…style…

You have something that looks like this on your website, an H2 title in the default Times New Roman fontscreen-shot-2017-02-01-at-1-27-30-pm

and this is what the HTML code looks like in your text edit.

screen-shot-2017-02-01-at-1-27-46-pm

First you must figure out what font you want to change this to, and for that you need to know the font names which you can find here https://en.wikipedia.org/wiki/Font_family_(HTML). Based on the fonts listed here we want the title to be in the Verdana font.

So you want to go back to your text edit, and change the HTML code so the H2 title will show up on your website in the Verdana font.

The first thing you do is insert the style tag followed by an equal sign.

screen-shot-2017-02-02-at-2-14-48-pm

After that you must define that you are focusing on the font with the font-family tag followed by a semi-colon. After the semi-colon you must insert the font that you want your H2 heading to be in, which in this case is the verdana font.

screen-shot-2017-02-02-at-2-21-58-pm

Then follow the font name with a semi colon and surround the font-family tag and the verdana tag with quotation marks and a less than sign (>).

Once you insert the HTML code into text edit, your H2 title should now look like this.

Screen Shot 2017-02-02 at 2.55.35 PM.png

Now your H2 title is in the verdana font, which is much more appealing than the Times New Roman you had before, but you still want to change it a bit stylistically. You think maybe color ?! Luckily for you it is almost the same method as changing the font.

First you must look up the html color codes which can be found here  http://htmlcolorcodes.com/color-names/. Based on the color codes listed here we want to change the font color to white, so it’ll stand out more on the website.

So again you want to go to your text edit and change your HTML code in order to get your H2 title to be white.

First you want to add the color tag to identify that is what you are changing style-wise. Follow the color tag with a semicolon.screen-shot-2017-02-06-at-8-43-03-am

After the semicolon insert the name of the color based off of the list above. For this example we are using white, so your HTML code should look something like this.

screen-shot-2017-02-06-at-8-43-25-am

Once you enter this into your HTML code this is what your H2 title should look like on your website.

screen-shot-2017-02-06-at-8-50-02-am

The style tag allows you to personalize your website a lot more, and once you have completed the basics (which you have now) you can go even deeper into the stylistic aspects.

Advertisements

~ by jaa646nyuedu on February 6, 2017.

6 Responses to “How to give your website a little more style”

  1. Most engaging blog post. The way you have explained each step with pictures and colors kept me gripped.

    Jigna

  2. Most engaging- this web page used a quirky sentence/example to create a tutorial. It uses bright colors and screenshots of HTML code in each step, as well as highlighted keywords. -Judy Gu

  3. most engaging–this post was visually fun to read, it was engaging because the coding we needed to use was highlighted in red so you really knew what was important

  4. I think this is the most thoughtful blog post because the author not only provided separate steps for changing the font family but also the font color. The most helpful aspect was the inclusion of red highlighted words that clearly instructed which tags to use.

    — Stanley

  5. I believe that that this is the most engaging because the aesthetic formatting of the blog made it incredibly easy to follow and understand which is important for beginner coders. All the information is easily recognized and organized. – Anastasiya Muravyeva

  6. I think that this is the most engaging! I like the color scheme and the styles that you used. It was visually fun to read and you explained each step with pictures and colors that made me want to keep reading and kept me engaged

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: