UPDATED: This tutorial was updated on 7-10-2011. I have made it so you can now add content over the slider.

Things you will need:

• Jquery Slideshow
• Jquery

The HTML

Copy the code below and I will explain.

<div id="slideshow">
    <img class="active" src="image1.jpg" alt="Slideshow Image 1" />
    <img src="image2.jpg" alt="Slideshow Image 2" />
    <img src="image3.jpg" alt="Slideshow Image 3" />
    <img src="image4.jpg" alt="Slideshow Image 4" />
    <img src="image5.jpg" alt="Slideshow Image 5" />
</div>

For our full background image slider you can use as many images as you may like but I will only use 5 images. The first image has a special class name active which will trigger our slider effect. I name the class active so I can later call on it, as of now it does nothing.

The Javascript

The main part of our full background slider is the JavaScript. Copy the JavaScript and I will explain. Insert the codes below into the head section of your html document.

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>

The code above gets or as you like to say calls the jquery. Change to your correct location.

<script type="text/javascript">

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    // uncomment the 3 lines below to pull the images in random order

    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

</script>

The code above is our jquery function or shall i say script. The script is basically telling jquery to look for an image with the class name active, which we’ve already provided in our html markup,Then it tells the JavaScript that when it finds the image with the class name active to get the images in the order they’re provided in.

The css

Copy the css code below. The css code below is the code which styles our full page slider image. It’s very simple and makes our background look nice.

#slideshow {
    position:relative;
    height:350px;
    z-index:-1;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}

#slideshow img {
	/* Set rules to fill background */
	min-height: 100%;
	min-width: 1024px;

	/* Set up proportionate scaling */
	width: 100%;
	height: auto;

	/* Set up positioning */
	position: fixed;
	top: 0;
	left: 0;
}

@media screen and (max-width: 1024px){
	img.bg {
	left: 50%;
	margin-left: -512px;
}
}

Source: Jonraasch

If you would like to add content over your slider image copy and paste the code below into your css document. The code below is just a content div that holds our content. I position the background and gave it a -1 z-index so it would appear below our content div below.

#content {
	width: 920px;
	margin: 0 auto;
	background: rgba(11,11,11, 0.5);
	padding: 20px;
}

That is all for this tutorial but you should now have a good understanding of how to create a multiple background sideshow for your website. I did not go over the css code that much because the best way to learn is to download and dissect the code. I hope this tutorial has helped you.

Adding to the HTML

So since we’ve already have our HTML completed from the last tutorial all we have to do in this tutorial is add some code.

Change the default html code from:

<form class="form">

to this. The code below tells the form that it is a post(Upload text) which means it can receive the message using text then the html file looks for the send.php file.

<form class="form" method="POST" action="send.php">

Adding The PHP

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {

$to = "youremail@yourdomain.com";
$subject = "Contact";
$name_field = $_POST['name'];
$email_field = $_POST['email'];
$website_field = $_POST['website'];
$message = $_POST['message'];

$body = "From: $name_field\n E-Mail: $email_field\n Website: $website_field\n  Message:\n $message";

echo "Your Message Has Been Sent!";
mail($to, $subject, $body);

} else {

echo "Something went wrong";

}
?>

Explaining the PHP

So if you’re wondering what the heck I did with the php or what it does then I will explain. So in the php file the first line says “if php request method is post ” then to output the information that we want to output such as the variables. I also defined the variables in the html file and finally echoed out the form data. Hope you learned something from this 3 part tutorial.

Step 1

Since we have our design ready to go for coding lets begin. I have created a diagram of what to slice in this tutorial. I will explain below.

1. When Slicing the logo make sure you turn off all layers except the logo image then save it as a transparent(PNG) image.
2. This is our form background that will be repeated.
3. This is our fields background image that wil be repeated.
4. This is our Message field background image that wil be repeated.
5. This is our send button that we will use as our submit button.

The HTML

