Dreamweaver & CSS

I am just beginning to learn about Dreamweaver CS3 and found SmartWebby.com a helpful website on how to simply create a new CSS style sheet in Dreamweaver.

Open your site in Dreamweaver and do the following:

1. Open any page of your site and select window > CSS Styles and Click the New CSS Style button (+ icon), a pop-up window will show up.
2. Select Class in the Selector Type. Now type your style name in the Name box (example: .bullet). Use the Tag Selector Type for redefining HTML tags or the Advanced Selector Type for hovers, id attributes or combination of tags.
3. Define the style in a New Style Sheet, give a name (example: styles.css) and save it under your site root. Click OK.
4. In the CSS Style Definition pop-up window that appears give the Formatting Attributes like Font, List, Background, Border, Positioning, etc.

Pretty simple, don't you think?

Time to create!

I found another great site that will really help you get going and create your own CSS. I am becoming a big fan of the W3C site. So please check out "Starting with HTML + CSS". The reason this site is appealing is because it allows the user to navigate quickly through various areas of CSS tutorials. For instance, if you already know how to get started and are eager to learn about color, the click of a button will take you directly to that information without having to read a bunch of stuff you already know.
On a side note, be sure to check out the side navigation bar of this website. It is a good example of how to use a frame effectively.

Tables with CSS

Creating tables and columns in HTML can be a little tricky, getting the text to line up, or having the right spacing, adding a little flair. So, here is a helpful tutorial site that provides help for all of the above little obstacles, from Israel Jernigan.

Benefits of CSS

There are many benefits to utilizing CSS. Here are just a few key benefits as outlined on Web Design from Scratch:

1. Much more flexible - Styles can all be written in one place and used as needed. When you have multiple pages on one site, CSS makes it much easier to change the styles across the entire site as a whole instead of redefining each and every page.
2. Size - Using CSS creates much smaller page coding, in turn it makes it easier to navigate through the page when it needs updating.
3. Separates style from content - Keeping your style definitions separate from your content and content-structure makes it possible to re-purpose the same content for different media. This includes styling pages differently for printing, as well as other user agents like voice (text-to-speech) and mobile devices.

Why CSS?

The reason for my interest in choosing the topic of Cascading Style Sheets (CSS) is because of time. When we first started the class and started writing HTML, my first thought was that this is very cool but surely there must be shortcuts out there to use. Wouldn’t it be cool to have something like hotkeys available where you could hit F5 or something like that and it would plug in all the extra typing for you (style=“50%, font=#64991,etc….)? Well, I think I have found a solution in CSS. Basically CSS is a feature that is added to HTML that allows developers and users to control how pages are displayed. A style sheet can be created defining certain elements and then can be added to any web page, essentially saving time and work. A great website that displays all of the beauty of CSS is appropriately named CSS Beauty. Be sure to check it out, it is a must see.