Blog

Dissemination of views, information and knowledge without any cost or ado was made possible after blogging dawned upon us. Lets take a look at some of the burning topics, general discussion, innovations and techniques from our Editor’s desk

  • May 8 2013

    How to code an HTML5 webpage from a Photoshop design file: Part2

    In the first part of this tutorial, we coded the basic HTML5 web page, which is based on our PSD design. We also learned about the section and footer tags to understand what to use and when to use. But with this second part of the series, we will now cover the Cascading Style Sheets, and set our HTML elements on their exact positions, and make them look exactly the way our PSD design looks.

    PSD to HTML

    Table of Contents

    1. The CSS
    2. The Common or Standard CSS code
    3. The Header
      1. The Logo inside the Header
    4. The Top Link and Navigation Bar
      1. The Top Link
      2. The Navigation Bar
      3. The Banner Image and Banner Content
    5. The Body Container
    6. The Footer

    html5 project

    Download this PSD to HTML5 Conversion Tutorial Files Here

    So let’s begin and tackle the CSS!

    The CSS

     This is our entire CSS code. Isn’t that looks like a complicated set of complicated codes? Yeah, we know for a beginner, it would be very difficult to understand the entire codes in one go. But don’t worry; we will cover each code in detail to make it easy for you to understand how CSS helps to set all the HTML elements in order.

    psd to website coding

    The Common or Standard CSS code

     While writing the CSS manually, the best practice is to start with the common or standard css code. And this is what we do while working on any project, and we also want you to do the same, as it will help you keep things in your control since the beginning.

    In the first line using the universal selector, set the default margin and padding for our web page to Zero or 0. Then in the second line, set the border to none for the images and fieldset, which is used in forms. If we don’t define this in our css, then there might be a chance when your audience or even you will see a certain border around your images, and the form fields. However, that also depends on the browser you surf the website on.

    In the third line of the code, define the :focus selector and set its outline to none. This selector is used only for elements that accept user inputs or keyboard events. In the next or fourth line, define the default style for the body section and set the font-family to Verdana, Geneva, sans-serif, and set the default font-size to 12px. While defining the font-family you should always remember that some fonts are case sensitive.

    In the next line, define the <div> tag with a class of wrapper, and set its width to 940 pixels, and the margin to Zeor or 0 auto. Doing so will fix our layout’s width and margin from the top and bottom to 0 and from right to left would be auto.

    The Header

     In our HTML header, we have various parts, which includes the logo, the top link, the menu or nav bar, then comes the main banner image, along with the text on its left. So we will cover them one by one. First off all define the header and then set it to float to the left, and then set its width to 100%, for background use the color code “e0efe4”, and as our div has a width of 940 pixels so set it as the min-width (minimum width), and to keep it in exact position within the div, set its padding to 26 px 0 11px 0 (top, right, bottom, left).

    The Logo inside the Header

     As we have already placed the logo inside our HTML, we just need to define its position, so for that define it using its class, and make it float to the left, and set its margin from the left to 49 pixels.

    The Top Link and Navigation Bar

     The top link, and the menu or navigation bar comes inside a specific section tag that has a class of header_right nested inside the header tag. So define the class of header_right first, and make it float to the right, set its width to 765 pixels, and give it a padding of 12px 5px 0 0 (top, right, bottom, left).

    The Top Link

     To ensure that our top link come exactly in the same position, make it float to the left, and set its width to 392 pixels. Then for background, you can either grab the color code from the PSD design file, or write it directly i.e., “dce2c5,” font-size will be 15 pixels, the line-height should be 26px, and to make it look strong and bold, use the font-weight property and set it to bold. You may have noticed in the PSD design file that this top link has a rounded shape, so for that we have to use the border-radius property and set it to be at 10 pixels from both the sides. For this you can also use www.css3generator.com. Then set its position to relative, and to bring the anchor text in the center, use the text-align property and to make it look different from an ordinary link set its text-decoration to none.

    Additionally, to color this link, define its anchor tag using its class, and set its text-decoration to none, and for color use the color code “ee372a”.

    The Navigation Bar

     Now we will give some style to our menu or navigation bar, and set its position precisely. So start by setting the navigation bar to float to the right, give it a width of 690 pixels, set its font-family, and give it a padding of 30 pixels 0 0 0 from the top, right, bottom, and left. Then set the its unordered list to float to the left, give it a width of 100%, and set the list-style to none. This will remove the bullets from the menu bar list. Then to bring it into a horizontal row, define the list tag nested inside the unordered list, and make them float to left with a margin of 72 pixels from the right.

    Additionally, to ensure that our navigation bar stays in one row, define the class of last described in the last list tag in the html and set its margin from the right to 0. Now to keep them away from turning to ordinary links, define their anchor tag, and set the text-decoration to none, give it a font-size of 17 pixels, set its line-height to 26 pixels, and give it a color code “5c5a53”.

    The Banner Image and Banner Content

     First of all we need to set the width of our main banner container. So make it float to the left, and set its width to 926 pixels, and give it a padding of 0 0 0 14 pixels from the top, right, bottom, and left respectively. Now as we have already placed our main banner image inside the html, we just need to get it in its exact position, so make it float to the right, and we are done with it.

    Now it’s time to define our banner content area, and give some style to it. So introduce it with its class, and set it float to the left, give it a width of 388 pixels, and set its padding to 50px 0 0 0 from the top, right, bottom and left respectively. Then define the H1 tag that we made inside the banner content area, and give it font-size of 23 pixels, as it’s an H1 tag, set its line-height to 26 pixels, give it a color code of “6e4303”, define its font-family, and for the divider between the heading and the content, provide the image URL for it using background property, which you need to set to no-repeat from the right and bottom, give it a padding of 18 pixels from the bottom.

    If you have noticed the PSD design correctly, you might have seen that half of the heading is in different color, and for the same reason, we covered that inside a <span> tag and gave it a unique class inside the HTML. So using that class here, set its color to “c38d04”.

    Now for the paragraph text, set the font-size to 18 pixels, line-height to 20 pixels, set its color to “000000”, and give it a padding of 23 pixels 0 0 0 from the top, right, bottom, and left, and we are done with it. Now our header section is complete. So we will move further to the main body container.

    The Body Container

     Do you remember when we made the first section tag after the header section, we gave it an id of body_container? Yeah, we know you really have very sharp memory, isn’t it. Using the same id, set the entire body container to float to the left, and set its width to 100%, for background give it a color “10290b”, then set its min-width to 940 pixels, which we also gave to our <div> with a class of wrapper, and set its padding to 35px 0 100px 0 from the top, right, bottom and left respectively.

    Then set the class of common_content to float to the left, set its width to 276 pixels, and give it a margin of 47 pixels from the right. The width that we just set will be the default width for all the three content areas. Now we can set the margin for the last and first content areas respectively by using their uinique class that we had already defined in the HTML. So start with the last one, set its margin to 0 pixels from the right, then move on to the first one, and set its margin to 18 pixels from the left.

    Now as all the three content areas have an H3 heading, set the H3 tag’s font-size to 22 pixels, line-height to 26 pixels, color to “FFF”, font-family, and make it to aligned to the center using the text-align property.

      It’s now time to set the position of the logo images that we have used, one each for the three content areas. So set them float to the left, and give them the margin of 44px 31px 0 12px from the top, right, bottom, and left respectively. This margin will ensure that they stay in their exact position within the set width of the content areas i.e., 276 pixels.

    As of now, we have successfully stylized our three content areas, placed their images in the appropriate position. So we can now easily move ahead to position the actual content placed inside each of the content areas. Therefore, start by making the content to float to the right, set its width to 164 pixels, and set the padding of 29px 0 0 0 from the top to left (clock wise). This will fix the space for the content, and bring it in the required position. Now define the paragraph or <p> tag, set its font-size to 13 pixels, line-height to 17 pixels, and give it a color “e1e7dd”.

    After all this, it’s time to add an arrow image besides the anchor text available at the end of each content area that says “Learn More,” and bring it to its original position. So first off all set it to display in block, set its text-decoration to none to remove the default style hyperlink, then recall the arrow image as the background using its URL, and make it no-repeat to 0 4px, set its font-size to 13 pixels, line-height to 14 pixels, color to “e1e7dd”, give it a padding of 10 pixels from the left, and set its margin to 20px 0 0 0 from top to left (clockwise).

    The Footer

     Now we have come to the last and final portion of our design i.e., the Footer. So define the footer tag here, and make it float to the left, give it a width of 100%, and for background use the color code “33336a”, and don’t forget to add 1 pixel solid border from the top with the color code “000”. Then set its minimum or min-width to 940px, min-height (minimum) to 25 pixels, and make the footer text to aligned to the center using the text-align property, and set its padding at 15px 0 0 0 from the top to left (clockwise). After this, using the paragraph tag that we defined in the footer area in the HTML, set the font-size to 14 pixels, line-height to 18 pixels, and set its color to “d3ddcb”, and we are done!

    That’s it, you can now save you css file, and check the html in the web browser to verify if you have been able to attained the exact design that matches the PSD file or not. If you see even the slightest of the differences, then do check your code again, and rectify the errors. Meanwhile, you can also download our files for free, and test them in your web browser. Additionally, if you like our tutorials then don’t forget to subscribe to our blog, and leave your comment or feedback via the comment section provided below.

    Posted by ajeet Posted in: HTML5, Tutorials Comments: 0