Copy the code below into your HTML document then I will explain it below.

<div id="wrap">
	<form class="form">
	<h1 id="top_name"></h1>
		<ul>
			<li class="name">
				<label for="name">Name:</label>
				<input type="text" name="name" id="name" />
			</li>

			<li class="email">
				<label for="email">E-mail:</label>
				<input type="text" name="email" id="email" />
			</li>

			<li class="website">
				<label for="website">Website:</label>
				<input type="text" name="website" id="website" />
			</li>

			<li class="message">
				<label for="website">Comment:</label>
				<textarea name="message"></textarea>
			</li>

			<span><p>Double Check everything! I don't want to respond to the wrong information!</p></span>

			<li class="submit">
				<input type="submit" id="button" value="Send" />
			</li>
		</ul>
	</form>
</div><!--end wrap-->

• wrap – The wrap id is what will hold our contact form into place. I used the wrap id to center the form on the screen.
• form - The form class is what will hold our form. I used this to make the form a specific width and add an background image to it.
• input (name, email, website and message) – These are the fields for the form.
• label – The label is what I use for the names. So the name field would be name name, full name etc.
• span – I used the span tag to define a specific element. In that case the paragraph tag.
• submit – The submit class is the send button for the form.

The CSS

Copy the code below into your css document then I will explain it below.

body {
	background:url(images/background.png);
}
.form {
	background:#cdd6d8 url(images/form-bg.jpg);
	width:500px;
	float:left;
	border:1px solid #cfd7d5;
	-moz-border-radius:10px;
	margin-bottom:50px;
}

input#name,
input#email,
input#website {
	padding:15px;
	border:1px solid #e5e5e5;
	width:400px;
	background:url(images/input-bg.jpg);
	-moz-border-radius:10px;
}

.form li {
	list-style:none;
	margin-bottom:10px;
}

textarea {
	width:400px;
	height:150px;
	overflow:auto;
	padding:15px;
	background:url(images/msg-bg.jpg);
	-moz-border-radius:10px;
	border:none;
}

textarea:focus,
input#name:focus,
input#email:focus,
input#website:focus {
	border: 1px solid #a5a5a5;
}

label {
	font-family:'Tahoma';
	font-size:14px;
	color:#808080;
}

#button {
	background: url("images/button.png");
	width:129px;
	height:68px;
	float:right;
	text-indent:-9999px;
	border:none;
	display:block;
	margin:0 25px 0 0;
}

#button:hover {
	background: url("images/button-active.png");
}

#wrap {
	width:600px;
	margin: 0 auto;
}

#top_name {
	background:url(images/contact.png);
	height:75px;
	width:275px;
	margin: 10px auto;
}

span {
	font-size:10px;
	float:left;
	font-family:'Tahoma';
	width:300px;
	margin-top:7px;
	color:#454747;
}

• body – The body is what covers the entire background. So the pattern file you’ve downloaded in part 1 of this tutorial was set to the background image and it repeated itself.
• form – The form is what hold our form. I made the form a specific width and gave it rounded corners using css3.
• Input – The input was style and gave a width so all fields would be the same width.
• Textarea – The text area is the area that holds the message text.
• Input focus – The input focus is whenever you click on a field. I used a border so you would know what field you’re currently at.
• Label – The label is what holds our field headings such as name, email etc. I applied a font size, and color to the labels.
• Button – The button is used for the submit button. I create a button so users would not have to see the hideous default button.
• Wrap – The wrap is what holds and contains the contact form.
• Top name – The top name is the logo(Contact Us). I used an image to define the logo.
• Span – The span is what I used for our little text to the left of the submit button.

You’re now done with the contact form coding. The first part of this tutorial we covered how to design and create a contact form then in part two of this tutorial you learned how to code the contact form. If you are still having a hard time trying to figure out how something was done download the contact form and tamper with the code. The next part of this tutorial will cover how to make the contact form work with PHP.

