myspace stuff

xanga layouts for your site

Skins of your Xanga site are the backgrounds associated with your page. They control the appearance of your page. How the text and lines appear is controlled mainly by HTML and CSS. HTML stands for "Hypertext Markup Language" and controls the structure of your layouts. CSS represents the terms "Cascading Style Sheet" and helps add flair to your layouts through controlling the presentation. In fact, many of the same techniques used on myspace can be used in xanga so check out the menu options to the right.


HTML uses tags which appear as the following in a text file. What you see is much different.

<html>
  <head>
  </head>
  <body>
  </body>
</html>


HTML will control the structure of the document. The presentation of your content is generally controlled by CSS. Content is the information that you type in or the text that people see. The text you are reading now is content. Your content on xanga will be the information that you blog or that you want people to know about you. You will use CSS to tell each person's browser how it should display what you have typed. Using CSS in your layouts, you can change all types of attributes such as font size, color, letter spacing, and line height just to name a few. You may see CSS referred to to as "style" or "styles". Style may be defined in the heading of the HTML document or it may be inline. Styles in the heading would appear between the <head> </head> tags listed above and would look something like:


<style type="text/css">
  <!--
  @import url(http://www.somesite.com/style/stylesheet.css);
  #content h1 {font-size: 22px; padding-top: 20px;}
  #content h2 {font-size: 18px; padding-top: 20px;}
  #content p {text-align: justify;}
  .rtpic {margin-left: 10px; margin-right: 5px; margin-bottom: 15px; margin-top 15px; float: right; border: 1px solid black;}
  .ltpic {margin-left: 5px; margin-right: 10px; margin-bottom: 15px; margin-top 15px; float: left; border: 1px solid black;}
  .bulletlist a:link {color: #c0c0c0;}
  .bulletlist a:visited {color: #c0c0c0;}
  .bulletlist a:hover {color: white;}
  .displayeffect table {border: 0px; width: 90%;}
  .displayeffect td {border: 1px solid black; text-align: left}
   -->
</style>


If these styles were written inline, they would look like:


<p style="margin-top: 20px;">



To get a deeper understanding of CSS and what the style codes do, you should try your experiments in each of the main different browsers used by those surfing the internet. Different browsers may render the same page or layout differently. In order to get the same page to look the same across browsers, many times it is critical that you write hacks or alternative code into your css. CSS may display one way in Internet Explorer but a totally different way in Firefox, Netscape, or AOL. There are tutorials online that can help but it is HIGHLY recommended that you use hard cover reference boods. They come in very handy when you are getting into writing your own code. But if you are just going to be a weekend code hacker, the online tutorials may do all that you want.




final notes on xanga layouts

If you would like to dig deeper into HTML and CSS, there are a few good reference books listed below. While online tutorials such as this whet your appetite, having a reference book will only flatten the learning curve on your way to perfecting your myspace. Before long you will be creating layouts with ease! And the amazing thing is that HTML and style work for any HTML document. You can create your own web site by using all of that knowledge!





Hopefully this short introduction to creating layouts was helpful. Tell your friends about this page and, if you found this reference helpful, place the link below on your mysapce.