« | »

Getting started with CSS (Cascading Style Sheets)

CSS, cascading style sheets is a file that can turn a boring page into one that can revile even the prettiest websites.  With the right CSS coding, two versions of the same website will look totally different. Once this is completed I will include a zip file with the completed files for you to try out.
Pablo's cubism period began at three
Creative Commons License photo credit: woodleywonderworks

Why use CSS (Cascading Style Sheets)?

There are several hundred reasons a site should use CSS in other inferior methods for laying out a site.

  • It decreases the amount of bandwidth needed to show your content.
  • It allows easier updates, when you need to update you site, you change 1 file and instantly all the pages follow suit.
  • You remove excess code from your HTML which makes vistors spend less time waiting for the download.
    • For example, without CSS, you would need to create one large image, with CSS you can take a strip of that image and repeat it several hundred times.
  • It separates your code, which is always a plus.

I figure that’s enough reasons, and you are ready to jump into some code, right? I am going to start with a basic site structure.

The Basic Example

In this example, we are laying out the basic framework for a page using CSS.

  • Header – logo and ” head” content
  • Body – navigation and content
  • Footer- navigation and page closing

untitled

Although, this page is hardly pretty it sets us up the the basics for future additions, that will make it super pretty.

First, you need to create 2 files, name one somename.html and the other somename.css. These two files hold all information, we need to make the site you see before you.

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 #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;}

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.

In part two we make the footer. And continue with the our basic design.

Category: CSS
Both comments and pings are currently closed.

Comments are closed.

Flickr Photos

Quick Contact

Your Name (required)

Your Email

Your Message

captcha