What is Font-face

For those of you who do not know what font-face is let me explain. Font-face is a web standard technique that allows you to embed fonts of your choice that may not be available on others computers. If you are one those designers who find crazy looking fonts or clean fonts you will love font-face because you can implement the font into your actual site without using images or flash. Font-face gives you the ability to upload any font of choice, of course you have to look at the font permission, and lets you use the font as a substitute. Many designers use font-face for headings and titles.

How to use font-face

Font-face is very easy to use once you get familiar with it. The way I will show you guys today should be very easy to remember considering they’re basic steps. First thing is first, head over to Dafont and grab a free font. Then once you have your your font head over to Font Squirrel and upload your font.

One you have your kit downloaded you should have a folder with 6 files in it. Double click on the index.html file to see if the font is working correctly. We will only need the 4 font files. After you have your 4 fonts file open up the style.css and copy in the font-face code to your stylesheet.

If you place font files in a folder be sure to change the path of the fonts!

@font-face {
	font-family: 'MarketDecoRegular';
	src: url('market_deco-webfont.eot');
	src: local('☺'), url('market_deco-webfont.woff') format('woff'), url('market_deco-webfont.ttf') format('truetype'), url('market_deco-webfont.svg#webfont') format('svg');
	font-weight: normal;
	font-style: normal;
}

After you have place the font face into your stylesheet and have place it into the main directory or a folder you can now test it to see if it works. The font I used was Market Deco so to call it in my css file I would apply it to a heading like below.

h2. {
      font-family:'MarketDecoRegular';
}

You should now have a font-face working and ready to go. If you have any questions or encounter a problem just leave a question below and I will be sure to answer it. Happy coding!

The Steps

So adding rounded corners to IE6, IE7, and IE8 is fairly simple thanks to css3pie . First things first, download the PIE distribution zip and save it.

You should have 3 files inside of the folder. Look for a file called pie.htc and drag it into your website directory. It can be place where just remember to call it correctly in the stylesheet.

Now we will create the rounded corners and call the effects. In the code below I have written some css. The #myelement is the variable that you can identify in your HTML document. I’ve also called for the pie.htc function in my stylesheet where I would like for rounded corners to work in IE.

#myelement {
       behavior: url(PIE.htc);
       border-radius: 15px;
      -moz-border-radius:15px;
      -webkit-border-radius:15px;
}

You should now have rounded corners in IE browsers. Remember that this is this development is still in beta so if you just so happens discover a bug or so report it to the css3pie team. I have not encountered a problem yet but everyone code is different so look out. I hope you guys enjoy this little hack. What are your thoughts on this and have you used css3pie before?

Call Css Externally

The method below is the normal method for calling a stylesheet via HTML document. Place code inside of the head tags.

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

Call Css via stylesheet

The method below is the normal method for calling a stylesheet from a css document. Place code inside of your stylesheet. @ Import tells the css document to import another stylesheet.

 @import url("import.css");

Call Css Internally

The code below is a way for calling a stylesheet within a HTML document. Place code inside of the body tags.

<style>
/*Insert Style code here*/
</style>

Things you need

• CSS Image

The HTML

When creating rollover images/ css image sprites(Same things) all that is needed in the HTML are the div tags. We used the div tag to define the rollover image later in the css file. So inside of your newly open HTML document create a new div.

<div id="image-sprite"></div><!--end image-sprite-->

The CSS

The CSS is the most important part of creating rollover images because this is where we tell our HTML document to look for the styling of our images. So you’ve downloaded the example image that I’ve created for you all to use while during this tutorial. So as you can see we have an image that is 336px in height x296px in width. The width doesn’t really matter considering they’re are the same. The height is what we care about. So earlier I created two separate images in Photoshop. One of the images equal 168px and height. So I created 2 images and put them together which is how we got the height of 336px(168+168=336).

