How to Make a Custom CSS for Webs.com

by Brandy Alexander

Your Webs.com account provides features, such as predesigned page templates, that allow you to publish your business and personal websites without any coding knowledge. However, if you know Cascading Style Sheets, or CSS, you can make custom codes instead. CSS gives you full control over the layout and design of your website templates so you can create them from scratch or modify existing designs. Use the menus in Webs.com to apply the CSS that makes your pages stand out.

1

Log in to your Webs.com account and click the "Modify Template" tab in the menu bar on the top right corner.

2

Click the "Change Template" link that appears beneath the main menu, then click the "All" option that displays on the left side. This action presents all of the template options available on Webs.com.

3

Scroll to the very right of the template options and click the "Custom CSS" box. Click the "Advanced CSS" tab that displays to bring up a text box where you enter your style rules.

4

Type your custom CSS code to design your Webs.com template. For instance, specify the background color of the body, which controls the overall appearance of your page, as in the following example:

body { background-color: #cccccc; }

5

Click the "Save" button in the upper right-hand corner. Click the "See My Site" button in the dialog window that displays to view the custom CSS published to your Webs.com website.

Tips

  • check Customize the height of your header, which is the top banner on your page, by entering "#fw-head { height: px; }" and typing a desired number value after the height attribute. For instance:
  • check #fw-head { height: 300px; }
  • check Apply a color to the menu items in your navigation bar by typing "#fw-nav-menu li { color: ; }" and entering a color value after the color attribute. For example:
  • check #fw-nav-menu li { color: #c0c0c0; }
  • check Format the size of the title that appears above the main content area on your page by entering ".fw-title { font-size: px; }" and typing a number after the font-size attribute, like so:
  • check .fw-title { font-size: 18px; }
  • check Design the background appearance of your sidebar, which is the vertical column on the right or left side of your page, by typing "#fw-sidebar { background-color: ; }" and entering a desired color value. To illustrate:
  • check #fw-sidebar { background-color: ffff00; }
  • check Personalize the shade of your hyperlinks by entering "a:link { color: ; }" and typing a color value, like the following example:
  • check a:link { color: #00ffff; }

About the Author

Brandy Alexander has been writing professionally since 2001. She is a glass artist with a Web design and technical writing background. Alexander runs her own art-glass business and has been a contributor to "Glass Line Magazine" as well as various online publications.