Apps

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...

2 comments
TAPhilo
TAPhilo

I would create a completely different CSS set for mobile content. This CSS is designed for a standard web browser and different rules apply for mobile displays. You should really create 1 for PC browsers, 1 for print, 1 for phones, 1 for 1 iPad in order to take advantage of each format / restrictions of them. As for ADA compliance, style layout does not hinder presentation - especially since this is mainly text. The images would have to have the ALT attribute to describe the dishes and maybe change the tab order of items so that people see some higthts then find the menu and go through the menu separately than the text on the right. And of course for those who use voice reader a really different thought process should be done since visually people can jump around easily but hearing only causes all sorts of useability issues and a good visual is usually very bad for hearing only people.

jeffrey.bollman
jeffrey.bollman

Thanks for the work on showing how to go from "PSD" to "html" to "css." 2 questions: 1. (Since I'm in government...) How well does the coding meet accessibility guidelines? ...and... 2. How well does this design display on mobile devices? Thanks for the update.

Editor's Picks