How to get started with CSS!

mdifelice

I’ve started to update my site and the add flexibility of CSS is great.

Example: http://mdifelice.smugmug.com/gallery/677841



My CSS development process/environment.

• Open up your site to the new Style: SmugMug
• From what ever browser you are using (IE or Firefox), Right Click on the Page and click ”View Source”
• Copy page XHTML source to a new notepad document and save as: “smugmug.html”
• You should be using a GOOD XHTML/HTML/CSS Application. I use and highly recommend topSTYLE pro: http://www.bradsoft.com/topstyle/index.asp
• Start “topSTYLE pro” and open the file created in Step 3.
• From the File menu go ahead and create 2 new CSS style sheets, One called “style_work” and the other called “style_master”
• The key is to find all the Tags: , class and ID’s) and find out what area’s of the page they effect. The next few steps will allows us to link the 2 new style sheets created in 6 and view any changes to them on the smugmug.html” With the first one “style_work” being used for testing and messing around and the 2nd one, “style_master” being the final version, these are the changes we plan on adding to the (SmugMug > Control Panel> Customize> stylesheet HTML ) area. Note: the first tab in topSTYLE will show the smugmug.html page with no changes, that was you can see the default SmugMug style.
• In topSTYLE pro, click on one the new blank style sheets created in step 6 and find the “Select Preview File” icon above the preview pain and select the smugmug.html file created in step 3
• You can view screen shot from: http://mdifelice.smugmug.com/gallery/738509

[font=&quot]Part 2 coming soon.[/font]

Nikolai

Nice tut!
Waiting for #2

Mike Lane

mdifelice wrote:

I’ve started to update my site and the add flexibility of CSS is great.

Example: http://mdifelice.smugmug.com/gallery/677841



My CSS development process/environment.

• Open up your site to the new Style: SmugMug
• From what ever browser you are using (IE or Firefox), Right Click on the Page and click ”View Source”
• Copy page XHTML source to a new notepad document and save as: “smugmug.html”
• You should be using a GOOD XHTML/HTML/CSS Application. I use and highly recommend topSTYLE pro: http://www.bradsoft.com/topstyle/index.asp
• Start “topSTYLE pro” and open the file created in Step 3.
• From the File menu go ahead and create 2 new CSS style sheets, One called “style_work” and the other called “style_master”
• The key is to find all the Tags: , class and ID’s) and find out what area’s of the page they effect. The next few steps will allows us to link the 2 new style sheets created in 6 and view any changes to them on the smugmug.html” With the first one “style_work” being used for testing and messing around and the 2nd one, “style_master” being the final version, these are the changes we plan on adding to the (SmugMug > Control Panel> Customize> stylesheet HTML ) area. Note: the first tab in topSTYLE will show the smugmug.html page with no changes, that was you can see the default SmugMug style.
• In topSTYLE pro, click on one the new blank style sheets created in step 6 and find the “Select Preview File” icon above the preview pain and select the smugmug.html file created in step 3
• You can view screen shot from: http://mdifelice.smugmug.com/gallery/738509

[font=&quot]Part 2 coming soon.[/font]

Or you could get the firefox web developer plugin and hit <ctrl><shift>ctrl-shift-e to bring up the css editor and go to town.</shift></ctrl>

mdifelice

Thanks Mike I will look into that.

Mike Lane wrote:

Or you could get the firefox web developer plugin and hit <CTRL><SHIFT>ctrl-shift-e to bring up the css editor and go to town.</SHIFT></CTRL>

I'm just used to working our company web sites and using Dev Tools.

The cool part is that you can play around, have as many CSS files open and try different version and ideas. topStyle is a great app, I have tried them all.

Thanks again.

MD