Making a CSS rule

[joshuabaker]

Hello, There

The way that i design a website is by opening photoshop creating the design, the slicing it, then export it by "saving for web" and then opening it in dreamweaver. The problem is that i don't know how to setup "CSS". I am told that it can do this task for me. So for every one of the buttons on my page i just create a rollover over image and the use the "rollover creator" in dreamweaver to make it function on the page. But i have to do this for every page and it takes a long time. Is there anyway to i guess define what's in each table in css(so that i can have the same rollover in each table on each page)?

Hope this makes scene.

Josh Baker

[DemonWasp]

Background: Cascading Style Sheets (CSS) are a technique for applying visual styles to an existing layout (which is implemented in HTML, XHTML, or any other -ML...ml meaning "markup language").

Beyond that, I don't know what to do with Dreamweaver. I'd bet that the majority of people write their webpages by hand (actually remarkably easy and interesting).

If you want to look at modifying the code, you can create CSS classes that activate on mouse-over events using the :hover pseudo-selector, such as the following:

code:

.coolThing :hover {   background-color: #f00;  /* Makes anything with the coolThing class turn red when you put your mouse over it. */ }

[gianni]

Yea, I'd take a look at this tutorial here: http://css.maxdesign.com.au/selectutorial/, probably the best on the internet. It'll definitely get you started with CSS so you start writing your own code, which will then allow you to create better designs! Woohoo!

[Unforgiven]

Just to toss it in, W3Schools has some decent intro-level references, including CSS. Worth a glance.

[gamemaniac]

I understand that CSS is embedded in HTML but could you recommend which option could be the best if you have to design a website?

[Unforgiven]

gamemaniac @ Mon Aug 24, 2009 5:39 am wrote:

I understand that CSS is embedded in HTML but could you recommend which option could be the best if you have to design a website?

Which option for what?

[[Gandalf]]

gamemaniac @ 2009-08-24, 5:39 am wrote:

I understand that CSS is embedded in HTML but could you recommend which option could be the best if you have to design a website?

The better option is making use of CSS.

[gianni]

gamemaniac @ Mon Aug 24, 2009 5:39 am wrote:

I understand that CSS is embedded in HTML but could you recommend which option could be the best if you have to design a website?

Also, CSS shouldn't be embedded into HTML.

[btiffin]

Re embedding CSS;

I'm all for external style sheets;

code:

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

in the html head. (For the curious, rel is short for relationship).

BUT, for pages that need to get designed quickly, inline style properties are fine, in my un-pro webhead humble opinion. For webbing in the large, external is a must and affords a lot of consistency for free. Consistency makes everyone involved look just that little bit smarter and diligent. And yay for the programmers, who can punt the nitty gritty arty over to the design department (usually the person on the team that dresses the best, and smells less funny than the rest)

To be honest though, when I see something I like, it's pretty sweet to be able to View Page Source and see what font/attributes/tricks are in use, so inline seems friendlier to explorers and leeches.

Cheers

[Vermette]

btiffin @ September 2nd 2009, 20:09 wrote:

To be honest though, when I see something I like, it's pretty sweet to be able to View Page Source and see what font/attributes/tricks are in use, so inline seems friendlier to explorers and leeches.

Not sure what browser you're using, but if it's Firefox then Firebug is indispensible for tasks like this.

[btiffin]

Good to know. Thanks Vermette. But .. usually, Konqueror or right now, Opera 10.

Cheers

[gianni]

btiffin @ Wed Sep 02, 2009 8:09 pm wrote:

BUT, for pages that need to get designed quickly, inline style properties are fine, in my un-pro webhead humble opinion. For webbing in the large, external is a must and affords a lot of consistency for free. Consistency makes everyone involved look just that little bit smarter and diligent. And yay for the programmers, who can punt the nitty gritty arty over to the design department (usually the person on the team that dresses the best, and smells less funny than the rest)

To be honest though, when I see something I like, it's pretty sweet to be able to View Page Source and see what font/attributes/tricks are in use, so inline seems friendlier to explorers and leeches.

Cheers

Embedding style information and (most) images is semantically wrong, regardless of how quickly the page is being developed. Style information should never be mixed with data, the same goes with JavaScript (functionality). Usually the tricks, etc.. are even easier to grok when they're self-contained as well - everything is in one place, as opposed to spread out across an entire file.