Jason G. Designs

WordPress Themes, Print-On-Demand Resources and more…

How To Slice Up Graphics for XHTML and CSS

31
May
2013

Styling

11. Create a stylesheet and link to it in our HTML page

  • For this we first need to create a stylesheet. Create an empty file, name it “style.css” and place it in the same directory as the “index.html” page
  • Now we link to our external style sheet in index.html’s <head> tag, just below the title closing tag:
  • <title>Page title</title>
    <link rel="stylesheet" type="text/css" href="style.css" media=screen>
    </head>

10. Now we can set some baseline information in our style sheet, including resetting some browser defaults

  • In our style sheet, type in body tag style rules:
  • body {
    margin: 0;
    padding: 0;
    color: #A64B00; /* sets foreground color; usually applies to fonts */
    background-color: #00BBBB;
    font-family: Arial, Helvetica, "Nimbus Sans L"/*Linux*/, sans-serif;
    /* I included one Linux friendly font. See http://mondaybynoon.com/2007/04/02/linux-font-equivalents-to-popular-web-typefaces/ */
    }
  • Go ahead and refresh your browsers. As you can see already, our page looks significantly different
  • Type the following to reset the margins of the heading and paragraph tags and change the font family:
  • p {
    margin: 0 0 1em 0;
    font-size: 0.9em;
    line-height: 1.3em;
    }
    
    h1, h2, h3, h4, h5, h6 {
    margin: 0; /* reset margins */
    padding: 0.2em 0 0.2em 0;
    font-family: Georgia, "Times New Roman", "Nimbus Roman No9 L"/*Linux*/, serif;
    font-weight: bold;
    }
    
    /* custom heading sizes */
    h1 {
    font-size: 24px;
    }
    
    h2 {
    font-size: 18px;
    }
    
    h3 {
    font-size: 14px;
    }
    
    h4 {
    font-size: 12px;
    }
    
    h5 {
    font-size: 10px;
    }
    
    h6 {
    font-size: 8px;
    }

11. Next begins the fun part, placing our background images behind our sections

  • We will create style rules for our backgrounds, based on their ids. To target an id tag, you type a hash tag (#) followed by the id name, opening curly brace { property: value; }. CSS comments are different from HTML comments. They are formatted /* information */
  • Type the following just below our previous style rules (what we’re doing will be commented):
  • /* Div styles */
    
    /* wrapper */
    #wrapper {
    width: 780px; /* we will be adding a 10px border around everything; */
    /* according to the CSS box model this must be included in our width */
    border: 10px solid #63DDDD;
    background: url(images/content_bg.png) repeat-y; /* faux columns behind everything */
    }
  • Create the header style rule. Type:
  • /* header */
    #header {
    width: 100%; /* header is as wide as our containing element, the wrapper */
    height: 120px; /* height from our layout */
    margin: 0 auto; /* centers the layout in standards based browsers */
    background: url(images/header-footer_bg.png) repeat-y;
    }
    
    #header h1 {
    padding-top: 60px; /* set a large padding up top to push the heading down */
    }
  • Set widths on our “left” and “sidebar-2” divs. Type below previous:
  • #left {
    width: 449px; /* width is set minus the 20px left padding, according to the CSS box model */
    height: 120px; /* height repeated here */
    padding: 0 0 0 20px; /* add padding to the left side */
    float: left; /* float left */
    }
    
    #sidebar-2 {
    width: 271px;
    padding: 0 0 0 20px; /* add padding to the left side */
    float: right;
    height: 120px;
    }

I had to repeat the heights on each sub div after testing the background boxes. To test, just temporarily place a bright background color, such as red behind the blog-title box and place another background color like blue behind the sidebar-2 box.

  • Now, time to do the Content section. Type the following:
  • /* content */
    #content {
    width: 429px; /* width is set minus the 20px padding, according to the CSS box model */
    padding: 20px; /* add padding */
    }
  • For the Sidebar, type:
  • /* sidebar */
    #sidebar {
    width: 251px; /* width is set minus the 20px padding, according to the CSS box model */
    padding: 20px; /* add padding */
    }
  • And for the footer:
  • /* footer */
    #footer {
    clear: both; /* clears everything above, placing the footer below everything in our wrapper */
    background: url(images/header-footer_bg.png) repeat-y;
    width: 720px;
    padding: 10px 20px 10px 20px; /* sets the padding 10px top, 20px right, 10px bottom, 20px left */
    }

You may notice, things look very different in each browser if you are viewing this in Firefox and Internet Explorer on Windows. Basically, everything is rendered correctly in Firefox and incorrectly in IE. Currently, I’m using IE7. We will address those issues below, using a source I found.

Tags for this post: , , , , ,

Page: 1 2 3 4

1 Comment

  1. Saleem says:

    hi I have to create a pilocy document which needs to exist in 2 different countries. So I want to have one common document (the bulk of the document) and insert various sections that can vary by country.Can you point me to a simple way to do this please?

Trackbacks and Pingbacks

Trackback URL for this post: http://www.jasong-designs.com/2013/05/31/how-to-slice-up-graphics-for-xhtml-and-css/trackback/

  1. […] Creating a Fancy Website Layout in Gimp 2.6, and How To Slice Up Graphics for XHTML and CSS. […]

  2. […] How To Slice Up Graphics for XHTML and CSS […]

Leave a Reply

Your email address will not be published. Required fields are marked *