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!

Replace Form Buttons with Images

Charlie — Tue, 25 Aug 2009 21:54:20 +0000

“Replace the Form submit button with an image”

When designing a form with a submit button, how do you utilize an image for the button instead of using a plain ol’ grey box?

No problem, just use this code:

ThatGuyCharlie | Charlie Mathews Blog & Portfolio » HTML

How to Create a CSS Stylesheet

About

Example

Explanation

Replace Form Buttons with Images