From Photoshop to HTML

Part 4: Creating the style page

Next we’re going to create a style page were we can apply CSS styles to general elements such as heading tags and links. I always like to do this first because it sets the stage for the rest of the website. It also helps to complete the package and cover all the bases.

Step 1: Setup the styles.htm file

1. Open index.htm and copy everything in that file.
2. Open styles.htm and paste it there.
3. Inside the #content div paste the following HTML.

<h2>Images</h2>
<img src = "images/photo.jpg" alt = "" />
<h2>Headings</h2>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<h2>Paragraphs</h2>
<p>In arcu arcu, mollis ac auctor ut, <strong>viverra eget ante. Nulla nec</strong> libero et lorem tristique fermentum in placerat arcu. Sed quis eros ligula. Suspendisse potenti. Sed dictum est a nisi iaculis sodales. Cras sodales tempus tellus vel facilisis. Duis sit amet vehicula nibh.</p>
<p>Sed <a href = "">fringilla, mauris</a> eu <em>interdum suscipit, massa nisi</em> viverra nisl, id bibendum erat lorem rhoncus dolor.<a href = "">In non mauris quis</a> leo pretium sollicitudin.</p>
<h2>Unordered Lists</h2>
<p>Donec nibh sem, sagittis at mollis at, porttitor quis velit. Nullam ligula elit, fermentum sit amet mollis accumsan, fringilla vitae nunc.</p>
<ul>
    <li>Item #1</li>
    <li>Item #2</li>
    <li>Item #3</li>
</ul>
<h2>Ordered Lists</h2>
<p>Donec nibh sem, sagittis at mollis at, porttitor quis velit. Nullam ligula elit, fermentum sit amet mollis accumsan, fringilla vitae nunc.</p>
<ol>
    <li>Item #1</li>
    <li>Item #2</li>
    <li>Item #3</li>
</ol>
<h2>Definition Lists</h2>
<p>Donec nibh sem, sagittis at mollis at, porttitor quis velit. Nullam ligula elit, fermentum sit amet mollis accumsan, fringilla vitae nunc.</p>
<dl>
    <dt>Definition Title</dt>
    <dd>Item #1</dd>
    <dd>Item #2</dd>
    <dd>Item #3</dd>
</dl>
<h2>Misc</h2>

<blockquote>Block Quote</blockquote>

<p><acronym title = "Hypertext Markup Language">HTML</acronym> acronym</p>

<p><abbr title = "The World Wide Web Consortium" >W3C</abbr> abbreviation</p>

<h2>Tables</h2>
<table>
    <tr>
        <th>Table Header 1</th>
        <th>Table Header 2</th>
        <th>Table Header 3</th>
    </tr>
    <tr>
        <td>Division 1</td>
        <td>Division 2</td>
        <td>Division 3</td>
    </tr>
    <tr>
        <td>Division 1</td>
        <td>Division 2</td>
        <td>Division 3</td>
    </tr>
    <tr>
        <td>Division 1</td>
        <td>Division 2</td>
        <td>Division 3</td>
    </tr>
</table>

If you take a look at the code you just added you’ll notice that it esentially covers all the basic elements that get added to a page. Next we’re going add our styles to give them their own look and feel.

Step 2: Change the page title

Change the page title to Styles between the title tags in the header.

<title>About</title>

Step 3: The typography styles

1. Open typography.css you should see some CSS already

The Headings

One thing to always remember is that fonts are relative. As a rule of thumb I try to make each font at least 4px larger than the previous. For example, if h3 is 14px then I would make h2 18px and h1 22px etc. (In this case I made h1 even bigger)

2. Replace the existing headings with the following code.

h1{ color:#fff; background:#ff8401; font-size:30px; padding:12px 0 12px 15px;  margin-bottom:10px}
h2{ color:#2451a0; font-size:18px; font-weight:700; }
h3, h4, h5, h6{ font-size:14px; font-weight:700; color:#000; }

You should try to avoid going deeper than 3 levels when it comes to headings so I made h3, h4, h5 and h6 all have the same style.

Links

Links should should be the only elements that are underlined. They should also have a clear hover state when someone hovers their cursor over it.
3. Apply the following styles for the links

a
{
	color:#ea6300;
}
a:hover
{
	color:#ea9251;
}
a:visited
{

}

Paragraphs

Paragraphs should always be easy to read. You can make it much easier by having a lot of space between each paragraph.
4. Apply the following styles for paragraphs

p
{
	margin-bottom:10px;
}

Strong and Bold

You will want to pay attention to what weight and color you’re using based on the styles of the font around the bold text. For example, on dark backgrounds I always make bold elements a little whiter than the text around it.

In this case we don’t have to do anything with it.

Emphasis and Italics

Ditto with empasis and italics, in this case we don’t have to do anything more than set it as italic.

Unordered and Ordered Lists

Unordered and ordered lists should have plenty of space around it so that the eye can scan it easily.
In this case the styles are good enough so you don’t have to do anything with them.

Definition Lists

Definition lists are one of the most underused elements on the web. It’s a shame too because they are really useful.
In this case we are going to add some styles to replace the current styles with the following code.

dl{ margin-left:15px; }
dt{
	background:url(../images/bullet.png) no-repeat;
	display:block;
	margin:10px 0 5px 0;
	padding-left:23px;
	font-size:14px;
	font-weight:700;
	text-decoration:none;
}
dd{ margin-left:23px; color:#717171;  }

Miscellaneous elements

At the end of your typography file there is a grab bag of different typography elements. These are the ones that don’t get used very often but should be styled in the off chance that they get used.

In this case the styles should look like this

blockquote{ background:url(../images/quote.png) no-repeat; padding:5px 0 0 18px; color:#5f5f5f; margin-bottom:10px;   }
blockquote span { display:block; text-align:right; font-weight:700; color:#000;  }

abbr{ border-bottom:dotted #000 1px;  }

acronym{ border-bottom:dotted #000 1px; }

sub{ font-size:10px; line-height:1.5; vertical-align:bottom; }

sup{ font-size:10px; line-height:1.5; vertical-align:top; }

code{ }

small{ font-size:11px }

Step 4: The General Styles

General.css is for those elements that don’t fall in a particular category (like layout or typography).
1. Open General.css

Tables

2. Tables won’t be used in any place in this design but it’s still good to have them designed so paste the following CSS into general.css.

table
{
	border-collapse:collapse;
	border:solid 1px #000;
}
table th
{
	background:#ff8401;
	padding:5px;
	border:solid 1px #000;
	border-bottom-width:2px;
	color:#fff;
	font-weight:700;
}
table td
{
	padding:5px;
	border:solid 1px #000;
}

Images

You’re pretty much guaranteed to always use images in your designs so this is a good place to put styles for all images that don’t have specialized styles.
2. Apply the following style to the img block

img
{
	border:solid 1px #bdbdbd;
}

3. The styles page should look like this (Click for a larger view).