Beginning Web Development : Inline Styles and Gradients

In all the books I have read about web design/development most of the authors say something along the lines of “HTML is the workhorse of the internet.”  While this is true, for very basic sites, CSS is the workhorse for design.  Everything that makes a site looks good is (usually) done with a CSS.  In the rare cases that it is not the styling is usually done via code (like JavaScript or PHP.)

Inline styles are handy when you are looking to change one or two single elements.  Elements that are not going to be changed on any other page or are unique for some reason.


The above code would show a something like so:


We can make it more interesting by adding a color:

<h1 style="color:red"><italic>Hello!</italic></h1>


You can also do inline styles in the same way you do a CSS file.  You have to separate the CSS section with some element tags and the styles will be at the top of the page, before your content.

Here is the current opening to our test website.

<!DOCTYPE html>
<html lang="en">

<meta charset= "utf-8">
<title>Mere Magic Designs Tests Site</title>
<link rel="stylesheet" href="style.css"/>

<a href = "index.html">Home</a> || 
<a href = "portf.html">Portfolio</a> || 
<a href = "vocab.html">Vocabulary</a> || 
<a href = "about.html">About</a>

The styles are all held in a CSS file that is separate from the rest of the page.  We can add some styles by adding a style section in the <head> tag.

<!DOCTYPE html>
<html lang="en">

<meta charset= "utf-8">
<title>Mere Magic Designs Tests Site</title>
font-family: Helvetica;}

<a href = "index.html">Home</a> || 
<a href = "portf.html">Portfolio</a> || 
<a href = "vocab.html">Vocabulary</a> || 
<a href = "about.html">About</a>

Now the style is part of the web page.  It will act just like the link we had…

<link rel="stylesheet" href="style.css"/>

