Okay, here’s the thing. CSS is the way to build your site now. It’s efficient, it’s powerful, it beats HTML formatting anytime.
The thing is, it’s not as easy as it should be to learn your way around CSS. I tried and gave up. The biggest problem with CSS is the differing support among browsers. Your site can look perfect in one browser and look terrible in another. There are, of course, ways around this problem but for a beginner, these solutions just add to the headache. I don’t understand why they don’t just stick to the standards. That would make our lives so much easier.
Okay, now here’s what you can do. I’m assuming here that you already have a good grasp on HTML and would like to switch to a CSS based design.
- Step 1: Find a website that’s already using CSS
There are two ways of doing this. One way is to just buy a CSS based site template. You can find some at TemplateMonster.com. A harder way, is to search the net for a web site that is powered by CSS and has the layout that you want.
In my case, I did it the harder way. But I found a web site called A List Apart, which had the layout that I want. Check it out. It’s similar to the current Make-Your-Own-Web-Sites.com web site.
- Step 2: Customize the CSS
Once you’ve found the CSS site of your choice, you’ll want to customize it to suit your web site. You’ll have to find their css file. This file has a .css extension. To find their css file, just look in the source code of the web site for a link to a file with a .css extension.
You will now have to customize the css styles. Here’s what I did:
- Change the background image
- Change the header image
- Change the bullet images
- Change the font type
- Change the color scheme
- Change the width of the content page
Of course, in order to make these changes, you need to be able to know something about CSS. You can find a great CSS tutorial at W3Schools.com.
- Step 3: Create your web pages
After customizing your css styles, you can start creating your web pages. Just copy one of the pages from your chosen sample site, change the css link to point to your css file and add your own content.
Believe it or not, that’s it. Well, at least that’s what I did to create my site.
No related posts.
HI,
I read through your article about css. I had previously purchased a program to use as my shopping cart on my website. I started fiddling with it one day and discovered css. To make a long story short, it took me about 2 days but I discovered how to customize the css file for my site. I love it! It's so much easier to use. Because of my products I am constantly making changes. It's just like using a template.
http://www.kimbersjewelrykreations.com
css sounds great…. but does it work seemlessly with all browsers? ie tends to do thier own thing all the time.
Hi Kim,
Thanks for sharing your experience with CSS. I'm also just beginning to explore this area. In fact, visiting this page to write this comment just made me realize that I have to check my CSS styles again ;o).
Hi Kevin,
Unfortunately, uniform CSS support across browsers is still a problem. I've been trying to make my site look good between Firefox and Explorer and I had to use quite a few hacks. But I believe that CSS is here to stay and is worth learning. The browsers will catch up … in time.
)
I would love to convert my website from frames and html formatting to CSS controlled, but I have over 10,000 hard coded pages and I haven't found an easy way to "convert" them.
Ooo… that would be a difficult one. What do you use to build your pages now? I found that using Dreamweaver's template feature made it easier for me. So, all I had to do was update one template and all the pages within my site would change. Then I had to upload all my web pages again, but just once.
I need some help with the Asktheseguys wordpress theme..
I can't figure out how to get the header and ad bar at the top to go all the way across the screen.. Or better yet, how I can place an ad box in the empty space at the top right.
I can usually figure this stuff out easily, but can't find anything in the CSS that will make it work..
Anyone have any ideas?
Sorry Louis, but I'm not familiar with the Asktheseguys wordpress theme.