The next step in changing your profile is being able to tell what a good CSS tag looks like, as well as what a bad tag looks like. Many of the profile generators out there give you broken code or a code that conflicts with an existing modification, which is why keeping all of your code in one place is one of the smartest ways to edit your Myspace profile. If you know what you’re looking for (and where you put it) you can spend less time trying to get your profile to work and more time updating it with the latest features that will make you stand out!
 |
Part One: A Basic CSS Tag
One of the most common changes to a profile is changing your background. Many people prefer images, so let’s take a look at a CSS tag that tells a browser where to find the background we use here at Myspace Tutors:
<style>
body {
background-image:url(http://www.myspacetutors.com/images/bg.gif) ;
}
</style>
|
Now let’s take this apart and put it back together:
- The <style> tag tells the browser we’re making changes to the page style.
- The "body {" command describes which part of the page’s style is changing; the open brace ("{") tells the browser that we are working on the body tag until we use the close brace ("}") to signify the end of the changes.
- The “background-image:url(http://www.myspacetutors.com/images/bg.gif)” attribute tells the browser where to find the image to use as the page’s background.
- The semicolon “;” signifies the end of the background-image attribute. (If we were to make more changes after this we would start on a new line, but let’s just stick to the one for now.)
- The close brace “}” signifies the end of the body tag.
- The </style> says we’re through modifying the profile’s style.
We’ll learn more about the various body tags and the things you can do with them later, but the important thing to learn from this lesson is how much order plays a role in editing a profile. As long as you keep your body tags formatted properly and in a format that’s easy for you to recognize, you can easily decrease the amount of time you spend modifying your profile every time you go to make a change.
Part Two: A CSS Tag With More Than One Attribute
What you’ve learned so far is all well and good if you only want to change your background image, but what happens if you want to do more with it? Let’s add another attribute to the mix:\
<style>
body {
background-image:url(http://www.myspacetutors.com/images/bg.gif) ;
background-repeat:no-repeat ;
}
</style> |
 |
Let's take this new code apart and put it back together :
- The <style> tag tells the browser we’re making changes to the page style.
- The "body {" command describes which part of the page’s style is changing; the open brace ("{") tells the browser that we are working on the body tag until we use the close brace ("}") to signify the end of the changes.
- The “background-image:url(http://www.myspacetutors.com/images/bg.gif)” attribute tells the browser where to find the image to use as the page’s background.
- The semicolon “;” signifies the end of the background-image attribute.
- The next line starts with our new attribute “background-repeat:no-repeat” which prevents the image from repeating (a.k.a. tiling) across your whole page. With this in place, it’ll only display once.
- The semicolon “;” signifies the end of the background-repeat attribute.
- The close brace “}” signifies the end of the body tag.
- The </style> says we’re through modifying the profile’s style.
As you can see, all we need to do to add another tag is add an additional line after the previous command. You may continue to do this as you add CSS tags to your library, but so long as you keep them in their proper format you will be able to do whatever you like with them.
Next Tutorial: Tips & Troubleshooting