So lets style of rollover images. Copy the css code below in I will explain it.

#image-sprite {
	background:url(sprite.jpg);
	width:296px;
	height:168px;
}

So above I have called the HTML div tag using css. Then I called for the css to grab the background image. The trick to the css rollover image is when you define the height you only put the height of one image. So the height of one image was 168px and the width like I said before doesn’t really matter because they’re both the same.

The Rollover Effect

Now it’s time to create our rollover effect. Copy the code below and I will explain it.

#image-sprite:hover {
	background:url(sprite.jpg);
	width:296px;
	height:168px;
	background-position:0 -168px;
}

So I applied a hover effect to our css file which tells the HTML document that when ever someone hovers over it to change the image. Everything is the same as our first div except I used the css tag background-position: to change images. The first zero in the background-position tag tells the css to move left or right and we did not want that because are images are stacked vertical. The right numeral -168px tells the the css to move up or down. I told the css to move down -168px which created our rollover effect. Now you’re all done.

There are many ways you can create css rollover images. The technique I showed you guys today is the very simple but can be used to create very
complex rollover images. I hoped you learned something from this tutorial today.

Note: Please place the conditional stylesheet code inside the head tags or else they will not work.

The code below Targets every version of Internet Explorer

<!--[if IE]><link rel="stylesheet" type="text/css" href="IE.css" /><![endif]-->

The code below Targets Internet Explorer 7 Only

<!--[if IE 7]><link rel="stylesheet" type="text/css" href="IE7.css"><![endif]-->

The code below Targets Internet Explorer 8 Only

<!--[if IE 8]><link rel="stylesheet" type="text/css" href="IE7.css"><![endif]-->

If you wanted to target multiple browsers but not include one you would use the code below. The code below tells whatever browsers your using to target every Internet Explorer from IE7 and down. If you wanted to target IE8 then you would simply change the 7 to 8.

<!--[if IE lt 7]><link rel="stylesheet" type="text/css" href="IE7.css"><![endif]-->

So if you every run across a bug in IE feel free to use one of the conditional stylehseet methods to target and catch those bugs. I hope this tutorial was helpful to you. Now go catch some bugs!

The HTML

When starting website I always start with the basic HTML tags such as the Head, Title, and Body tags. Then I’ve added some divs and gave them all a custom name. I give them all a custom name so I can later define them in the stylesheet.

• Masthead: – Section will contain and hold all logo, and header information.
• Container – Container will contain and hold all content and columns

Copy and paste the layout below into notepad or dreamweaver(whatever program you use for coding) and save it as index.html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Title Goes Here</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="masthead">

</div><!--end masthead-->

<div id="container">

</div><!--end container-->

</body>

</html>

More divs

For the Masthead section we will insert two divs. The first div we will enter is logo. The logo div will contain our logo. Then we will enter another div right below it and name it header. The header div will be for our header text and slogan.

Copy and paste the code below inside of the Masthead div.

<div id="logo">
</div><!--end logo-->

<div id="header">
</div><!--end header-->

Now that we have our header section taken care of we will now insert our container divs. Create 3 divs, left_col, right_col, and page_content.

• left_col: – This will contain/hold all left column text and information.
• right_col: – This will contain/hold all right column text and information.
• page_content: – This will contain/hold all main column text and information.

<div id="left_col">
</div><!--end left_col-->

<div id="right_col">
</div><!--end right_col-->

<div id="page_content">
</div><!--end page_content-->

Our final div will be out footer div. We do not want to place the footer inside of our container tag because we would like for it to span across out entire screen. Also I always place it outside of the container so it can stay at the bottom of the page. Create a new div and call it footer.

copy in paste code below after the end of the container div.

<div id="footer">
</div><!--end footer-->