…but it is now part of the web page and will display as such.  This means that if a person looks at the code for your page they will be able to see all of the styles you used and how you used them.  It also removes the compartmentalization that makes CSS useful.  One CSS file can work on many pages and many sites.  Having a separate CSS file will also keep your style methods a secret (unless you know where to find them. 😉

You can do some cool things with CSS. Such as gradient backgrounds or sections (you may be more familiar with the popular term Ombre) .  To do this I recommend using as web based CSS Gradient generator.  There are quite a few to choose from and are all basically the same.  They contain an area to build your gradient and a text box where the CSS code is.  Just copy the code and paste it into your CSS document.

Here is the code for the gradient on the test site.

background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top,  #1e5799 0%, #207cca 17%, #2989d8 41%, #56f756 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(17%,#207cca), color-stop(41%,#2989d8), color-stop(100%,#56f756)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #1e5799 0%,#207cca 17%,#2989d8 41%,#56f756 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #1e5799 0%,#207cca 17%,#2989d8 41%,#56f756 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #1e5799 0%,#207cca 17%,#2989d8 41%,#56f756 100%); /* IE10+ */
background: linear-gradient(to bottom,  #1e5799 0%,#207cca 17%,#2989d8 41%,#56f756 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#56f756',GradientType=0 ); /* IE6-9 */

The first line tells the browser that the background will be #1E7599 if the gradient does not load correctly or the browser is really old.  Next we tell Mozilla (Firefox) that the gradient is linear. At the top the color is going to be #1E7599, when we have hit 17% of the screen (whatever the page is being viewed on) we are going to change to color #207CCA and so on.  We know that this line is for Mozilla because there is a comment at the end of the line letting us know.

Since the browsers display things differently it is good practice to have versions of the code for each browser your customers may use.  This is one of the reasons I recommend that you use a gradient generator, there are many browsers our there, and they change.  A gradient generator will cover the most common browsers for you.

You should also make comment your code.  You may forget why you put in a line or someone else may inherit your code and not know why you did something.

Visit the test site to see what it looks like now.


Beginning Web Development : Planning Basics

So I got all excited with my plan to build a test page and do a tutorial and I forgot the planning phase of the website.  Silly me.

Planning is kind of important and should be one of the first things you do.  Planning the site can be really simple, it was for the test page.  It can be complicated as you become more advanced and need the site to do different things.

Since the test site is super simple, I sketched out a layout on some paper and colored it in with some crayons.  I want to see the basic layout and know when I have finished designing the site.  When we start adding more complicated code to the page we will plan out the code.

Today it is just planning the layout.  Scratch paper, a pen, and crayons are just fine.  You can be more professional and build it in MS Powerpoint, Adobe Photoshop, or a free variant.

My quick website layout. I have three ideas on what I want the layout to be. I can also try out some coloring schemes.

My quick website layout. I have three ideas on what I want the layout to be. I can also try out some coloring schemes.

I sketched out three quick layout ideas.  I am discarding the one on the bottom right.  It is to “different” which can lead to low popularity of the site.  The other two are quite common layouts and will not alienate any viewers. We can easily try out both styles with our CSS file and not make any major alterations to the HTML code.

I have a personal preference to have the navigation bar on the left side of the page.  Especially when there are not going to be any other secondary columns.  The body section seems ridiculously large without a smaller secondary column.

On the other hand we are going to have a portfolio and it will be a bit cramped if you do not have that little bit of extra width.  I think we will go with option 2, top right.

The other nice thing about sketching out the layout is we can try color combinations.  We can get a sense of what things will look like with different colors.  I like the way that the body looks white, and the green to blue gradient for the back ground.  I think that the nav bar should probably be white also, so it does not disappear between the banner and the body of the email.  The footer of this site does not have anything very special in it.  I am going to leave the background clear so you can see the background behind it.

There is my quick and dirty post about planning.  Don’t be like me and forget to do it!

Beginning Web Development: Let’s Add Pages!

We have a single page already built.  We do not want to put ALL of our information on the one page, so we are going to divide the information up across a few pages and link them together.

Until you link up your pages you really only have a web page.  A website is a collection of web pages that share a theme or purpose.  Using a .css will give you the theme and your words and images will show your purpose.

Lets get started.

I am going to include some images this time so you can see what I am doing, instead of being lazy and just telling you.

The very first thing you should do is make a folder for your test site, if you have not already done so.  This will be important to keep the website flexible and easy to code.

When building additional pages it is important to start off with a page that you can use as a template.  A page that has all the key elements that you can build upon or modify as needed.

To make a template page we are going to add code our index.html page.  We are going to add the links for our new pages, even though we have not built them yet.

There are many types of links.  We are going to do a relational link for our navigation area.  The route the browser takes to the next page is relative to the current page.  This is why it is important to keep everything in the same folder.

I have chosen to make three additional pages; a page for a portfolio, an about page, and a vocabulary page. I plan on naming them portf.html, about.html, and vocab.html.  Since we know what we are going to call the pages we can create the links, even though they will not work yet.

The code to make a word a link looks like so;

<a href="pagename.html"> Visible Link Words</a>
I have added two "pipes" || to separate the words on the navigation.  The "pipe" symbol is shift + \.

The links for the navigation area in a line. Kind of hard to read…

When we string them together with the rest of the links it looks like this.  Kind of confusing when you leave them strung together.  Since “blank spaces” do not matter to HTML we can organize them however we want.


Reordering the links is easier to read. This works because HTML does not care about blank spaces.

Once we have the navigation set up correctly we are going to copy the file (use Save As and rename the file to the new name.  Don’t forget the file type should be .html!)

All of our page files plus the .css

All of our page files plus the .css

Once this is done you can go in and change the content on the pages.  I encourage you to start with the about page.  It is one of the most important pages in your website.

The about page contains information that people NEED to know about your site.  You should include mission statements, history and why your services are better/different than others.  Remember that a website can be seen by anyone with a connection to the internet.  Do not include very personal things that can leave you victim of Identity Theft or scams.

The shell for the base of our about page.  Make sure you put your information in here. Things that you want to share with the world.

The shell for the base of our about page. Make sure you put your information in here. Things that you want to share with the world.

It is perfectly fine to have a website with only two pages.  The home page (index.html) and an about page (about.html.)  The home page would display any current and pertinent information that customers would want to know and the about page would only be changed if something important changed (you moved to a new building and have a new mailing address, for example.)

There are many sites out there with two or three page websites (a contact page is also common if you have different depts or people that take care of questions/issues.)  You can have as many or as few pages as you like.

This is all for this post.  Check out the website to see how the changes look.

I will be doing another post detailing some of the changes that were made to the CSS and the styles on the vocabulary page.





Beginning Web Development : Let’s Make it Pretty!

The web is full of pages that look the same.  To make ours stand out we should make it different, add some color and formatting.  We can do this two ways, but we are going straight to the best way, an external style sheet.

A style sheet is a single document that has all the formatting stored in it.  This way you do not get confused with all the HTML elements and the style tags.

To create a style sheet in Notepad you are going to save a blank document with the file extension of .css (it stands for cascading style sheet.)  Just like last week we will go to File ->Save As, change the “Save as Type:” field to “All Files” and in “File Name:” enter our file name with the extension we want.  I chose to do style.css as my file name.  It is also in the same folder as my file index.html.

The next thing we have to do is tell the browser that we have a file it needs to look at so our website will look pretty.  We have to add a line into our <header> element.

Here is what the first few lines of our index.html file look like.

<!DOCTYPE html>
 <html lang="en">
 <meta charset= "utf-8"/>
 <title>Mere Magic Designs Tests Site</title>
 Home || Vocabulary || About

We are going to add a new line of code right after the <title> element.  It is going to tell the browser to look for our formats in the style.css file we made.

The new header should look something like this (depending on what you named your file.)

<!DOCTYPE html>
<html lang="en">

<meta charset= "utf-8"/>
<title>Mere Magic Designs Tests Site</title>
<link rel="stylesheet" href="style.css"/>

Home || Vocabulary || About

You may notice that we did not do a separate end element </link> on this line.  Since all the code is contained in the one line we are able to take a short cut and just use the /> at the end of the line to tell the browser we are done with the code and it can move on.

Basically we have told the browser that we are adding a stylesheet and that the name of the style sheet is style.css.  We are also telling the browser that the location of the stylesheet is relative to the location of the file index.css.  Meaning they are in the same folder.

Now we should create some coolness for our page and learn about Cascading Style Sheets.

There are a few things you need to know about how a stylesheet is set up to make it work properly.

Each element in the HTML document can be styled how ever we want.  We can make words red or blue, big or small.  We can make all the <h1> elements line up on the right instead of the left and change the fonts if we want.  We can make the background of our page a picture or just a color and add a boarder to the <nav> element if we so choose.  I recommend playing with these things and looking up all the things you can do on the internet, w3schools is a good place to start.

To make a change to the way the web browser will display things you must first select the element you want to change.  Let us make <h1> element bold(er) and change the font to Helvetica.  To do this we enter the below code:

h1 {
 font-family: "Helvetica", sans;

We have told the browser that anything with an element of <h1> should be in the font Helvetica, if Helvetica is not installed on that users computer it should be displayed as a sans-serif font.

More Vocabulary!

Font: how the words look on a page.  Some fonts are really easy to read and other hard.  Ariel, Helvetica, and Times New Roman are all examples of fonts.

Serif: A serif is a “fiddly bit” on a font.  Times New Roman has lines hanging off the letters. Open a MS Word document and check out the different fonts.  Find out which fonts have a serif.  Fonts with a serif are considered more formal.

Sans-Serif: Sans translates to “none” or “without.” So a Sans-Serif font is a font without a serif.  No “fiddly bits!”  Ariel is a Sans-Serif font.  In most of the things I create I use sans-serif fonts.  I feel they are cleaner and easier to read.

Hex: No you are not going to curse anyone.  This is short for hexadecimal, or six decimals (characters in this case.) It is the way we tell the browser what color things should be.  You can use other ways but I find hex colors to be easier to write and understand.  White is #FFFFFF and black is #000000.  I recommend looking up the colors you want to use on the internet so you do not surprise yourself.

Ok, back to making the web page prettier.

In addition to changing the fonts we can change the color of the page and maybe make the footer font smaller than the rest.  The footer text is not as important as the rest of the text, so we should make it smaller.

With those changes the file style.css looks like so:


h1 {
font-family: "Times New Roman", Times, serif;

footer {
font-family:"Ariel", sans-serif;
font-size: 10px;

It is important to get the parts of these correct.

First you have the name of the element you want to change, body, h1 or footer.  These are followed by a set of “curly braces” {}.  This tells the browser what is being changed.

Once inside the braces you name what you are changing, background, font-size, font-family, etc, followed by a colon.  Then you tell it what you want the change to be, Hex color change, size change in pixels, whatever the change is.  End the change with a semi colon so the browser knows that you are done with that line.  If you do not end the line with a semi colon the change will not be made.

Play with making changes.  To the way your page looks.  Check out the w3schools website and find out some of the other changes that you can make.  In addition there are many tutorials out there that you can check out if you want more examples

Click here to see what my test site looks like now!

Beginning Web Development : Let’s Make a Page!

… and learn some vocabulary.

A lot of books teach you to build the site, then find hosting.  I always thought that was a bit like putting the cart before the horse.  You need a place to put your site even before it is made.  Set up your hosting first.  Check out my previous post on getting your hosting set up to make that happen.

All of my coding is happening in Notepad.  Yes, that wonderful staple of MS Windows software.  It is free and it will not fail you.  There is other free coding software available, but I want you to know how easy it is to do this yourself and with stuff you already have.

Notepad can be found in the Accessories folder of MS Windows.  Find it and open a new document.

Once you have opened your Notepad document we are going to save it with the correct file extension, .html or .htm.  This will prevent issues in the future

We are going to save the file as index.html. To do this we need to go to File -> Save As. You will need to change the “Save as Type” option to “All Files.”  On the “File Name:” line type in index.html.

We are saving the file as index.html for a reason.  Most browsers will not load the front page of a website unless it it labeled home.html or index.html.  Some hosting sites will let you flag a file to load first, but we are using free stuff and you should not expect a free host to allow that.  In addition it is good to learn to do things the smart way to prevent issues later on.

You may also want to make a file somewhere for you to put all your files.  You do not want to lose anything.  I made a file called Test Site and saved index.html in it.

You should test your index.html to make sure it is saved correctly.  The icon next to it should be the icon of whatever browser you use the most.  Internet Explorer will have the IE logo, Firefox, Chrome, Safari or Opera will have their respective logos next to the file name.  If you have a page icon next to your file name, the file was not saved with the correct file extension and will not open in a web browser.

If you double click on the file index.html it should open your web browser and show a blank page, and the file path in the address bar.

Try it!

We should go over some vocabulary before I get to far into this and lose you.

HTML: HTML is an acronym for Hypertext Markup Language.  It is the language that web browsers can read and understand.  It is what allows the browser to know what goes where.  Currently most sites are using HTML4 but HTML5 is the newest update to the language.  HTML5 it is what we will be using.

elements: HTML works by using elements to tell the browsers what certain things should look like. Elements are surrounded with <>.  An example is <body> (start the body) or </body> (end the body.)

A basic shell of a website will look like this:

<!DOCTYPE html>
<html lang="en">

  <meta charset= "utf-8">
  <title>Site Name Here</title>

Home || About

 <h1>Welcome to the Test Site</h1>

<p>The gibberish in the next two paragraphs is called "Greeking." Greeking is used as a 
place holder.  That way you will know what the text on the screen will look like when you 
do various things to the page.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id orci risus. Donec id neque 
justo. Donec a ipsum vitae magna semper tristique. Morbi non pharetra enim. In finibus lectus 
nec ipsum varius ornare. Suspendisse mollis, urna non porta dignissim, leo leo vehicula risus, 
ultricies posuere massa risus sed ex. Morbi ipsum diam, viverra quis sodales quis, dictum ac 
nibh. Donec fermentum facilisis purus eu fermentum.</p>

<p>Nam id sapien vel leo elementum varius non a magna. Curabitur porttitor velit eu sapien 
maximus laoreet. Proin cursus condimentum tortor vel hendrerit. Morbi euismod neque vel 
tincidunt volutpat. Aliquam quam turpis, lacinia eget egestas eu, suscipit vel purus. 
Vestibulum tincidunt porttitor risus, in consectetur elit volutpat at. Pellentesque maximus 
tellus a mi posuere interdum. Donec lobortis dapibus luctus. Vivamus quam nibh, sagittis ac 
ultrices vitae, gravida at lectus. Curabitur porta erat ut lorem bibendum blandit. Nulla 
aliquet sit amet ex ac tincidunt. Quisque leo dui, dapibus eget felis sit amet, viverra 
placerat libero. Donec pretium in nisi id blandit. Pellentesque et pretium sapien.</p> 

  <h3>This is the Footer</h3>
<p>In the footer we usually put links to copyright information, site maintenance 
information and even links that you think visitors might find useful but not very 
<p>Many people/companies put site maps, tech support information, or advertisements in this 

Can you spot all the elements?

We have <! DOCTYPE html> to tell the browsers that this is an HTML document.

<head> contains information that users do not need to see but the browser needs to know in order to display the site properly.

<meta> contains things like what language your site will be in.

</head> Tells the browser that you are done with all the important content that makes the site look and act correctly.

<nav> Designates a navigation area.  This is how people will get around your site.  All the names of all your pages here, we will make them work in the next lesson.

</nav> ends the navigation area.

<body> This area is for the body of your web page.  All the important content goes here.  We have added a few other elements that will make things easier to read in the <body>.

<h1> Tells the browser to use its default Header 1 format.  A big bold header to tell people Welcome, or the name of the site.

</h1> Ends the Header 1 area.

<h2> Tells the browser to use the default Header 2 format.  It is smaller than <h1> but still nice and bold.  Good for article titles.

</h2> Ends the Header 2 area.

I hope you are seeing a pattern by now.  If you start an element you need to make sure you end it.  Not all browsers will know when to end an element and may cause things to load incorrectly.

<p> and </p> indicate the start and end of a paragraph. If you do not separate your paragraphs many browsers will just run them together.  That makes things hard to read.

</body> Ends the information in the main part of your web page.

<footer> and </footer> indicate the start and end of the footer or bottom of the page.  if you look at the bottom of most websites you will see that there is information in teeny words.  This is the footer.  It holds useful but unimportant information.

Make sure you save your file.  Test it!

It should show up as a white page with black words on it. Kind of like my test page.

IF you really want you can upload your test page so others can look at it.  You will have to follow the directions that the hosting site gives you.  They are pretty varied.  If you have issues leave a comment and I will see if I can help.

Play with the elements, check out other elements like <h3> or <h4>. Try leaving off a closing element and see what your web browser does.

Have fun with it and I will be making a new entry in a few days. 🙂

Beginning Web Development : Build a Website for Free!

Believe it or not you can build and host your own website for free!

You do not need any special software and there are places that will host it for you for free.  Now with any other “Free” thing there are bound to be restrictions.  Here are a few I have uncovered.

1.  Free hosting does not always give you a unique site name.

  • Most places that will host your home made site will let you use a subdomain, a unique name that ends with their sites identifier.  For example most WordPress blogs are listed as  My test site is no different.  It is This shows that the site belongs to WordPress or Site90 (in my case) and that you are using their space.
  • But it is Free, so how much can you complain.  It is advertising for them.

2. Not all hosting is made equal.

  • Read over what each company offers with free hosting.  Some will let you upload your own site files, other will not.  Some may not let you create a unique site name.  They may assign you a link to use.  Not all sites have easy to use interfaces to upload your files.
  • You may need to get some other free software to upload your files easily.

3. Verify things before you save.

  • Since we are using free software, you will want to make sure your file names and extensions are correct before uploading them.  If your links do not work or a page does not load correctly something is wrong and it could be something as simple as an incorrect file extension.

4. Have backup files on your computer.

  • Since the hosting is free, you never know what the company will do in the future.  They may close or chose to change direction.  Make sure you have a copy of all your files in the event you have to move and set up your site again quickly.

Those are the big things I noticed while I was setting up my test site.

I got free hosting from They gave me a unique name, allow for custom sites and even allow for email and PHP. Signing up was easy and the file upload system is easy to use. Pretty nice for free.

There are other sites, depending on what you are looking for.  If you want custom sites check out these other ones.  They may work well for you.  I have not vetted these.  So make sure you do some research before you give all your information to them.

Follow Along Web Development

I finally am on my butt in a chair and working on a web development / design project.

I plan on doing short and quick projects to teach others (and myself) FREE and basic web development.  I have set up a Free test site  Stop by and see what changes are being made.

I will be documenting everything here so you can see what I did to change it.

I do not have a schedule set up yet.  I was thinking of updating it twice a week.  That sounds good enough for busy people to follow along.  It will also allow for those who want to binge learn to get a lot of information at the end of every month.

Follow along with me and maybe you will learn something new!