How to Style a Placeholder Page for Your Website - dummies

How to Style a Placeholder Page for Your Website

By Sue Jenkins

The best custom placeholders for websites are simple HTML web pages that identify the site (logo, company/owner name, tag line, and other branding) and offer a means of contacting the site owner by both snail mail and e-mail. Anything else on the page, like a blurb about the company or some recent news items, is gravy.

Follow these steps to add CSS styling to the placeholder page:

  1. Above the closing </head> tag in your code, type the internal CSS markup you want to use on your page.

    If you’re following along with the example, type the following markup:

    <style type="text/css">
    #luauagogo {
     height: 250px;
     width: 500px;
     margin-right: auto;
     margin-left: auto;
     margin-top: 15%;
     margin-bottom: auto;
     text-align: center;
     font-family: Georgia, "Times New Roman", Times, serif;
     font-size: 12px;
     color: #F60;
     padding-top: 20px;
     padding-right: 0px;
     padding-bottom: 0px;
     padding-left: 0px;
     background-color: #FFF;
     border: 1px dashed #0CC;
    a:link {
     color: #0CC;

    This CSS markup contains instructions that tell the browser how to style the content. These styles center the content in the browser window, style the text in the Georgia font in 12px and an orange color with the hexadecimal color of #ff6600 to match the logo, add a blue dashed border around everything, and use blue as the link color to match the border.

    Before this CSS markup can work, however, you must apply this ID style to the page’s content.

  2. Wrap a pair of DIV tags around the page content. Put the opening <div> tag directly after the opening <body> tag and the closing </div> tag directly above the closing </body> tag.

    DIV tags are container tags for layers that can be styled and positioned with CSS when you include the id or class attribute in the opening tag that matches the name of the style in the CSS markup.

  3. Add the attribute id= ” uniqueid “ (for example, id= “luauagogo”) to the opening <div> tag.

    Replace uniqueid with the ID of your choice.

    The body part of your code should now look like this:

    <div id="luauagogo">
     <img src="images/luauagogo.gif" alt="Luau-a-go-go" width="208" height="76">
     <h1>Hawaiian Themed Catering</h1><br>
     <p>Luaus * Special Events * Birthdays * Anniversaries * Celebrations<br>
     Santa Monica, CA<br>
     For further information contact<br>
     <!-- encrypted email address code here →</p>
  4. Save the file again to save the changes you just made and preview the page in a browser window.


When creating your own placeholder page, feel free to generate as many graphics and other CSS styles as needed to make the page look exactly as you’d like it to.

If you’ve already created a mock-up for the website, you may even want to use some of the same design features within the placeholder page. When the page is finished, you need to upload the page and any graphics or other supporting files to the host server so that the placeholder page can brand and identify the domain until the new site is ready to publish.