Beginning CSS Tutorial for Myspace Layouts

Beginning CSS Tutorial for Myspace Layouts


Designing a Myspace layout requires CSS

Myspace is one of the most popular mediums for people wanting to get the word out about themselves, and becauase a Myspace page is so personal, most folks want a little personalization of their Myspace layout. Myspace has some major constraints how much you can alter their layout, but there's one way you can leverage the tools you're given for some serious customization: CSS!

CSS can change the Myspace layout design, but not the structure

Before we get into the nitty gritty of getting some CSS in your Myspace layout, it's important to know the limits of CSS. Your Myspace profile page uses a table layout structure. A table is a series of columns and rows that form a grid. In the Myspace profile page, the layout consists of tables within tables. In some places on your Myspace profile page, there are 6 tables nested within each other. That's a table in a table in a table in a table times two.

As a Myspace memeber, there's nothing you can do to change this layout. However, the Myspace gurus gave you the opportunity to use CSS to change how the layout looks.

A quick CSS primer

CSS stands for Cascading Style Sheets. A "style" consists of a statement like "make this text red" or "make this background blue". It's called "cascading" because you can use multiple styles at once. If these styles conflict with one another, then the last one that was added wins. So if I have a style that says "make it green" and another right after that says "make it purple", it will be purple because the styles "cascaded" down to the last style. Here's a simple example of using a style in the Myspace layout:

<style>

.nametext {

font-family:Arial, Helvetica, sans-serif;

font-size:20px;

color:#999900;

}

</style>

This sets up a "class" called "nametext" that you can use throughout your Myspace layout. This particluar class says "use the font Arial, make the font 20 pixels tall and make it a yellowish color". This particular style is already used in the Myspace layout for your name at the top of the page.

How to add the CSS to your Myspace layout

To add the CSS to your Myspace layout, just add the code you see above to your "About Me" entry in your profile. That will change the color and size of your name at the top of your Myspace profile. Neat, huh? There's way more you can do with CSS, but this tutorial will give you a working example that you can build on.




Implied By Design Logo