« | »

Getting Started with CSS pt2

Coding the Header

<!-- This is a HTML comment-->
 
Untitled Document
<div id="container"><!-- Main Box -->
<div id="headr"><!--Header Box, for logos -->
<h1>My Site Name</h1>
<!-- Our Website Name --></div>
<!-- End of Header Box--></div>

If your following along with your own copy, we just laid the groundwork for the site. We told the browser where the CSS file is and started the ground work for the top of our site.

What does “div” do?

The div tag, is simply a hook for the browser to look in the css file. In our example above, it sees

the browser will run to our css file and look for #header, and then do as we instruct it.

CSS Header

/*This is a css comment */
#container {width:1024px;}
#header { padding-bottom:10px; border:2px solid #000;}
h1 {font-size:20px; color:#C00; text-align:center;}

2007-06-11-14-57-24
Creative Commons License photo credit: sonicwalker
This is telling the browser, make a box that is 1024px wide. This number is based on screen dimensions. I added some padding, this makes makes space between the header and the other items on the page. Without it, the pages will touch each other. In terms of search engine optimization, and best coding practices, H1 means top importance on a page. I adjusted the size, by default H1 is very large. I added some color and aligned it.

From here its just a few more boxes (divs) and CSS to control them. The navigation introduces some new things.

Coding the Body

<div id="navigation"><!-- Starting the Navigation-->
<ul>
	<li><a href="home.html">Home</a></li>
	<li><a href="about me">About Me</a></li>
	<li><a href="randomlink.html">Link</a></li>
	<li><a href="lastone.html">Last One</a></li>
</ul>
</div>
<!-- End of Navigation -->
<div id="content"><!-- Start of Page Content -->
<h2>This the headline</h2>
This is the content for our website. Awesome right?</div>
<!-- End of Page Content -->

As usual, the div tages are present, placing all our things into neat boxes. But we want some neat hoverover effects for our links. Best practices say, navigation should be a list of links. We use CSS to manipulate the list a bit to get the look we want. The content box, has the stuff everyone is visiting your awesome site.

CSS Code

/*This is a css comment */
#navigation { width:120px; float:left; border:2px solid #609;} /*Sets the CSS box for navigation */
#navigation ul { list-style:none; margin:20px; padding:0; }
#navigation li a{ display:block; padding:5px; background-color:#C63; color:#0FF; text-decoration:none;}
#navigation li a:hover { background-color:#066; color:#fff;}
 
#content {  float:right; width:850px; border:2px solid #F00; padding:10px;}/*Sets the Content box*/

This batch of CSS code introduces a few more things about CSS and controlling things. The first item is the navigation box as usual. Next, you notice the use of ul, li and a. These additions are extra controls on the to elements on the page. It is telling the browser within the navigation box there are elements that I want to focus on. It first grabs the ul and removes the bullets and adds some padding. Next, the navigation li a, attaches to items that are links, and adds a background color and removes the underline. Lastly, we add a neato hoverover effect by using :hover, this changes the text color and background when you move your over it.

Lastly, we get the content box, and float it right. This places this box on the right side. You can float things left and right.

Lastly, we make the footer area.

Coding the Header

<!-- This is a HTML comment-->
 
Untitled Document
<div id="container"><!-- Main Box -->
<div id="header"><!--Header Box, for logos -->
<h1>My Site Name</h1>
<!-- Our Website Name --></div>
<!-- End of Header Box--></div>

If your following along with your own copy, we just laid the groundwork for the site. We told the browser where the CSS file is and started the ground work for the top of our site.

What does “div” do?

The div tag, is simply a hook for the browser to look in the css file. In our example above, it sees

the browser will run to our css file and look for #headr, and then do as we instruct it.

CSS Header

/*This is a css comment */
#container {width:1024px;}
#header { padding-bottom:10px; border:2px solid #000;}
h1 {font-size:20px; color:#C00; text-align:center;}

This is telling the browser, make a box that is 1024px wide. This number is based on screen dimensions. I added some padding, this makes makes space between the header and the other items on the page. Without it, the pages will touch each other. In terms of search engine optimization, and best coding practices, H1 means top importance on a page. I adjusted the size, by default H1 is very large. I added some color and aligned it.

From here its just a few more boxes (divs) and CSS to control them. The navigation introduces some new things.

Coding the Body

<div id="navigation"><!-- Starting the Navigation-->
<ul>
	<li><a href="home.html">Home</a></li>
	<li><a href="about me">About Me</a></li>
	<li><a href="randomlink.html">Link</a></li>
	<li><a href="lastone.html">Last One</a></li>
</ul>
</div>
<!-- End of Navigation -->
<div id="content"><!-- Start of Page Content -->
<h2>This the headline</h2>
This is the content for our website. Awesome right?</div>
<!-- End of Page Content -->

As usual, the div tages are present, placing all our things into neat boxes. But we want some neat hoverover effects for our links. Best practices say, navigation should be a list of links. We use CSS to manipulate the list a bit to get the look we want. The content box, has the stuff everyone is visiting your awesome site.

CSS Code

/*This is a css comment */
#navigation { width:120px; float:left; border:2px solid #609;} /*Sets the CSS box for navigation */
#navigation ul { list-style:none; margin:20px; padding:0; }
#navigation li a{ display:block; padding:5px; background-color:#C63; color:#0FF; text-decoration:none;}
#navigation li a:hover { background-color:#066; color:#fff;}
 
#content {  float:right; width:850px; border:2px solid #F00; padding:10px;}/*Sets the Content box*/

This batch of CSS code introduces a few more things about CSS and controlling things. The first item is the navigation box as usual. Next, you notice the use of ul, li and a. These additions are extra controls on the to elements on the page. It is telling the browser within the navigation box there are elements that I want to focus on. It first grabs the ul and removes the bullets and adds some padding. Next, the navigation li a, attaches to items that are links, and adds a background color and removes the underline. Lastly, we add a neato hoverover effect by using :hover, this changes the text color and background when you move your over it.

Lastly, we get the content box, and float it right. This places this box on the right side. You can float things left and right.

Lastly, we make the footer area.

Tags: , ,

Category: CSS
Both comments and pings are currently closed.

One Response to “Getting Started with CSS pt2”

|

Flickr Photos

Quick Contact

Your Name (required)

Your Email

Your Message

captcha