Let’s being with downloading the trial version of CSSEdit. Which you can get for free and save files upto 2500 characters.

To ensure that we are all on the same page for this tutorial, I suggest downloading the same sample file and sample css. I am going to be using the sample files from csszengarden. If you have never seen the Zen Garden it’s a fun site that can be completely redesigned in css. They have many different versions of their same page. So it’s a fun site to redesign. So let’s download file (1) and file (2). Next put these two files in the same place and rename the css file to “sample.css”.

Now, let’s start up css edit and select what file we would like to work with. Once it launches, click File->New Style Sheet. Then click preview. Now, just drag your html file you downloaded in the previous step into the preview window. You should see the file in the window.

Next we want to override the style that is attached. The black Style Sheets hover window should show the style sheets attached. If not, place the sample file in your Sites/ folder and enable web sharing. Then you should be able to browse to localhost/~username/sample.html. Now you should see Extract and Override.

Now in our cssedit window we should see our extracted-sample.css file is loaded. The top of this file should say to override our previous sample.css. Now the fun part begins.

So now we are going to apply our new styles using this editor window. I’m going to begin by clearing out everything in the main window. This will give us a fresh start on the file. You will see that this updates in the preview window as well.

Now we are going to add a new theme to this window. If we want to see what elements to select we can just click the x-ray in the preview window. For example the css Zend is located at the css selection path of html body #css-zen-garden div#container div#intro div#pageHeader h1. This is great but we probably want all h1 elements to be rendered the same.

So, lets get some of the basic styles out of the way for our design. I am going to make this page look like it’s on a e-book reader. Just for a simple example. So after apply a few styles, we have what looks to be like a electronic paper style. Here are the styles applied so far.

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}
body{font:13px/1.5 Arial, Helvetica, sans-serif}a:focus{outline:1px dotted}hr{border:0 #ccc solid;border-top-width:1px;clear:both;height:0}h1{font-size:25px}h2{font-size:23px}h3{font-size:21px}h4{font-size:19px}h5{font-size:17px}h6{font-size:15px}ol{list-style:decimal}ul{list-style:disc}li{margin-left:30px}p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset{margin-bottom:20px}
body {
background-color: rgb(238, 238, 238);
color: rgb(51, 51, 51);
display: block;
font-size: 26px;
}
div#container{
margin: 0 auto;
font-size: 26px;
line-height: 36px;
max-width: 800px;
text-align: left;
width: 600px;
}

So the beauty of using cssedit is that we now have a visual update of all our changes to the style. If you are new to css it even provides for applying styles usuing their visual editor.

Let’s edit the title of this using the visual editor. The first thing we need to do is to defin what element we want to edit. Using the xray in the preview click css Zen Garden. Now we see the path, mentioned above. So we are just going to change all h1 elements. Start by typing in the editor ” h1 { ” (without quotes of course) now on the right apply your changes. All changes are updated automatically. Here i have added in the visual editor the following:

h1{
color: #5e5e5e;
font-size: 2em;
font-style: italic;
font-variant: small-caps;
text-align: center;
line-height: 1.5em;
}

The result is shown above. Since I’m going for the electronic paper look, I’m almost donw. There are a few more styles that I’m going to apply using the wysiwyg editor.

So this is my new look, it’s nothing great, but it does illustrate just how easy it is to apply css quickly to a document. Let’s look a few other features of CSSEdit.

CSSEdit provide W3 validation for css 2.0 and css 3.0. Clicking validate on the toolbar will validate the css in the main document body. It shows us tat we have a error on the reset/text css that we added earlier. We can either ignore this error or remove/fix this part of the css. It seems hat content: is not a valid. So if we remove this we have and click validate again, we have a valid css file. This is very useful.

CSSEdit also adds the ability to automatically format the css to look “pretty”. This is useful if you can’t stand poorly formatted css or you download css from somewhere that has been compressed and is very hard to read.

That’s pretty much it for using CSSEdit. The next thing to do is either copy & past our css or export it to another document. When you export you can select all the documents that you want to attached to and remove existing styles from those documents first. So after a few more minot tweeks we can see the final design. It’s nothing fancy, but just shows how easy to use CSSEdit is. This blog & myself are not sponsored by CSSEdit, MacRabbit, or CSSZenGarden.

If you are really into css stay tuned for the next post about using jquery ui as a basis for you next project. Please comment about CSSEdit, or any other CSS tools that you find useful below. Here is the final css.

/* @override http://localhost/zen-garden/sample.css */

/* reset txt */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent
}

body {
	line-height: 1
}

ol,ul {
	list-style: none
}

blockquote,q {
	quotes: none
}

body {
	font: 13px/1.5 Arial, Helvetica, sans-serif
}

a:focus {
	outline: 1px dotted
}

hr {
	border: 0 #ccc solid;
	border-top-width: 1px;
	clear: both;
	height: 0
}

h1 {
	font-size: 25px
}

h2 {
	font-size: 23px
}

h3 {
	font-size: 21px
}

h4 {
	font-size: 19px
}

h5 {
	font-size: 17px
}

h6 {
	font-size: 15px
}

ol {
	list-style: decimal
}

ul {
	list-style: disc
}

li {
	margin-left: 30px
}

p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset {
	margin-bottom: 20px
}

body {
	background-color: rgb(238, 238, 238);
	color: rgb(51, 51, 51);
	display: block;
	font-size: 26px;
}

div#container {
	margin: 0 auto;
	font-size: 26px;
	line-height: 36px;
	max-width: 800px;
	text-align: left;
	width: 500px;
	padding-right: 150px;
}

h1 {
	color: #5e5e5e;
	font-size: 2em;
	font-style: italic;
	font-variant: small-caps;
	text-align: center;
	line-height: 1.5em;
	border-bottom: thick solid #919191;
}

a {
	color: #919191;
}

div#quickSummary p.p1:first-letter {
	padding-right: 5px;
	font-size: 150%;
	float: left;
	font-style: italic;
}

span acronym {
	color: #009191;
}

h2 {
	border-bottom: thin solid #919191;
}

h3 {
	border-bottom: dotted thin #919191;
}
div#pageHeader h1 span
{
	padding-bottom: 20px;
}
div#linkList {
	position: absolute;
	margin-left: 500px;
	right:0;
	top: 200px;
	padding-right: 20px;
}
div#linkList h3{
	color: #5e5e5e;
}
ul li{
	list-style-image: url(images/bullet.png);
	list-style-position: outside;
	font-size: 20px;
	text-decoration: none;
}
ul li a {
	font-size: 20px;
	text-decoration: none;
	color: #ff1e91;
}
ul li a:hover{
	border-bottom: 2px solid #2d2bfa;
}

p.p5 span a{
	color: #ff9123;
	font-style: italic;
	text-decoration: none;
}