# How to create a style sheet using Notepad



## Ladyredcat3 (Aug 26, 2008)

Hi everyone,
I am a college student. I know how to make a web page using HTML but now our professor wants us to utilize style sheets. I have done some research online but it has made me even more confused. Can anyone give me some basics on how to just get my ccs page started? I can't figure out where to put this link<link href="mystyle.css" rel="stylesheet" type="text/css" media="screen"> or how to get it started. Thanks for your help; it's greatly appreciated!


----------



## peterhuang913 (May 24, 2008)

Put that in the header.


----------



## DonaldG (Aug 23, 2007)

Hi Ladyredcat - a warm welcome to TSF :wave:

I normally create a folder(directory) named css

I place a copy of my style sheet in that folder.

Then create the Cascading Style Sheet and save it EG: mystyle.css

a simple style sheet:


```
H1 {font: bold 20pt Verdana, Arial, Helvetica; color: Navy}
H2 {font: bold 18pt Verdana, Arial, Helvetica; color: Navy}
H3 {font: bold 16pt Verdana, Arial, Helvetica; color:Navy}
H4 {font: bold 12pt Verdana, Arial, Helvetica; color: Navy}
H5 {font: bold 10pt Verdana, Arial, Helvetica; color: Navy}
H6 {font: bold 8pt Verdana, Arial, Helvetica; color: Navy}
TH  {font: bold  10pt Verdana, Arial, Helvetica; color:Navy}
TD {font: 8pt Verdana, Arial, Helvetica; color:Navy}
P {font: 8pt Verdana, Arial, Helvetica; color: Navy}
UL {font: 8pt Verdana, Arial, Helvetica; color: Navy}  

BODY {background-color: #FFFFFF}
.size07point {  font-size: 7pt}
.size08point {  font-size: 8pt}
.size09point {  font-size: 9pt}
.size10point {  font-size: 10pt}
.size12point {  font-size: 12pt}
.size14point {  font-size: 14pt}
.size16point {  font-size: 16pt}
.size18point {  font-size: 18pt}
.size20point {  font-size: 20pt}
.size24point {  font-size: 24pt}

.Boldsize07point {  font-weight: 700; font-size: 7pt}
.Boldsize08point {  font-weight: 700; font-size: 8pt}
.Boldsize09point {  font-weight: 700; font-size: 9pt}
.Boldsize10point {  font-weight: 700; font-size: 10pt}
.Boldsize12point {  font-weight: 700; font-size: 12pt}
.Boldsize14point {  font-weight: 700; font-size: 14pt}
.Boldsize16point {  font-weight: 700; font-size: 16pt}
.Boldsize18point {  font-weight: 700; font-size: 18pt}
.Boldsize20point {  font-weight: 700; font-size: 20pt}
.Boldsize24point {  font-weight: 700; font-size: 24pt}

.Bold {  font-weight: 700}
```
The following code will create a simple blank web page for you to try - Create a table and add some text...


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<link href="css/mystyle.css" rel="stylesheet" type="text/css" />

<title>My Home Page</title></head>
<body>


</body>
</html>
```


----------



## Redcore (Aug 14, 2007)

I'd encourage writing HTML and CSS (as well as many other things like PHP, Python, etc) in Notepad ++ ... it's more powerful than Notepad (by FAR) and it's free too 

http://notepad-plus.sourceforge.net


----------



## Ladyredcat3 (Aug 26, 2008)

Thank you for all your replies. Donald G, thank you especially for going into more detail. It was greatly appreciated and helped me to create the style sheet I needed for my homework assignment. If I could have used anything other than Notepad for this assignment it would have been much easier but this class requires the useage of Notepad only to create our final project web pages. For future projects after graduation though I can use whatever software I deem suitable so any input you care to pass along will be of great use to me as I continue my education in this field and since I am also fairly new to web design. 

Thanks again everyone!!


----------



## carsey (Aug 19, 2006)

Wow, only notepad, that would be hard. I can only jsut get by with dreamweaver 8. 

Webpages are also a great page to get started with CSS. You can view the CSS of any page my adding a direct link to the file in the URL bar. It should help you with how its laid out and the functions it can do.


----------



## Ladyredcat3 (Aug 26, 2008)

Yes I agree Dreamweaver is great to use in the creation of web pages. In my last class, we used both Flash and Dreamweaver to create a fictional e-commerce web site using these software packages. I admit though that I spent most of the time pulling my hair out in frustration but after figuring out how to use the many functions, it became easier. Although from what I gather, if you want to become a web designer you need to not only know these programs but you also need to know html coding as well so that if there is a problem you can fix it. I guess that is why I have to take the class I am taking now. This way I am learning how to code a web site entirely in html. :0)


----------



## JaceRaven (Sep 3, 2008)

I can honestly say that I have never used any software like dreamweaver or frontpage. I know the software however I can't stand using them. It just creates so much excessive and horribly formatted code and becomes a nightmare to have to try and troubleshoot.

I stick with the process of using Photoshop to create my initial layout graphically then save and hand code all of the site with UE and PSPad.


----------



## manc39 (Dec 17, 2005)

I like Dreamweaver, mostly for the ftp capabilities combined with quick and easy editing.

The best thing about the enhanced text editors like Notepad++, Notepad2 or whatever is the syntax highlighting. Very, very useful- helps to make sure you don't miss a closing tag and helps make your code easy to read.


----------



## dm01 (Oct 10, 2006)

I tried using Dreamweaver once for a class at school. I ended up with a B in the course. (I haven't gotten below an A+ in any Computer Science or Computer Information Management course, before that one.) All I have to say is I seriously would have rathered using Notepad. I don't know why schools insist on forcing students to use web destroying programs such as Dreamweaver and FrontPage.

Dreamweaver is responsible for the death of two monitors. Well, sort of; after getting completely frustrated by two THOUSAND validation errors in the "XHTML" Dreamweaver insisted on spewing out, I threw my manriki-gusari into the monitor. Very expensive, yet very therapeutic. I installed the second monitor on my system. I am a slow learner.

[/offtopic]

You may be better off (for testing purposes, anyways) to use the following:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>index2</title>
<style type="text/css">
/*CSS goes here*/
<style>
</head>
<body>
<!--your XHTML goes here-->
</body>
</html>
```


----------



## ritalin (Jul 14, 2008)

To the post above: just primarily view code. Only view the other tabs if you are having trouble visuali-ng your output.


Dreamweaver = Notepad + color-coding.

It's allot better looking than notpead++, so if you can get ahold of it for free or nearly free (many schools sell programs 50-100 dollar programs for like 10 bucks, drop the opensource, because there are many many useful functions dreamweaver has that np++ doesn't.


----------

