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

So this is a continuation of learning how to build a basic website that might but boring as shit 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 that shit.

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 few pages that maybe 20 people are going to look at and 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 what the fuck is arial and sans-serif doing in the back of the open sans? That’s called a fall back, like car insurance. shit doesn’t always go perfect 100% so it’s  back up in case the font style doesn’t work. Of course the code to change the font size is there. There’s also other ways to change the size instead of px or pixels. There is em or % or vm. Stick with pixels for now. you’ll get to fuck around with this 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: 'Sucks';
  src: url('Sucks.woff') format('woff'),
       url('Sucks.ttf') format('truetype');
}

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

So how come you don’t use the traditional method? cause it sucks. Web browsers and servers can be slow and they don’t work well with different font extensions, it like having to cats that don’t get along and then you got to get the right cat food because they are picky eaters and they have to be in the right mood to eat.  Get a fast server to put your website on, use a good browser and everything should be OK.

 

 

2 thoughts on “Change the colors and font style or size of an HTML Website

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.