Developer

Backgrounds in web design: Adding text styles

The final post in Ryan Boudreaux's backgrounds in web design series shows you how to add the final text styles to the design in CSS.

This is the final post in my series on backgrounds in web design. In the last post, we added navigation to the finished design; now we will finish the restaurant theme template with text styles including paragraph, headings, anchors, and lists elements. Note that all the working files can be found in the companion download.

If you have not already read the previous posts in this series, I highly recommend that you review them as they are highlighted and linked in order below:

Before we start with the coding we need to take a look at the original PSD file that we created in our image editing tool, in this case, Photoshop. Opening this file will give us a refresher view of the ultimate finished product that needs to be rendered in code. The file BackgroundDesign.psd is included in the download.

With your HTML code editing tool open, it is time to transform the finishing touches with text elements, but first we need to add in the semantic coding to our HTML file. In this iteration, it is named Page_v4.html, and is included in the download.

Let's start with the semantic code were we will add the "Welcome" heading and the sub-heading "to our restaurant," along with the top level introductory text, the left side and right column text, and the footer text. See a partial screenshot of the code as displayed in Dreamweaver in Figure A:

The code is available for copying into a new HTML file below:

<div id="main_content">

     <h2>Welcome</h2>

     <h3>to our restaurant</h3>

     <div id="TopContentText">

     <p>We offer the finest in continental cuisine utilizing only fresh and local ingredients, and recipes from our rich heritage.</p>

     <p>&nbsp;</p>

     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam.  purus a augue condimentum adipiscing. Aenean  sagittis. </p>

        </div>

                <div id="left_sidebar">

                  <h4>Daily Specials</h4>

                  <h5>~~ Fish ~~</h5>

                    <p>Tuna   16 <br />

                    Salmon  19<br />

                    Sole   24<br />

                    Yellowtail   18</p>

                  <h5>~~ Seafood ~~</h5>

                    <p>Shrimp   17<br />

                    Scallops   15<br />

                    Crabs   22<br />

                    Lobster    market price</p>

                  <h5>~~  Beef ~~</h5>

                    <p>Filet (9oz)    16<br />

                    Filet (12oz)    22<br />

                    T-bone (16oz)    26<br />

                    Rib-eye (16oz)    24</p>

                </div>

                <div id="right_column">

                    <h4>Restaurant Blog</h4>

                    <h5><a href="blogentry1.html">Recipe: Fresh Berries a la Creme</a></h5>

                     <p id="byline">By Chef</p>

                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam.  purus a augue condimentum adipiscing. Aenean  sagittis. <a href="readmore.html">(Read more)</a></p>

                    <h5><a href="blogentry2.html">New Menu: Sunday Jazz Brunch</a></h5>

                     <p id="byline">By The Management</p>

                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam.  purus a augue condimentum adipiscing. Aenean  sagittis. <a href="readmore.html">(Read more)</a></p>

                    <h5><a href="blogentry3.html">Fresh Local: Fall Crops</a></h5>

                     <p id="byline">By Chef</p>

                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam.  purus a augue condimentum adipiscing. Aenean  sagittis. <a href="readmore.html">(Read more)</a></p>

              </div>

            </div>

            <div id="footer">

              <div class="leftContainer">

              <p></p>The Restaurant<br />

                123 Main Street<br />

                Anytown, AB 12345<br />

                (123) 123-4567<br />

              dining@therestaurant.com</div>

As you can see from the semantic markup, we have taken the textual content from the PSD file and copied it over with element tags including h2, h3, h4, h5, p, a, a:hover, and byline. Note that the anchors to the blog entry titles and "Read more" are place holders only and do not resolve to any pages; these are provided to show the effects of the a and a:hover tag element styles.

The CSS elements for the new text styles are displayed below, utilizing the Bookman Old Style font for most of the text, with a serif, and the font stack is built for each text element.

/*   Text-Styles  */

h2 {

      margin: 0px 0px 20px 5px;

      font-size: 44px;

      font-family: "Bookman Old Style", serif;

      font-style: italic;

      color: #000000;

      padding-left: 145px;

      padding-bottom: 5px;

      position: absolute;

      z-index: 3;

}

h3 {

      margin: 40px 0px 20px 5px;

      font-size: 22px;

      font-family: "Bookman Old Style", serif;

      font-style: normal;

      color: #666666;

      padding-top: 5px;

      padding-left: 155px;

      padding-bottom: 20px;

      position: absolute;

      z-index: 3;

}

h4 {

      font-family: "Bookman Old Style", serif;

      font-size: 18px;

      color: #333333;

}

h5 {

      font-family: "Bookman Old Style", serif;

      font-size: 16px;

      color: #993333;

}

small {

      color: #595856;

      font-weight: bold;

      font-size: 11px;

      display: block;

      margin-bottom: 15px;

}

a {

      color: #993333;

      text-decoration: none;

}

a:hover {

      color: #1E9378;

}

p {

      margin: 0px 0px 2px 0px;

      font-family: "Bookman Old Style", serif;

      font-size: 18px;

}

#byline {

      padding-bottom: 10px;

      margin-top:-25px;

      font-size:16px;

      font-style:oblique;

}

Notice the following highlights in the text styles:

  1. For the h2 element I have added the declaration for a z-index of 3, this is to allow the header text to overlap the image montage which has a z-index of 2, and the left padding of 145px so that it is visible, otherwise it would be behind the montage.
  2. The h3 element has similar declarations with slightly different pixel references.
  3. The h4 and h5 elements are used in the left and right columns for menu specials and blog titles.
  4. The byline element aligns the text just under the headers, adjusting for the normal space that would occur under a normal header element.
  5. The "a" element has a text-decoration of none, with removes any underlines from the hyperlinks and preserves the color declaration of #993333, which is a magenta hue.
  6. The a:hover element has a color declaration of #1E9378, which is a cyan hue.

In addition, there are several updates to other elements within the CSS from the previous segment in this series, and they are noted in the style_v4.css file which is included in the download. The updates include the following modifications:

#TopContentText     - Renamed from #contentText

      padding-top: 80px;      - Added this declaration

      padding-right: 150px;   - Modified this declaration from padding-right:30px;

      padding-bottom: 20px; - Added this declaration

      padding-left: 180px;    - Modified this declaration from padding-left:170px;

#right_column

      padding-top: 40px; - Added this declaration

#left_sidebar

      width: 400px;     -  Modified from width:475px;

padding-left: 80px;     - Modified from padding-left:20px;

 padding-top: 40px;     -  Added this declaration

#footImage

      margin-top: 20px; - Modified this declaration from margin-top:90px;

The resulting page now includes all the elements that were developed in the PSD file BackgroundDesign.psd, displayed in Figure B, which can be viewed in your browser from the HTML file Page_v4.html included in the download. The final HTML was tested in both IE and Firefox for compatibility.

Figure B

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

Editor's Picks

Free Newsletters, In your Inbox