How to Create a CSS Stylesheet

Charlie — Tue, 29 Dec 2009 06:01:47 +0000

Although simple, this is a question I’ve been asked numerous times by learner developers. This “tutorial” assumes you have also never created a html and css webpage before because the two facets are so closely linked.

About

Firstly, you need to understand what CSS is. CSS stands for Cascading StyleSheet and it is the key element of web development. CSS is used to tell a webpage how you want it to look. It can be used to define id’s, classes, and other html elements.

You can load a stylesheet in html using this code:

Example

Now, an example. Create a new file in notepad or a similar text editor and save it as style.css to a folder on your computer. Repeat this and create another file called index.html and save it to the same folder as your style.css file. Open your index.html in a text editor and add this code:

My First Webpage

Sample Text

As you can see, we have added a

element with a class of “mybox”. Now, open your style.css and add the div class by typing this code.

.mybox {

width: 100px ;

height: 100px;

background-color: #000000 ;

}

Save your style.css and index.html.

Explanation

What you have just done is told the “mybox” class to be 100 pixels high by 100 pixels wide with a background color of black (which is the same as #000000). Double click index.html and it will open in your default web browser. See your black box? Pretty cool, hu?

There are hundreds of ways and commands you can use in CSS so I’d recommend reading more about CSS at W3Schools. Have fun!

Firefox Plugins You Just can't Live Without

Charlie — Tue, 10 Nov 2009 21:44:47 +0000

After, using Internet Explorer for years, the speed and amazing customization abilities of Firefox astounded me. I finally understood why people went on and on about “Firefox, the best browser ever”. Even so, it took me a while to find customizations (plugins) which could really tap into the full power of this new browser. Here are the top choices I use as a web developer and full time internet surfer.

1) Download Status Bar
No Kidding, If it were not for this smart plug-in, I would become a raving maniac a long time ago. The number of small file downloads I make on a regular basis causes the constant download box pop-ups to turn into a big pain. The Download Status Bar packs all the information you want to see such as download name, speed, and amount completed into a status bar which appears at the bottom of your browser for easy and uninterrupted browsing.

2) Firebug

This plug-in is the ultimate tool for any web developer using HTML, CSS, and Javascript. It allows you to edit your web page and view the changes in real time. You can hover over elements in your code and see exactly how your div’s are being positioned and displayed with a highlight tool. Over all it’s other features, my favorite is the ability to edit HTML and CSS for any element in an instant.

3) Xmarks (FoxMarks)

Over the years, I have often lost computers to fatal errors and blue screens. In doing so, I lost all my bookmarks which are essential to my daily work online. This nifty service saves you from ever having that problem. It backs up your bookmarks every time you exit the browser and they are then made available to you online or restore-able to a new computer.

4) DownloadHelper

Ever seen media players in a web-page with no download option? This easy to use plugin tracks actively streaming videos and mp3′s and makes it possible for you to download videos from most popular sharing sites.

5) DownThemAll!

For easy file downloads, this download manager is the first of it’s kind available in Firefox. It makes the job of downloading split files a whole bunch easier without installing extra, spyware ridden software.

ThatGuyCharlie | Charlie Mathews Blog & Portfolio » HTML

How to Create a CSS Stylesheet

About

Example

Explanation

Firefox Plugins You Just can't Live Without