Stylus.

Coming soon.

Did you know? CSS stands for Cascading Style Sheets.
Change background to sketch.
Change background to Xandra's Library.
Change background to Springtime.

So here I go again. Another web design guide. But this time it's not going to be just any guide. Oh no, it's going to be much more than that.

Stylus is a project that I have been working on over the past few years. I have never been able to get the complete guide written, much less get it off its feet. Hopefully this time around things will be a little different.

Over time I've come to realize that the community we have here on Neopets is quite amazing. We have people from all over the world working (and playing!) together, often coming up with new, creative concepts for the site. I decided I want to tap into this vast wealth of knowledge and creativity to help Stylus grow and become more than just a guide.

My goal for Stylus is to not only teach players how to code their own layouts, but also help spark their creativity and help them look for new methods in solving problems. In order to do this I will not only be filling Stylus with my own guides, but also ask the community to contribute their own guides. This will provide an ample amount of guides for every learning style.

So Stylus will be much more than a simple web design guide. It will be a resource. A place for all players to learn, to have fun, to grow in their creativity.

Will you be a part of it?

Stylus.

a web design resource

Did you know? Stylus is set up like a book; the guide is split up into chapters, making it easy for you to find stuff.

Introduction

Welcome to The Code Djinni, tncextra! Looks like you've decided to take on the monumental task of learning how to code. Throughout this guide you will learn many new things, like how to create a table, place a background image onto a page, and eventually create a complex layout like the one on this very page.

Before we get started with the introduction to CSS and HTML, I'd just like to mention a few things. Towards the bottom of the page is a small menu that you can use to jump around to each section of the guide. Each tutorial in the guide is listed under levels of expertise, so no worries about learning something you already know. Simply click on one of the levels, and a list containing the name of each tutorial will appear below it.

Now that that's out of the way, let's find out more about CSS and HTML. The first thing you should know is that CSS and HTML are both acronyms. This means that each letter in the name stands for a word. CSS stands for Cascading Style Sheets, while HTML stands for Hyper Text Markup Language. While CSS and HTML are both languages used to code a website, both do different things.

Think of HTML as the framing of a house. Just like the framing provides structure to a house, HTML provides structure to a webpage. However, without any other materials, that's all you have - structure. CSS is like the drywall, paint, and all the other odds and ends that make up a house. CSS changes the appearance of a page, much like the aforementioned materials do to a house.

The purpose of a webpage is to provide information to the viewer, which can easily be done just with HTML. However, CSS enhances your webpage further, making it both aesthetically pleasing to the viewer and unique. As you read through this page you'll learn how to structure a webpage, and then alter its appearance.

Did you know? You can always jump to another chapter using the Wonderbar.

HTML Syntax

Just like any language, HTML has to be written in a certain way, and follows specific rules. These rules are referred to as syntax. All HTML consists of two tags, each of which contains an opening and closing bracket, an element and, sometimes, an attribute. Just like the capital letter and punctuation mark at either end of a sentence, the brackets in HTML declare where a tag starts and ends. The brackets look like less than and greater than signs, and are located on the comma (,) and period (.) keys on a keyboard. Just hold shift and press these keys to type out the brackets. Please note that the examples in this guide use double brackets (« and ») instead of the brackets used in HTML. DO NOT use these double brackets while coding.

Now that you know how to type brackets, we can start learning about elements and attributes. Elements tell a webpage what type of content will be displayed on a webpage. Most elements you will use are very basic and easy to remember. For example, the element used to make text bold is b. The element used to create a table is table. Easy, huh? Below are examples of several start tags and elements.

«table»
«b»
«div»
«p»

Just like a sentence needs a punctuation mark, HTML also needs an end tag to tell the webpage when the element has ended. End tags are nearly identical to the start tags. The only difference is that the end tag has a forward slash (/) before the element. Examples are show below.

«/table»
«/b»
«/div»
«/p»

If you imagine a start tag as the first letter in a sentence and the end tag as the punctuation mark, then anything in the middle of the two would be the content. Most HTML tags can have text placed between them. For example, when you use the bold tags, and place text between the start and end, all text contained in those tags will turn bold. Below are a few lines of code and how they would appear on a webpage.

«b»This is bold text.«/b»
«b»This is bold,«/b» yet this is not.

This is bold text.
This is bold, yet this is not.

As you can see in the example above, only text inside of the tags will turn bold. This is true of many other tags. However, not all tags consist of both a start and end tag. Some are both. Confusing? It shouldn't be. There are only three elements that you will encounter that do not consist of two tags. These are the image (img), line break (br) and horizontal rule (hr) elements.

A rule of HTML is that all elements have to be ended with an end tag. This causes a problem for elements that only consist of one tag. What do you do? The solution is simple - you put the end tag inside the start tag. To do this, you simply place a forward slash (/) before the closing bracket of the tag. Examples are shown below.

«br /»
«img /»
«hr /»

The three tags shown above both declare the beginning and end of the element, and follow all HTML standards. Now that you know how to declare elements on a webpage, let's define them even further with attributes.