Before we begin styling our page we will need to add some text. Google search lorem ispum and you find loads of gibberish text that you can use for this tutorial. Here is what the html looks like with the text.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>3 Column Layout | Webdevtuts</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="masthead">
	<div id="logo">
	<h1>Logo</h1>
	</div><!--end logo-->

	<div id="header">
	<h1>This is Your Header</h1>
	<p>This is your header</p>
	</div><!--end header-->
</div><!--end masthead-->

<div id="container">
	<div id="left_col">
	<h1>Left Column</h1>
	<p>
	There are many variations of passages of Lorem Ipsum available, but the majority have
	suffered alteration in some form, by injected humour, or randomised words which don't
	look even slightly believable. If you are going to use a passage of Lorem Ipsum, you
	need to be sure there isn't anything embarrassing hidden in the middle of text. All the
	Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary,
	making this the first true generator on the Internet. It uses a dictionary of over 200
	Latin words, combined with a handful of model sentence structures, to generate Lorem
	Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from
	repetition, injected humour, or non-characteristic words etc.
	</p>
	</div><!--end left_col-->

	<div id="right_col">
	<h1>Right Column</h1>
	<p>
	There are many variations of passages of Lorem Ipsum available, but the majority have
	suffered alteration in some form, by injected humour, or randomised words which don't
	look even slightly believable. If you are going to use a passage of Lorem Ipsum, you
	need to be sure there isn't anything embarrassing hidden in the middle of text. All the
	Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary,
	making this the first true generator on the Internet. It uses a dictionary of over 200
	Latin words, combined with a handful of model sentence structures, to generate Lorem
	Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from
	repetition, injected humour, or non-characteristic words etc.
	</p>
	</div><!--end right_col-->

	<div id="page_content">
	<h1>Main Column</h1>
	<p>
	Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
	classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin
	professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words,
	consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature,
	discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
	et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the
	theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor
	sit amet..", comes from a line in section 1.10.32.
	</p>

	<p>
	Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
	classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin
	professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words,
	consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature,
	discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
	et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the
	theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor
	sit amet..", comes from a line in section 1.10.32.
	</p>

	<p>
	Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
	classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin
	professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words,
	consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature,
	discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
	et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the
	theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor
	sit amet..", comes from a line in section 1.10.32.
	</p>
	</div><!--end page_content-->
</div><!--end container-->

<div id="footer">
<p>&copy; 2010 to Webdevtuts. All rights reserved.</p>
</div><!--end footer-->

</body>

</html>

The Css

Ok now that we have the html taken care of its time to do the dirty work. It is now time to style our 3 column web layout. Before we begin styling have to go over something really fast. In a normal website layout many people use fixed layouts but for this tutorial I am using a fluid layout.

• Fixed: – Layout is the same width and all browsers. Majority of websites use this method
• Fluid: – Layout re-sizes to users screen. Not many people use this method because it is hard styling for it but in the long
  run it’s well worth it

Copy and Paste the code below into your stylesheet. I will explain each one below.

body {
	margin: 0;
	padding: 0;
}

#masthead {
	min-width: 600px;
	background:teal;
}

#logo {
	float: left;
	width: 200px;
	background:orange;
}

#header {
	margin-left:200px;
	background:olive;
}

• body – Body class define the entire page seen on a screen. It has a margin, and padding of zero so all presets and others styles can also be set at 0.
• masthead – The masthead has a min-width of 600px which means it will never get smaller then 600px. Also it has no padding, borders, or margins.
• logo – Logo is floated to the left side of the page and has a width of 200px
• Header – Since we’re using a fluid layout we will not give the header a fixed width because we want it to re-size according to the users screen size. So we’ve added a margin to the left of 200px which gives us space from the left side of the page.

Now we will style our container and everything inside of it. Copy the css below and add it to your stylesheet.

#container {
	clear: both;
	min-width: 600px;
}

#left_col {
	float: left;
	width: 200px;
	background:grey;
}

#right_col {
	float: right;
	width: 200px;
	background:grey;
}

