• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Ensuring Visual Appeal > Applying the new colors to your CSS file

Applying the new colors to your CSS file

In previous steps, you decide what color to use for the banner area, and what color to use for the elements on your pages, such as headlines, banner area, footer — any areas that can be colored through the use of code in the style sheet. You need to sort out what color goes where and apply those changes in the style sheet. To do so, follow these steps:

  1. Look in your HTML document and make note of class and ID selector names.

    Look for code that looks like this:

    <div id="banner"><h1>My banner text </h1></div>


    <p class="footer">my footer content here</p>

  2. Open the CSS file and apply the hexadecimal colors to the corresponding classes and IDs.

    The corresponding CSS will look like this:

    #banner h1{color:#000000; font‐weight: bold;}


    .footer{font‐size: small; color: #000000;}

    The #000000 is the hexadecimal color; this code would make the text black. Yours might be a different hexadecimal color.

  3. Change the hexadecimal color value in the #banner h1 set, and all instances of an h1 within a <div> tag with the ID selector of banner are updated.

    You don't have to open, change, and save each HTML document.

  4. Follow the same procedure of changing values for all attributes you need to affect in order to create your new look and feel.

    You can change colors, font sizes, weights — anything you like. If you change padding, margins, or positioning, your layouts will change. Make sure you test carefully when you make changes that affect the layout. Also, be aware that if you make drastic changes in font weights or sizes, your layout might be affected.

    For more information about CSS and HTML, please refer to Book III, Chapters 2 and 3.

    After you make all your changes and test all your pages in a browser to make sure everything looks the way you want it to, it's time to publish your new site.

  5. Publish (also referred to as post) the new graphics files and the CSS file to your Web server.

    If you didn't add or change the HTML, you don't need to update those files. Please refer to Book III, Chapter 10 for more about File Transfer Protocol (FTP), the method by which Web pages and sites are published to a Web server.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint