Change the colors and font style or size of an HTML Website

Posted on by Ninja Ken

So this is a continuation of learning how to build a basic website that might but boring but at least you get to understand the process. So there is the lazy way to do it and the technical way. I’ll start with the lazy way! yup ain’t nobody got time for this.

So I usually grab the Google fonts cause its open source, looks nice and nobody wants to pay $450+ to use a font for a personal blog about your cat, maybe 20 people are going to look at and then get old after a few few years.  So here it is is.

The first thing you need to do is understand how to find the tag or element of your website for example, lets say you have a section tag with an id of pizza or header with a class of ninja. You need to create a css file called style.css In case you don’t know what a class is, the class can be used multiple times in different places so colors would be good. An id is only meant be used once.

<!DOCTYPE html>
<html>
<head>

   <meta charset="utf-8">
   <title> My First Website </title>
   <link rel="stylesheet" href="css/style.css" type="text/css" />

</head>
<body>

    <header class="ninja"> Welcome Everyone !</header>

    <nav>
         <ul>
             <li><a href="index.html"> Home </a></li>
             <li class="ninja"><a href="about.html"> About </a></li>
             <li><a href="contact.html"> Contact </a></li>
         </ul>
    </nav>

    <section id="pizza">

        <h1>My First Heading</h1>

        <p>My first paragraph. and let</p>

    </section>

<footer> John Doe's Website </footer>
<script src="js/global.js">
</body>
</html></code></pre>
&nbsp;

Ok now that you see the top code,

Go ahead don’t be shy, open up that style.css file and start changing the color first. Save that style.css file in a folder called css.  Make sure the index.html file is outside of the css folder. Here’s a picture.html-tree-directory

/*   this code is inside the style.css file */


header.ninja { color: blue; }

section#pizza { color : orange; background-color: red;}

 

So you’re probably thinking that’s fucking easy and anyone could do it, that’s right!

So the background is red but what about more colors? Easy, you will just have to learn how to color hex value or use Photoshop to find the gradients/rgb.  so black would be #000; or #000000;
or white would be #fff; and if you wanted a medium grey, it would be #777777;. The colors go from 000000 all the way up to FFFFFF. These are hex colors, its sort of hard to explain but basically colors have been calculated to show all colors digitally in terms of RGB: red, green, and blue with numbers ranging from 0 to 255 for each main color. It works, there’s some awesome science behind it but it does and I don’t want to get into right now.

So now let’s go to fonts.  Changing the font is pretty simple.

if you want to change the basic fonts to something that is built int to most web browsers,
you have to know your basics like Arial, Impact, Times New Roman, Georgia, etc etc.  But that gets old really fast, so let’s check out what Google has other free fonts have?  So you can add that code in your head of the html. You can also use a bunch of different free fonts online or purchase custom fonts from Adobe another other third party vendors. Here’s the easy way for now.

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>

And in your css, you should add something like this

 

section#pizza  
{ 
font-family: 'Open Sans', arial, sans-serif; 
font-size: 32px;
}

 

Ok so now you’re like why is Arial and sans-serif included after the open sans? That’s called a fall back, like car insurance, Life isn’t perfect 100% and coding is even worse, so it’s a back up in case the font style doesn’t generate with your old browser or device. There’s also other ways to change the size instead of px or pixels. There is em, rem, or % or vm. Stick with pixels for now. you’ll get to mess around with that later.

So now you can change the font, color, and even the background color. The other method of adding fonts requires you to the @font-face rule.

@font-face {
  font-family: 'Whateverfont';
  src: url('Whateverfont.woff') format('woff'),
       url('Whateverfont.ttf') format('truetype');
}

body 
{
  font-family: 'Sucks', arial, sans-serif;
}

So how come you don’t use the traditional method? Web browsers and certain servers can be slow and they don’t work well with different font extensions. Get a fast server to put your website on, use a good browser and everything should be OK.

 

 

Comments are closed.