How To Slice Up Graphics for XHTML and CSS

May

2013

by: Jason Gonzalez

Posted in Categories: Illustration/Digital Drawing, Tutorials

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: Blue Green Blast, CSS, Firefox, Image Slicing, Internet Explorer 7, XHTML

Page: 1 2 3 4

1 Comment

Saleem says:

February 22, 2016 at 4:38 am

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?

Reply

Trackbacks and Pingbacks

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

Converting a Static HTML Site into a Wordpress Theme- Part 1 | Jason G. Designs says:

June 16, 2013 at 3:33 pm

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

Reply
Creating a Fancy Website Layout in Gimp 2.6 | Jason G. Designs says:

December 4, 2015 at 10:43 pm

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

Reply
Converting a Static HTML Site into a Wordpress Theme- Part 2 - Jason G. Designs says:

August 30, 2019 at 2:33 pm

[…] in a series. It follows three previous tutorials: Creating a Fancy Website Layout in Gimp 2.6, How To Slice Up Graphics for XHTML and CSS and Converting a Static HTML Site into a WordPress Theme- Part 1. In the last tutorial, we left off […]

Reply

Jason G. Designs

WordPress Themes, Design Tutorials, Linux Themes and more…