Slicing PSD & Html/CSS – I

What’s it About?

In this article you will learn how to slice a design and write standard compliant Html/CSS. In its Part 2, you will learn how to write printer friend CSS. Which means when you print your webpage, it will exclude all background images, and colors. This helps anyone printing the document more reader friendly and also save the user’s printer resources as well.

Demo   Source

Slicing PSD

Here’s the design that I will slice in this article.

Design used in Demo

Select slice tool from the Photoshop’s toolbox. You can access with “C” shortcut key as well. Now create slices around the target objects by clicking and dragging the mouse pointer. You can also resize the created slice by using Slice Select Tool.

Photoshop slice tool

You only need to create two slices. First, slice the top menu background. Then slice the picture on the right as shown below:

Slicing the design

Now export the slices using File -> Save for Web & Devices.

Html

It’s good pratice to write complete Html before writing any CSS. So let’s start with Html.

Step 1

Create a div with an id of “wrapper”

<div id="wrapper">

</div>

Step 2

Now create a child div with an id of “main_menu” containing ul.

<div id="main_menu">

    <ul>

        <li><a href="#">Home</a></li>

        <li><a href="#">About</a></li>

    </ul>

</div>

Step 3

Create div with an id of “content” after “main_menu” containing two headings and a paragraph. Also paragraph contains an img with an id of “rainy”

<div id="content">

    <h1>Print CSS Demo</h1>

    <h2>Rainy Day in Islamabad</h2>

    <p>

        <a id="rainyImg" href=""><img src="images/isbImage.jpg" alt="Rainy day in Islamabad" /></a>

        

        Lorem Ipsum is simply dummy text of the printing and typesetting industry.

        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

        when an unknown printer took a galley of type and scrambled it to make a type specimen book.

        It has survived not only five centuries, but also the leap into electronic typesetting,

        remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset

        sheets containing Lorem Ipsum passages, and more recently with desktop publishing software

        like Aldus PageMaker including versions of Lorem Ipsum.

    </p>

</div>

Step 4

Finally add a br with class “clear” and a div with an id of “footer”.

<br class="clear" />

<div id="footer">Demo by <a href="http://www.ifadey.com">iFadey.com</a></div>



</div> <!-- end wrapper div -->

Final Html

Here’s the final html.

<div id="wrapper">

    <div id="main_menu">

        <ul>

            <li><a href="#">Home</a></li>

            <li><a href="#">About</a></li>

        </ul>

    </div>

    

    <div id="content">

        <h1>Print CSS Demo</h1>

        <h2>Rainy Day in Islamabad</h2>

        <p>

            <a id="rainyImg" href=""><img src="images/isbImage.jpg" alt="Rainy day in Islamabad" /></a>

            

            Lorem Ipsum is simply dummy text of the printing and typesetting industry.

            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

            when an unknown printer took a galley of type and scrambled it to make a type specimen book.

            It has survived not only five centuries, but also the leap into electronic typesetting,

            remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset

            sheets containing Lorem Ipsum passages, and more recently with desktop publishing software

            like Aldus PageMaker including versions of Lorem Ipsum.

        </p>

    </div>

    

    <br class="clear" />

    

    <div id="footer">Demo by <a href="http://www.ifadey.com">iFadey.com</a></div>

</div>

CSS

Step 1

First add a reset.css file which will reset all the default properties of browsers. I mostly use reset file of YUI 2.

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 

    margin:0;

    padding:0;

}

table {

    border-collapse:collapse;

    border-spacing:0;

}

fieldset,img { 

    border:0;

}

address,caption,cite,code,dfn,em,strong,th,var {

    font-style:normal;

    font-weight:normal;

}

ol,ul {

    list-style:none;

}

caption,th {

    text-align:left;

}

h1,h2,h3,h4,h5,h6 {

    font-size:100%;

    font-weight:normal;

}

q:before,q:after {

    content:'';

}

abbr,acronym {

    border:0;

}

Step 2

Now create a new file style.css and add styles for html elements.

body {

    /* Change bg color to dark purple */

    background: #6c3749;

    

    /* Change font color to light brown */

    color: #d4ad72;

    

    /*

       Change font to Century Gothic.

       If this font is not installed on the user's machine then default sans-serif will be used

    */

    font-family: "Century Gothic", sans-serif;

}





h1, h2 {

    color: #c26766;

    

    /*

       This property is used for displaying shadow behind the text.

       Note that this is CSS3 property so it will not work in IE.

    */

    text-shadow: 0 0 3px #000;

}





h1 {

    /*

       em is a relative unit. It automatically changes according to the screen size.

    */

    font-size: 3em;

    

    /*

       set margins as

       top = 12px

       right = 0px

       bottom = 6px

       left = 0px

    */

    margin: 12px 0 6px 0;

}





h2 {

    font-size: 2em;

    margin: 10px 0 4px 0;

}





p {

    /*

       set margins as

       top and bottom = 8px

       left and right = 0px

    */

    margin: 8px 0;

}





a {

    color: #d4696b;

    

    /* disable underline of links */

    text-decoration: none;

}





/* when mouse is over the link */

a:hover {

    color: #c26766;

    

    /* display underline */

    text-decoration: underline;

}

Step 3

Now let’s write more CSS targeting specific elements by id.

#wrapper {

    /*

        This property is extremly important. It moves the wrapper div to the center of the page horizontally.

        It set margins as follows:

        top and bottom = 0px

        left and right = auto

        

        auto means that the spacing on the right and left of wrapper will be equal.

        According to W3C, auto's funtionality depend on browser

    */

    <strong>margin: 0 auto;</strong>

    

    /* The above property won't work if you don't set the width of the container element */

    width: 800px;

}





#main_menu {

    /* set background image and repeat it on x axis */

    background: url( '../images/mainMenuBg.jpg' ) repeat-x;

    

    height: 47px;

    width: 800px;

}





#main_menu ul {

    /* move ul on the right side of "main_menu" */

    float: right;

    

    margin: 5px 10px 0 0;

}





#main_menu ul li {

    /* move each li within ul to the left */

    float: left;

    

    margin: 0 16px;

}





#rainyImg {

    /*

       Move the image within content to the right.

       Note that float property removes the element from normal document flow.

       So the content below the floating element will move upwards on the position

       of floating element

    */

    float: right;

    

    margin: 0 0 0 12px;

}



#footer {

    font-size: .9em;

    margin: 20px 0 0 0;

    

    /*

       Set padding as

       top and bottom = 0px

       left and right = 8px

    */

    padding: 0 8px;

    

    /* align text within the footer div to the right */

    text-align: right;

}

Step 4

Finally create a style for class “clear” which is used for clearing the floats.

.clear {

    /* clear float on both sides (left and right) of the element on which this class will be applied */

    clear: both;

}

Important CSS Concepts

If you don’t have good understanding of properties like float, margin, padding, and clearing the float, then I would highly recommend you to Google it on read these concepts.

Purpose of this Tutorial

The design of the page is very simple and also the Html/CSS was not complex. Also I didn’t explained basic CSS concepts in detail because my goal was to teach you how to write printer friendly CSS. In the Part II of this tutorial, you will learn how to write printer friendly CSS.
Enjoy!


comments powered by Disqus