Making a CSS rule
Author |
Message |
joshuabaker
|
Posted: Mon Nov 24, 2008 8:10 am Post subject: Making a CSS rule |
|
|
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 |
|
|
|
|
![](images/spacer.gif) |
Sponsor Sponsor
![Sponsor Sponsor](templates/subSilver/images/ranks/stars_rank5.gif)
|
|
![](images/spacer.gif) |
DemonWasp
|
Posted: Mon Nov 24, 2008 10:21 am Post subject: RE:Making a CSS rule |
|
|
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. */
}
|
|
|
|
|
|
![](images/spacer.gif) |
gianni
![](http://compsci.ca/v3/uploads/user_avatars/2828365714b5bd9cc211e8.png)
|
Posted: Tue Dec 09, 2008 12:24 pm Post subject: RE:Making a CSS rule |
|
|
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! |
|
|
|
|
![](images/spacer.gif) |
Unforgiven
![](http://compsci.ca/v3/uploads/user_avatars/1079943477487f64d067366.jpg)
|
Posted: Tue Dec 09, 2008 12:32 pm Post subject: Re: Making a CSS rule |
|
|
Just to toss it in, W3Schools has some decent intro-level references, including CSS. Worth a glance. |
|
|
|
|
![](images/spacer.gif) |
gamemaniac
|
Posted: Mon Aug 24, 2009 5:39 am Post subject: Re: Making a CSS rule |
|
|
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? |
|
|
|
|
![](images/spacer.gif) |
Unforgiven
![](http://compsci.ca/v3/uploads/user_avatars/1079943477487f64d067366.jpg)
|
Posted: Tue Aug 25, 2009 11:26 am Post subject: Re: Making a CSS rule |
|
|
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? |
|
|
|
|
![](images/spacer.gif) |
[Gandalf]
![](http://compsci.ca/v3/uploads/user_avatars/189297994e4c716fec7f1.png)
|
Posted: Tue Aug 25, 2009 2:54 pm Post subject: Re: Making a CSS rule |
|
|
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. |
|
|
|
|
![](images/spacer.gif) |
gianni
![](http://compsci.ca/v3/uploads/user_avatars/2828365714b5bd9cc211e8.png)
|
Posted: Tue Sep 01, 2009 6:53 pm Post subject: Re: Making a CSS rule |
|
|
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. |
|
|
|
|
![](images/spacer.gif) |
Sponsor Sponsor
![Sponsor Sponsor](templates/subSilver/images/ranks/stars_rank5.gif)
|
|
![](images/spacer.gif) |
btiffin
![](http://compsci.ca/v3/uploads/user_avatars/189169540547b535e50e4a7.jpg)
|
Posted: Wed Sep 02, 2009 8:09 pm Post subject: Re: Making a CSS rule |
|
|
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 |
|
|
|
|
![](images/spacer.gif) |
Vermette
![](http://compsci.ca/v3/uploads/user_avatars/637825944810b5d4444c6.jpg)
|
Posted: Wed Sep 02, 2009 9:23 pm Post subject: Re: Making a CSS rule |
|
|
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. |
|
|
|
|
![](images/spacer.gif) |
btiffin
![](http://compsci.ca/v3/uploads/user_avatars/189169540547b535e50e4a7.jpg)
|
Posted: Wed Sep 02, 2009 10:12 pm Post subject: RE:Making a CSS rule |
|
|
Good to know. Thanks Vermette. But .. usually, Konqueror or right now, Opera 10.
Cheers |
|
|
|
|
![](images/spacer.gif) |
gianni
![](http://compsci.ca/v3/uploads/user_avatars/2828365714b5bd9cc211e8.png)
|
Posted: Thu Sep 03, 2009 12:01 am Post subject: Re: Making a CSS rule |
|
|
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. |
|
|
|
|
![](images/spacer.gif) |
|
|