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">
<head>
 <meta charset= "utf-8"/>
 <title>Mere Magic Designs Tests Site</title>
 </head>
<nav>
 Home || Vocabulary || About
 </nav>

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">

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

<nav>
Home || Vocabulary || About
</nav>

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:

body{
background:#B8DBFF;
}

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!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

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