#page_content {
	margin-left: 200px;
	margin-right: 200px;
	background:red;
}

• container – Container id defines the container which holds all the content and both sidebars. I has a min-width of 600px which means it will not get any smaller than 600px. It also clears all floats to the left and right. Does not hold footer
• Left_col – The left column is floated to the left side of the page and has a width of 200px
• right_col – The right column is floated to the right side of the page and has a width of 200px
• page_content – Since we’re using a fluid layout we will not give the page content a fixed width because we want it to re-size according to the users screen size. So we’ve added a margin to the left and right of 200px which gives us space from the left and right side of the page.

The Footer

The footer is the last part to are 3 column layout. Copy the code below into your stylesheet and I will explain it below.

#footer {
	clear: both;
	background:teal;
}

• footer – The footer is at the bottom of the page and has no width nor height applied to it because it usually is just a line of text. It has a style of clear both which mean to clear both the left and right and then pushes the footer down to the bottom of the page.

There you go. You should now have a 3 column layout that adjusts to all screen sizes. I hope this tutorial has helped you understand how to create a fluid 3 column layout. Thanks for following this tutorial.

Mixing Fonts

When I first begin designing and coding for the web I would always mix my typography. For example I would use a serif font(Georgia) with a sans-serif(Arial) font. If you are just starting off you might think that those fonts can be used together but they cannot. Serif fonts are different from sans-serif fonts.

What fonts can I mix?

I bet you’re wondering what fonts you can use for your next design or web project. There are 3 main types of font categories

• serif
• sans-serif
• monospace

Serif fonts are commonly used by publishing companies or if you have ever been to a news site or magazine site you will often find that they are using one of the serif fonts.

Serif

• Georgia
• Palatino Linotype
• Times New Roman
• Book Antiqua

Sans-serif fonts are mostly used by all types of websites. I usually use San-serifs fonts for most of my projects.

sans-serif

• Arial
• Helvetica
• Arial Black
• Impact
• Lucida Sans Unicode
• Lucida Grande
• Tahoma
• Veranda

• Geneva

Monospace fonts are not used as often as Serifs, and sans-serif fonts but they are used.

monospace

• Courier New
• Lucida Console
• Monaco
• Courier

Line height

Line height is very important when it comes to making your text look neat and clean. Often if you just leave a text as is then it will look cluttered, and tight. When I first began working with text I never really understood how to change the line height of a text and what it actually did. To give you a better understanding of line height I will give some examples below so you could better understand what I am talking about.

There is no line-height below just the default text. So I applied 12px line height to the paragraph below and as you can see the text looks cluttered and not very attractive.

Arial Font(line-height) BAD

Marcell went to the skate park to train for an up and coming skate competition. He knew he had to practice considering there were many talented kids entering the contest.

There is a line-height of 24px applied the paragraph below.

Arial Font(line-height) GOOD

Marcell went to the skate park to train for an up and coming skate competition. He knew he had to practice considering there were many talented kids entering the contest.

Think of the line height as the lines on a normal sheet of paper. If you were to write paragraphs but not on the lines then it wouldn’t look so good. Now let’s say you wrote on the lines(as you would usually do). If someone were to read your paper(Teacher) then they find it very easy to read.

Letter Spacing

Letter spacing is something that should not be overlooked. Many times when creating different types of paragraphs we might like to have some spacing in between words or letters.

There is no letter spacing in the paragraph below.

Arial Font(spacing) BAD

Marcell went to the skate park to train for an up and coming skate competition. He knew he had to practice considering there were many talented kids entering the contest.

There is a letter spacing of 1px in the paragraph below.

Arial Font(spacing) GOOD

Marcell went to the skate park to train for an up and coming skate competition. He knew he had to practice considering there were many talented kids entering the contest.

So as you can see typography is very important when coding for the web. I have covers just the basics in this article but will teach you more in the other series. If you have a question just leave a comment below and i will help you there.