An attribute that most people are familiar with is the source (src) attribute. This attribute is used with the image (img) element, and defines the source of the image to be shown. Attributes, like tags, consist of multiple parts. To add an attribute to a tag, first add a space after the element, then type out of attribute. After the attribute comes an equals sign (=). This tells the attributes that it will appear as the information following the sign. After the equals sign comes a quotation mark. Then comes the information (in this case the URL of an image), followed by another quotation mark. Below is an example of a completed image tag.

«img src="http://pets.neopets.com/cpn/TheDjinni/1/1.png" /»

Some tags can even contain more than one attribute. For example, what if we wanted to add a border around the picture above? We'd just use the border (border) attribute, of course! To add another attribute, type in a space after the second quotation mark of the first attribute, then type out the additional attribute.

«img src="http://pets.neopets.com/cpn/TheDjinni/1/1.png" border="1" /»

Remember that attributes will only work with some elements. You cannot use the source (src) attribute with the bold (b) element, for example. While it may seem a little confusing at first, you will start to remember which attributes go with which elements.

Most HTML elements allow nesting. Nesting is where an HTML element is placed inside another. Nesting can be done several times, but you have to know the proper way to do it, or your webpage may not display properly. Time for another analogy. (You're probably thinking "Not another one!" by now.) Let's pretend HTML is like a sandwich, and the tags are all the different ingredients like bread, condiments, and filling. A sandwich (usually) can't be made like this: bread, condiment, filling, bread, condiment, filling. This is exactly how HTML nesting works. You must end HTML tags in reverse order of how you started them. An example of the wrong and correct ways of nesting are shown below.

«div»«b»«i»This is NOT correct nesting!«/div»«/b»«/i»

«div»«b»«i»This is correct nesting!«/i»«/b»«/div»

You now know how to use proper HTML syntax. You should now be able to use some basic HTML tags to create a simple webpage. If you want to learn how to make more complex layouts, then keep reading.

Did you know? Some HTML elements aren't allowed on Neopets.

CSS Syntax

Cascading Style Sheets, or CSS for short, is a markup language used to alter the appearance of HTML. Since CSS is a language, it too has a syntax. CSS is declared by the HTML style tag. Inside of the style tag is the CSS itself. There are three main parts to the code: the selector, property and value. Each part does what the name inclines. The selector declares what HTML element will be altered, the property declares which part of the element will be altered and the value declares how the property will be altered.

In addition to the selector, property and value, there are four special characters needed to write CSS: semi-colons (;), colons (:), opening curly braces ({) and closing curly braces (}). The curly braces can be found to the right of the P key on your keyboard. Instead of explaining where everything goes, I'll show you an example.

«style»
selector {
property: value;
}
«/style»

As you can see above, you first have to declare that you are starting a style sheet by creating a style starting tag. You then type out the selector, followed by a curly brace, the property and value, another curly brace and then the style closing tag. Pretty simple to remember.

There is one problem with the example above, however. The style tag is not complete without defining what kind of style tag it is. To tell the browser what type of style tag it is, we will add the type attribute and use the text/css value.

«style type="text/css"»
selector {
property: value;
}
«/style»

Since you're more than likely reading this guide to code a layout on Neopets, you will also need to know how to get past the code filters so all of your CSS will be read. To do this, simply add a space before the closing bracket in each tag, as shown below.

«style type="text/css"»
selector {
property: value;
}
«/style »

Congratulations, you now know how to write CSS and HTML! You should now know the purpose of CSS and HTML, and the proper syntax for both, and how to start designing a layout. As you continue through this guide you will learn many new things (or perhaps just refresh your memory on some). I suggest that you open up the editing page for one of your petpages, that way you can practice coding while you read this guide. Remember, you only need to read this at whatever pace is most comfortable for you.

Did you know? Combining both HTML and CSS allows you to create complex layouts.

Common Elements

Before you begin, you will need to know the most basic HTML elements. These elements alter the appearance and structure of text. Below are examples of how each is written, and how they will appear on a website.

«b»This element makes text bold.«/b»

This element makes text bold.

«i»This element makes text italicized.«/i»

This element makes text italicized.

The following element «br /» adds a line break.

The following element
adds a line break.

«h1»This is an H1 heading.«/h1»

This is an H1 heading.


«h6»This is an H6 heading.«/h6»

This is an H6 heading.

Here is some dummy text. «p»This element creates a new paragraph.«/p»

Here is some dummy text.

This element creates a new paragraph.


The following element «a href="#common HTML elements"»creates an anchor«/a». This is more commonly known as a link.

The following element creates an anchor. This is more commonly known as a link.

Stylus.

a web design resource

Did you know? You can return to the index at any time by clicking the "Index" button!

Introduction

So you've made it to the actual guide part of the guide. In the last chapter you learned what CSS and HTML are, learned how to write proper syntax for each, and also learned some of the most common HTML elements there are. Now it's time to put that knowledge to use and do some actual coding.

Before we get started, I suggest you open a cleared petpage in another window or tab. You can also open up notepad and save a .html file then open it in your browser. If you don't know how to do that then just stick with the petpage. It's helpful to have a page open so you can practice as you follow the guide. I firmly believe that you cannot learn how to do something unless you try doing it. I've had plenty of math and drafting classes where I've had to help people learn something--just showing them doesn't do the trick; people learn by doing.

Since you will be coding as you follow the guide, it may take a while to get through. But please, do not get discouraged if it takes a while to get through. By practicing coding you're only helping yourself. Eventually you'll get to the point where you can memorize code, create layouts quickly, and even experiment with your own code. It's well worth the work.

In this chapter you'll be learning how to control more aspects of a webpage through HTML and basic CSS. If you look at the chapter list above, you'll see that topics range from creating tables and lists to adding borders and padding. All of these things will help you create a very basic web page. After finishing this chapter you can then move on to the more advanced chapter, Challenge Yourself, if you wish. After reading through and completing The Coding Guide you can also move on to The Color Guide and The Layout Guide, which will help you learn how to create a great looking web page.

But first...

Did you know? Tables are a great way to organize your content.

The Thing About Tables

Now that you know the basic HTML elements, we can start creating the most basic of HTML layouts using tables. Tables are an HTML element used to structure and organize information. The Neopets site is mostly made up of tables, which explains all the modules floating around. To create a basic table you will need to learn three new tags: table (table), table row (tr) and table cell (td).

The obvious thing to do first is to declare a table. To do this, type out the start and end table tags.

«table» «/table»

Now we will need to add in a row for the table cells to sit in. To do this, place the start and ending tags inside of the table tags. It's important that you have read about nesting HTML elements, as tables depend on correct nesting to function properly. After you have added in a set of table row tags, you will need to place two sets of table cell tags inbetween the table row tags, but do not nest the cells together. For the purpose of seeing what a table looks like, we'll add a word into each table cell. Below is an example of the code, and how it would appear on a webpage.

«table»
«tr»
«td»Cell«/td»
«td»Cell«/td»
«/tr»
«/table»

Cell Cell

Doesn't look all that exciting, now does it? Let's add a border to the table by using the border attribute. We'll also use a value of 1 for a 1 pixel wide border.

«table border="1"»
«tr»
«td»Cell«/td»
«td»Cell«/td»
«/tr»
«/table»

Cell Cell

Now you can see the table and its cells, but they don't look all that great. Plus, you have a lot of extra space on the right side. Let's try trimming the size of the table down to 300 pixels wide by using the width attribute and the value 300 (SPARTA!). We'll also make the table cells larger by using the width attribute and the value 150, that way they fit inside the table perfectly.

«table border="1" width="300"»
«tr»
«td width="150"»Cell«/td»
«td width="150"»Cell«/td»
«/tr»
«/table»

Cell Cell

Now we're going to add in an extra row of two table cells. In addition to that, we're going to change the background color of the first row by using the background color (bgcolor) attribute and a value of gray. Remember, all words used for CSS and HTML are written in American English.

«table border="1" width="300"»
«tr bgcolor="gray"»
«td width="150"»Cell«/td»«td width="150"»Cell«/td»
«/tr»
«tr»
«td width="150"»Cell«/td»«td width="150"»Cell«/td»
«/tr»
«/table»

Cell Cell
Cell Cell

What if you want a header for your table so you can put a title? To do so, you will use the column span (colspan) attribute with a value of 2. This will allow a cell to span across two columns. Since the column span affects the size of a cell, we will place the attribute in a cell tag.

«table border="1" width="300"»
«tr bgcolor="gray"»
«td colspan="2"»Title«/td»
«/tr»
«tr»
«td width="150"»Cell«/td»«td width="150"»Cell«/td»
«/tr»
«/table»

Title
Cell Cell

Since you are able to make a table cell span across several columns, it would make sense that they could also span across several rows, right? By using the row span (rowspan) attribute and a value of 2, we will be able to make a cell go across two rows. Since the cell in question will be the first cell of the first row, it will span down to the first cell of the second row. It is very important that you leave out one cell in each row that the cell in question is going to go into. For this example we will need to add another row of cells. Notice how the new row of cells only contains one cell. This is because the first cell in the first cell of the previous row will be taking the missing cell's place.

«table border="1" width="300"»
«tr bgcolor="gray"»
«td colspan="2" align="center"»Title«/td»
«/tr»
«tr»
«td width="150" rowspan="2"»Cell«/td»«td width="150"»Cell«/td»
«/tr»
«tr»
«td width="150"»Cell«/td»
«/tr»
«/table»

Title
Cell Cell
Cell

Notice how the text in each cell is really close to the edge of the cell? You are able to increase this space by using the cell padding (cellpadding) attribute. We will also use a value of 5 for this attribute. Since we want this to affect all cells in the table, this attribute and value will be placed in the table start tag. This will add a 5 pixel space on each edge of the cell. Additionally, we will center the text in the header cell by using the align (align) attribute with the center value. This will align all content inside of the cell in the center.

«table border="1" width="300" cellpadding="5"»
«tr bgcolor="gray"»
«td colspan="2" align="center"»Title«/td»
«/tr»
«tr»
«td width="150" rowspan="2"»Cell«/td»«td width="150"»Cell«/td»
«/tr»
«tr»
«td width="150"»Cell«/td»
«/tr»
«/table»

Title
Cell Cell
Cell

Now what if you wanted to space the cells further apart? We know that the cell padding attribute adds space on the inside of a cell, but what adds it on the outside? To add space on the outside of the cell, which effectively pushes them away from each other, you use the cell spacing (cellspacing) attribute. We will use a value of 5 for this attribute.

«table border="1" width="300" cellpadding="5" cellspacing="5"»
«tr bgcolor="gray"»
«td colspan="2" align="center"»Title«/td»
«/tr»
«tr»
«td width="150" rowspan="2"»Cell«/td»«td width="150"»Cell«/td»
«/tr»
«tr»
«td width="150"»Cell«/td»
«/tr»
«/table»

Title
Cell Cell
Cell

You have now learned how to completely create and customize a table. You also found that the attributes that can go with a table are width (width), background color (bgcolor), column span (colspan), row span (rowspan), cell padding (cellpadding) and cell spacing (cellspacing). In addition to these attributes, tables can also use the height (height) attribute. Try making several different tables until you are comfortable with all of the attributes and tags.

Did you know? There are 1,024 bytes in a kilobyte.

Image-ine This...

Images are often used to enhance the content and layout of a page. In order to place images onto a webpage, you will need to know the correct code. As shown in the HTML Syntax section, images can be placed on a webpage with the image (img) tag. By using the source (src) attribute, you will be able to define a source location for the image. Below is the code for adding an image onto a page. Remember that the image element does not have an end tag, so you will have to add a forward slash (/) before the closing bracket.

«img src="http://pets.neopets.com/cpn/Echoh/1/1.png" /»

As with almost every HTML element, images can have attributes. One of the most common attributes used is the border (border) attribute. We will use this attribute with a value of 3 to add a 3 pixel border around the image.

«img src="http://pets.neopets.com/cpn/Echoh/1/1.png" border="3" /»

Two other attributes that can be used with images are the width (width) and height (height) attributes. We will give the width attribute a value of 100 and the height attribute a value of 25. This will modify the dimensions of the image so it is 100 pixels wide and 25 pixels high.

«img src="http://pets.neopets.com/cpn/Echoh/1/1.png" width="100" height="25" /»

I highly suggest that you do not change the width and height of an image unless you absolutely have to. Most browsers will distort and pixelate the image, which results in a loss of quality.

Sometimes web browsers aren't able to or just don't load images. By using the alternate text (alt) attribute, you will be able to let the viewer know what they are missing. Below is an example of the code for this. Alternate text will not appear unless the image does not load, or you hover over the image in Internet Explorer.

«img src="http://pets.neopets.com/cpn/Echoh/1/1.png" alt="A picture of my pet, Djinni" /»

A picture of my pet, Djinni.

Sometimes you may want to give a title to or describe an image. To do this, use the title (title) attribute. All browsers will display a tool tip when you hover over an image with a title.

«img src="http://pets.neopets.com/cpn/Echoh/1/1.png" title="Hello World!" /»

Always remember that when placing an image on a webpage, the URL must contain http:// at the beginning. There are some exceptions to this rule, but you will learn about those later on.

Did you know? The layout for this guide relies heavily on anchors. Without them, you wouldn't be reading this!

Weigh Anchors

In order to navigate through a site, a user will need anchors, or links, to click. Anchors lead a viewer to another webpage or another part of the webpage that is being viewed. To create an anchor, you will need to use the anchor (a) element. Since you will be using a URL to hyperlink a user to another page, you will use the hyperlink reference attribute, with the URL of the page being linked to as its value. We will link to the Neopets homepage. Make sure to hit the back button to come back to this page.

«a href=" http://neopets.com "»Go to Neopets!«/a»

How what if you don't want the link to take the viewer away from your page, but instead open it in another window or tab? To do this, you have to use the target (target) attribute. The value we will be using is _blank, which will tell the browser to open the hyperlink in a new window or tab, depending on the browser's settings.

«a href=" http://neopets.com " target="_blank"»Go to Neopets!«/a»

As stated at the beginning of this section, you are able to link to specific parts of a webpage. Through the use of page anchors, a viewer is able to browse through several areas of a webpage without needing to scroll. A page anchor consists of two parts, a link and a named anchor. Page anchors do not require the use of a URL, but instead use words and numbers to direct to part of the site. In place of the URL you will type the number sign (#) and the any word you want (in this example I will use anchor). The named anchor is placed in the part of the webpage you want the link to lead to. For a named anchor you use the name (name) attribute instead of the hyperlink reference attribute. The value of this attribute must be the same as the value of the link (but without the #), or the anchor will not work.

In the example below the anchor text will not display like a link, only as regular text. If you would like to see how a page anchor works, simply click the link in the box. The page will then jump down a little to where the anchor is positioned.

«a href="#anchor"»This is a link.«/a»
«a name="anchor"»This is an anchor.«/a»

You can place more than text inside of a link. If you want, you are able to use images as links to other pages. Simply place the code for an image inside of a link.

«a href="#anchor"»«img src="http://pets.neopets.com/cpn/Echoh/1/1.png /»«/a»

As you can see, when an image is linked it obtains a rather ugly border. If you don't want this border to show, simply use the border attribute with a value of 0 on the image to get rid of it.

Did you know? Lists are a great way to create navigation for your site.

Lists, Lists, Lists

Webpages are used to organize and deliver information to a viewer. Earlier we found that tables are a good way to organize information, but what if you need another way? Something more list-like. Thankfully, HTML allows you to create lists. Just like your grocery list, HTML lists order information on a page. There are two types of lists that can be made with HTML: ordered and unordered.

First we will create an unordered list. Unordered lists use bullets to identify a separate piece of information. To create an unordered list you will need to use the unordered list (ul) element. To create each item on the list, you will need to use the list item (li) element. Also, list items must be nested inside the unordered list tags. Remember the sandwich analogy from earlier?

«ul»
«li»This is item 1.«/li»
«li»This is item 2.«/li»
«/ul»

  • This is item 1.
  • This is item 2.

Both unordered and ordered lists are indented slightly. This allows for improved readability for a viewer. Later we will learn how to adjust the indent of a list and change the bullet type.

Ordered lists allow for even greater organization than an order list. As the name suggests, an ordered list will automatically create a sequence of numbers that orders the list items. The first list item in an ordered list will be labeled with the numeral 1, the second with a 2 and so on. To create an ordered list you will need to use the ordered list (ol) element. You will still be using the list item element.

«ol»
«li»This is item 1.«/li»
«li»This is item 2.«/li»
«/ol»

  1. This is item 1.
  2. This is item 2.

Sometimes you might find that you have to add information to a list item. To do this you create a sub-list. Sub-lists are created by adding another list inside of a list item. You can even alternate between ordered and unordered. Note how a sub-list's bullets will change from their default look. Also, to increase the readability of your code, I suggest that you indent the lines for the sub-list as shown below.

«ol»
«li»This is item 1.
«ul»
«li»This is sub-item 1.«/li»
«li»This is sub-item 2.«/li»
«/ul»
«/li»
«li»This is item 2.«/li»
«/ol»

  1. This is item 1.
    • This is sub-item 1.
    • This is sub-item 2.
  2. This is item 2.
Did you know? 01000010 01101001 01101110 01100001 01110010 01111001 00100000 01101001 01110011 00100000 01100110 01110101 01101110 00101110

The Text

The text is, without a doubt, the most important aspect of a webpage. Because of this, it's important that the text is both stands out from the background and is readable. Ever visited a site with bright yellow text on a white background? How about some font - which your computer unfortunately had - that isn't even readable? This section will show you how to avoid these major design no-nos.

The first thing you need to know is how to change the font family. Don't know what a family is? When you type up a word document you have a list of different fonts to type in. These include Times New Roman (Microsoft Word and browser default), Verdana, Tahoma, Arial and all those other ones that can be hard to pronounce. In order to change a font's family, you will need to use CSS. Since all the content on a webpage is contained inside the body element, we will use body as our selector. Since we want to change the font's family, we will use the property font-family. We will then set the value of the property to arial, a basic sans-serif font.

«style type="text/css"»
body {
font-family: arial;
}
«/style»

This text uses the arial font family.

This text uses the arial font family.

As mentioned above, arial is a sans-serif font. A sans-serif font is a font that does not use serifs. Serifs are little lines added on to the edges of letters. A font that uses serifs - which are called serifs fonts - is Times New Roman.

The next thing you might want to change on your webpage is the size of the text. Most browsers render undefined text at a size of 12 pixels. For some people, this may be too large. For others it may be too small. Either way, you will have to decide which font size is best for your viewers. To change the size of a font, you will need to use the property font-size. Just so you can see the difference in sizes, we will use a value of 18px (18 pixels).

«style type="text/css"»
body {
font-size: 18px;
}
«/style»

This text uses a font size of 18px.

This text uses a font size of 18px.

Sometimes you will have text on backgrounds that blend in with black. In order for your text to be readable, you will need to change the color. In order to change the color of your text, you will use the color property. We will use the value #0000AA to create a blue color. This alternate method of defining a color will be used throughout the rest of the guide. If you have never had experience with hex colors before, I suggest you look a chart up on the internet.

«style type="text/css"»
body {
color: #0000AA;
}
«/style»

This text is blue.

This text is blue.

When building a webpage there may be times when you want to make certain elements have all overlined or all underlined text. To do this you will need to use the text-decoration property. Here's how you create italicized text using CSS using the line-through value. You can also substitute this with the underline and overline values, both of which create a 1px solid line below and above the text, respectively.

«style type="text/css"»
body {
text-decoration: line-through;
}
«/style»

This text has a line through it.

This text has a line through it.

You can also transform various parts of the text itself, instead of just adding some decoration. By using the text-transform property you can alter the case of your text. If you were to use the capitalize value, all the words in your text would start with a capital letter. If you used the lowercase value, then all the letters in your text would be lowercase. Likewise, using the uppercase value would change all the letters in your text to uppercase.

«style type="text/css"»
body {
text-transform: capitalize;
}
«/style»

All the words in this text are capitalized, even though they weren't typed that way.

All the words in this text are capitalized, even though they weren't typed that way.

«style type="text/css"»
body {
text-transform: lowercase;
}
«/style»

All letters in this text are lowercase.

All letters in this text are lowercase.

«style type="text/css"»
body {
text-transform: uppercase;
}
«/style»

All letters in this text are uppercase.

All letters in this text are uppercase.

Sometimes you'll find that you have large blocks of text, sort of like on this page, and need to space the text out a bit to increase readability. You can do this three different ways, the first of which is increasing the word spacing. To change the amount of space between each word you will need to use the word-spacing property. The value for word spacing is any pixel value you want.

«style type="text/css"»
body {
word-spacing: 15px;
}
«/style»

The spacing between each of these words is 15px.

The spacing between each of these words is 15px.

Other times you may want to increase the space between each text character, especially for condensed sans-serif fonts. To do this you will use the letter-spacing property with any pixel value you choose.

«style type="text/css"»
body {
letter-spacing: 2px;
}
«/style»

The spacing between each of these characters is 2px.

The spacing between each of these characters is 2px.

The third way to alter the amount of space between characters in your text is to change the line height. Imagine that you have a standard index card. On the front side of the card are several lines, each of which you write in. If this index card was a webpage, then CSS would allow you to change how large each line is. The line-height property allows you to change the size of the invisible lines that all of your text is on. Text will always be in the exact center of a line, so you can think of it more as the distance between the middle of each line of text. You will be using a pixel value to alter the size of the line height.

«style type="text/css"»
body {
line-height: 14px;
}
«/style»

The lines for«br /»
all of this text«br /»
are 14px high.

The lines for
all of this text
are 14px high.

There are times when you may want to format the text so it looks like a book or other type of printed material. If you wanted the text in a certain element to be centered, or even right-aligned, you could do so with the text-align property. The values for this property include left, right, center and justify. Justified text will space the words in a body of text so they reach both edges of the parent element, similar to how the text of this guide does. Below is an example of right-aligned text.

«style type="text/css"»
body {
text-align: right;
}
«/style»

This is right-aligned text.

This is right-aligned text.

Also similar to how a book is printed, you can add indentations to your text. To do this you need to use the text-indent property. Like many other text-related properties, indentation values are declared by pixels. However, keep in mind that the text will only be indented once per element. In order to indent each paragraph you will need to use multiple tags. In the example below are two paragraph elements.

«style type="text/css"»
p {
text-indent: 50px;
}
«/style»

«p»This paragraph of text will have an indent of 50px as will the next paragraph.«/p»

«p»Pretty cool, isn't it? This is just some random text so you can see the effect.«/p»

This paragraph of text will have an indent of 50px
as will the next paragraph.

Pretty cool, isn't it? This is just some random text
so you can see the effect.

Did you know? You can create a lot of cool effects by manipulating margins.

Margin and Padding

No, not margarine, margin! If you have started to code on your own you may have noticed that when you put text or images inside of an element, it touches the edges. There is an easy way to fix this with margins and padding. Remember back in the tables section we learned that cell padding adds space between a table's edges and its content? This is what margin and padding do, although both are slightly different. Since you're already familiar with cell padding, we'll start with the padding- property.

Padding is like cushioning an element with pillows on the inside. You can add padding in up to four places on an element: the top, bottom, left and right sides. To add padding to an element, just use the padding-*** property. Just make sure you replace the asterisks (*) with one of the four sides previously mentioned. As with most other properties, the padding property is defined by pixel values.

«style type="text/css"»
body {
padding-top: 100px;
padding-bottom: 25px;
}
«/style»

This element has 100px of padding at the top and 25px at the bottom.

This element has 100px of padding at the top and 25px at the bottom.

Margin is very similar to padding, as it adds 'cushioning' to parts of the element. However, margins are added to the outside of an element. Margins are usually used to add some space between text, images and block elements (you'll learn more about block elements later on in the guide). To add margins to an element you will need to use the margin-*** property, again substituting the asterisks (*) with the sides of the element. As with most other properties, the margin property is defined by pixel values.

«style type="text/css"»
img {
margin-right: 100px;
}
«/style»

The following images are all seperated on the right by margins of 100px.

«img src="http://pets.neopets.com/cpn/Echoh/1/1.png" /»
«img src="http://pets.neopets.com/cpn/Echoh/1/1.png" /»
«img src="http://pets.neopets.com/cpn/Echoh/1/1.png" /»

The following images are all seperated on the right by margins of 100px.

Once you start coding more complex layouts you will quickly realize that margin and padding are crucial to both the readability of your page and its aesthetic appeal.

Did you know? By default, all image links will have a border. Gross!

Border-ing On Insanity

Earlier in the guide I mentioned that one of the most common attributes used with HTML elements was the border attribute. Since borders help divide a page up and define where content starts and ends, it's important to know how to style these borders. This section will show you how to do so.

First you'll need to know how to actually declare that an element has a border. To do this you will need to use the border style (border-style) property. Values for this property include solid, dashed, double, dotted and more. In the example below is an image with a solid border. If you only declare a border style, the web browser a person is viewing the page in will choose a default border size.

«style type="text/css"»
img {
border-style: solid;
}
«/style»

«img src="http://pets.neopets.com/cpn/Echoh/1/1.png" /»

Now what if you want to change the size of the border? To do this you will use the border width (border-width) property. As with most other CSS properties, the border width property uses pixel values. Here's what the code would look like if you wanted all images to have a solid 1px border.

«style type="text/css"»
img {
border-style: solid;
border-width: 1px;
}
«/style»

«img src="http://pets.neopets.com/cpn/Echoh/1/1.png" /»

In addition to changing the style and width of a border, you can also change its color. To do so you will need to use the border color (border-color) property. The values for this property include any recognized American English color, or any hex color. The following code will give all images a solid, 1 pixel red border.

«style type="text/css"»
img {
border-style: solid;
border-width: 1px;
border-color: #AA0000;
}
«/style»

«img src="http://pets.neopets.com/cpn/Echoh/1/1.png" /»

If you want different types of borders for each side of an element, all you have to do is modify each of the properties slightly. For instance, if you wanted to make the top border of an image be a double border instead of a solid border, you would use the border-top-style property and use a value of double. If you wanted to change the color of the bottom border you would use the border-bottom-color property. If you wanted to change the width of the left and right borders you would use the border-left-width and border-right-width properties.

«style type="text/css"»
img {
border-style: solid;
border-width: 1px;
border-top-style: double;
border-top-width: 5px;
border-top-color: #0000AA;
}
«/style»

«img src="http://pets.neopets.com/cpn/Echoh/1/1.png" /»

As shown earlier in the tutorial you can easily add a border to the cells in a table. However, doing so makes the table look somewhat busy and takes away from its aesthetic appeal. In order to fix this problem, and make sure each cell shares the same border, without any spaces in between, you can use the border collapse (border-collapse) property. The only value you will want to use with this property is the collapse value. This property and value will collapse all the cell borders together to... well, just look at the example and see what it does.

«style type="text/css"»
table {
border-collapse: collapse;
}
«/style»

«table border="1" width="300"»«tr»
«td width="150"»Cell 1«/td»
«td width="150"»Cell 2«/td»
«/tr»«/table»

Cell 1 Cell 2

As you can see, the table above looks a lot better with collapse borders. However, the table's own border did not collapse with each cell's border. To fix this all you have to do is define a border for each table cell (td) in the CSS and then use the table selector to collapse all the borders inside the table. Since you don't want a border around the entire table itself, remove the border attribute from the table tag.

«style type="text/css"»
table {
border-collapse;
}
td {
border-style: solid;
border-width: 1px;
}
«/style»

«table width="300"»«tr»
«td width="150"»Cell 1«/td»
«td width="150"»Cell 2«/td»
«/tr»«/table»

Cell 1 Cell 2

With everything you just learned about borders you are now able to further organize your webpage, and add some interesting looks to various elements. Play around a little with borders and see what you can come up with.

Did you know? There are three different backgrounds for this petpage! Do you know how to change them?

Background Bonanza

Up to this point you have learned how to create and manipulate tables, images, anchors, lists, text, margins, padding and borders. All that is left for your basic layout is a background. Backgrounds are crucial to a webpage, as they can either make or break a design. This last section will show you how to add backgrounds to elements using both HTML attributes and CSS properties.

There are many ways you can manipulate how a webpage's background looks, but we'll start out by just changing the color. In order to change an element's background color you will need to use the background-color property. The value for this property is any real HTML color or any Hex color.

«style type="text/css»
body {
background-color: #D1EFD1;
}
«/style»

This element has a pastel green background.

This element has a pastel green background.

Now say you want to use an image for your background instead of a color. To do this you will need to use the background image (background-image) attribute. The value for this property is slightly different than most. To add an image to an element's background you have to tell the webpage that the image is coming from a specific URL, and then you will have to tell it which URL the image is located at. Because of this we will use the following value: URL('imageurl.gif'), where imageurl.gif is the URL of the image you want to use as a background.

When you use an image for a background the web browser will automatically tile it, or make it so the image covers the entire page. In the example below we will use one of Neopets' premade tiling backgrounds.

«style type="text/css»
body {
background-image: URL('http://images.neopets.com/ backgrounds/lotsofsocks.gif');
}
«/style»

Look at this awesome tiled background!«br /»
I love socks, don't you?

Look at this awesome tiled background!
I love socks, don't you?

Sometimes you might not want a background image to tile. In order to tell the webpage that you don't want the image to tile across the whole element you will need to use the background-repeat property. Values for this property include repeat-x which only tiles the image at the top of the page horizontally, repeat-y which only tiles the image vertically on the left side of the page, and no-repeat which stops an image from tiling altogether.

«style type="text/css»
body {
background-image: URL('http://pets.neopets.com/cpn/ TheDjinni/1/1.png');
background-repeat: repeat-x;
}
«/style»

The image will only tile at the top of this element.«br /»
See how it doesn't go any further?

The image will only tile at the top of this element.
See how it doesn't go any further?

You can not only choose how your background image tiles, but you can also position where it will appear. To choose where your background image is located on a page you will need to use the background position (background-position) property. Again, the values for this property aren't similar to most. The value for this property has two parts: the x-position and the y-position. Imagine an element as a graph. In the horizontal direction are x values, while the vertical direction has y values. However, nstead of the 0,0 point starting in the middle of the 'graph', it will be located in the top-left corner of the element.

Defining a value for the background position property is similar to defining a point on graph. Similar to a graph, a value for the background position property also uses a coordinate pair. One part of the value will define the horizontal position (x-position) of the image while the other part will define the vertical position (y-position).

There are 7 different 'parts' you can use for the background position property, including: top, bottom, left, right, center, px and %. The first four values will position the image on the extreme side of that page, while the center value will position it in the center of the 'axis' it is defining. The coordinate pair for these values are inverted, meaning you have to define the y-position before the x-position. The pixel and percent values require numerical values before them, and will push the image over that far on the 'axis' they are defining. Percent values will change the location of the background depending on the size of the browser the viewer is using. These two values have a regular coordinate pair, meaning you have to define the x-position before the y-position.

Remember, in order to properly use the background position property, you will need to remember how to write out the values. In the example below we want to position the background image in the bottom right corner of the element. First, we have to make sure the image won't tile, or positioning the image is a little pointless. Then, we have to figure out how we want to write the value. In order to get the image in the bottom-right corner, we need to use the values bottom and right. Also, since the 'coordinate pair' for these two values is inverted we'll need to define the y-position first. Since bottom defines a y-value, that will be the first part of the value. Since right defines an x-value, that will be the second part of the value.

«style type="text/css»
body {
background-image: URL('http://pets.neopets.com/cpn/ TheDjinni/1/1.png');
background-repeat: no-repeat;
background-position: bottom right;
}
«/style»

See how the image is in the bottom-right corner?«br /»
A long explanation for something so simple.

See how the image is in the bottom-right corner?
A long explanation for something so simple.

Now let's try a different positioning. This time we'll position the image at the top of the element in the center. First figure out which two values you will need to use. In this example we will need to use the top and center values. Since the coordinate pair for these values is inverted we will use top first, followed by center.

«style type="text/css»
body {
background-image: URL('http://pets.neopets.com/cpn/ TheDjinni/1/1.png');
background-repeat: no-repeat;
background-position: top center;
}
«/style»

See how the image is in the bottom-right corner?«br /»
A long explanation for something so simple.

See how the image is at the top in the center?
A long explanation for something so simple.

Now let's see an example for pixel and percent values. Since these two types of values have a regular 'coordinate pair', you will have to define the x-value first and the y-value second. Let's try getting the image to be halfway across the element and 50px down from the top. Since the x-value is defined first, we will use 50% as the first part of the value. The y-value, in this case 50px, is defined second.

«style type="text/css»
body {
background-image: URL('http://pets.neopets.com/cpn/ TheDjinni/1/1.png');
background-repeat: no-repeat;
background-position: 50% 50px;
}
«/style»

See how the image is located at 50%,50px?«br /»
A long explanation for something so simple.
See how the image is located at 50%,50px?
A long explanation for something so simple.

It is also possible to mix the two different types of value parts: both inverted pair values and regular pair values. Since you are including a regular pixel or percent coordinate in this value, you will write the value out as if it were a regular coordinate pair. Let's position the background image on the right side of the element 50px from the top.

«style type="text/css»
body {
background-image: URL('http://pets.neopets.com/cpn/ TheDjinni/1/1.png');
background-repeat: no-repeat;
background-position: right 50px;
}
«/style»

See how the image is on the right side 50px from the top?«br /»
A long explanation for something so simple.

See how the image is on the right side 50px from the top?
A long explanation for something so simple.

As you continue to build your coding skills, you'll find that it's very important to save as much space as possible when coding. One way to do this is to use only one value for the background position. By defining only one value the browser will automatically render the other as centered. For example, if you only used the right value, then the background image would be located on the right of the element in the center y-position. Inversely, if you use a y-value such as bottom, then the x-value will automatically be rendered as centered. If you use pixel or percent values then they will define the x-value, while the y-value will be defined as centered.

«style type="text/css»
body {
background-image: URL('http://pets.neopets.com/cpn/ TheDjinni/1/1.png');
background-repeat: no-repeat;
background-position: 20px;
}
«/style»

See how the image is in 20px over in the center?«br /»
A long explanation for something so simple.

See how the image is in 20px over in the center?
A long explanation for something so simple.

There is one last property that you can use for backgrounds: background-attachment. This property allows you to tell a webpage whether or not you want the background image to be fixed in its position. By fixing a background image in its position, it will remain in the same spot on the element, even if you scroll up or down. The value used for this property is fixed.

Congratulations! You have made it through the beginner's tutorial on coding. :) If you would like to learn more, continue on to the next chapter.




Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2014.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions