CSS Primer

When I went over my tutorial with Carey I found myself side tracked by using an embedded style sheet.

In the Previous tutorial I demonstrated in-line styles that helped format each element individually. This works with my simple one page design. When my site gets larger, I use CSS(Cascading Style Sheets). This is a method that I can style the content of my site from a central location. This cleans up my code and eases the site’s maintenance.

Please Copy:

<html>
<head>
<title> Middlebury SlideShow </title>

</head>
<body>
<table>
<tr>
<td>
<a href=”index2.html”>NEXT >></a>
</td>
</tr>

<tr>
<td>
<img src=”images/1.jpg” />
</td>
<td>
<h2>Title</h2>
<em>photography by unKnown</em>
<p>Duis vitae sem sit amet mauris posuere laoreet. Sed et enim et ligula congue commodo. Vivamus molestie tellus nec augue. Suspendisse sit amet magna. Phasellus pellentesque ipsum.</p>
</td>
</tr>
</table>
</body>
</html>

Save it as cssPrimer.html  and Drop this file into your browser and see what it looks like. We are going to add all of these elements between the <head> tags.

Lets style the <h2> tag first. Add this to you HTML just below the <title>:

<style type=”text/css”>
h2 {
font-size:14px;
border: 1px solid #CCCCCC;
padding:8px;
}
</style>

Refresh the page in your browser. The title is now 14px High, I put a border around it of 1 px that is solid and the hexadecimal color (#RRGGBB) of grey. I can go over HEX color Breifly here. The hex color is a short hand for the RGB values of a color. RGB range in value from 0 to 255. a hex number is at 0 and goes to F. (0123456789abcdef) …that is pretty confusing. let me wiki it. Ok a bunch of nerd talk that basically explains why and how. What this means to you is in Photoshop use the eyedropper to select a color and Open the color dialog box. in the lower row you’ll see the Hex equivalent.

Notice also that the H2 boundary extends the entire width of the cell it’s in. I’m going to control that as well as the color of the font.

<style type=”text/css”>
h2 {
font-size:14px;
color:#425f7b;
width: 112px;
border: 1px solid #CCCCCC;
padding:8px;
}
</style>

Review the change in your browser.

Adding an id to define the cells

In your html add tags to your table cells:

<html>
<head>
<title> Middlebury SlideShow </title>
<style type=”text/css”>
h2 {
font-size:14px;
color:#425f7b;
width: 112px;
border: 1px solid #CCCCCC;
padding:8px;
}
</style>
</head>
<body>
<table>
<tr>
<td id=”navigation”>
<a href=”index2.html”>NEXT >></a>
</td>
</tr>

<tr>
<td id=”slideImage”>
<img src=”images/1.jpg” />
</td>
<td id=”desc”>
<h2>Title</h2>
<em>photography by unKnown</em>
<p>Duis vitae sem sit amet mauris posuere laoreet. Sed et enim et ligula congue commodo. Vivamus molestie tellus nec augue. Suspendisse sit amet magna. Phasellus pellentesque ipsum.</p>
</td>
</tr>
</table>
</body>
</html>

Now I can style the table cells.

<html>
<head>
<title> Middlebury SlideShow </title>
<style type=”text/css”>
h2 {
font-size:14px;
color:#425f7b;
width: 112px;
border: 1px solid #CCCCCC;
padding:8px;
}
table {
width:950px;
border-collapse: separate;
border-spacing: 0;
}
#navigation {
text-align: right;
}
#slideImage {
text-align: center;
vertical-align: middle;
background-color:#000000;
width:720px;
}
#desc {
vertical-align: top;
background-color: #EEEEEE;
width:230px;
padding: 18px;
}

</style>
</head>
<body>
<table>
<tr>
<td id=”navigation”>
<a href=”index2.html”>NEXT >></a>
</td>
</tr>

<tr>
<td id=”slideImage”>
<img src=”images/1.jpg” />
</td>
<td id=”desc”>
<h2>Title</h2>
<em>photography by unKnown</em>
<p>Duis vitae sem sit amet mauris posuere laoreet. Sed et enim et ligula congue commodo. Vivamus molestie tellus nec augue. Suspendisse sit amet magna. Phasellus pellentesque ipsum.</p>
</td>
</tr>
</table>
</body>
</html>

I like the layout but I want to style the img inside of the cell with the ID slideImage. No I can do that because I know the ID of the container cell. Add this to the style sheet.

#slideImage img{
border: 1px solid #FFFFFF;
padding: 8px;
}

This is not what I intended. I want the border to be exactly around the image but I want space around the image so it’s not directly against the wall of the slide cell.

change the CSS to:

#slideImage img{
border: 1px solid #FFFFFF;
margin: 8px;
}

margin is the area aoutside an object and padding in the area inside element.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>