How to Make CSS Profile Layouts
When you create an account with social networking sites, such as IMVU and Bebo, you get a personal profile page that displays your information. This profile is typically predesigned by default, but you have the option to style the various elements, such as the background color and typeface, to suit your preferences. With Cascading Style Sheets (CSS), you can create individual style rules that customize your page. Apply the CSS that designs the most common elements of a profile layout.
Other People Are Reading
Instructions
-
-
1
Log in to the account that contains the profile you want to design and access the "Edit" area where you enter custom CSS code. On Bebo, for instance, click the "Edit Stylesheet" option in the toolbar. See the Help, FAQ or Support page if you need assistance locating this feature on your particular account.
-
2
Enter the following CSS in the provided text box:
<style type="text/css">
h1 { }
body { }
img { }
</style> -
-
3
Type "font: ;" between the h1 curly brackets and enter a number size in pixels and a typeface to style the header on your profile. For example:
h1 { font: 24px arial, sans-serif; } -
4
Enter "background: ;" inside the body style and type an HTML color value to determine the shade of your profile page. Further, enter "color: ;" followed by another color value to specify the hue of your text. To illustrate:
body { background: #ffffff; color: #cccccc; } -
5
Type "border: ;" in the img rule and enter a pixel number, line style such as "dotted" and color value to create the outline that appears around the pictures on your profile. For instance:
img { 2px dotted #660000; } -
6
Click the "Preview" option and view your layout with the CSS styles. When ready, save your work. Your complete CSS looks like this example:
<style type="text/css">
h1 { font: 24px arial, sans-serif; }
body { background: #ffffff; color: #cccccc; }
img { 2px dotted #660000; }
</style>
-
1
Tips & Warnings
You can use any of the CSS attributes, which are the entries like "background" or "border," in any style rule you prefer. For example, add a separate text color to your h1 header style like this:
h1 { font: 24px arial, sans-serif; color: #f0f0f0; }
References
Resources
- Photo Credit BananaStock/BananaStock/Getty Images
