Noob requiring knowledge on CSS

Denver Gamio

Denver Gamio

Pro Article Writer
Sep 21, 2009
249
1
0
Paris
ezinearticles.com
Hi. Since this is the design section, I guess I’ll post my thoughts and questions here. I want to learn CSS and have Dreamweaver installed. But firstly I would like to know whether the following sites are made in CSS:
Apple.com (the clickable buttons at the top, they have the hit effect and rollover effects)
Hallmark.com (the entire banner is made so that when we click on the arrows for left and right, the images change)
Basically, I want to know whether these sites are created in CSS or HTML. I assume CSS, and if so, any good place to start with tutorials for Dreamweaver CSS? (PS: I know it is not flash and do not want to use flash because the site becomes heavy to load)
 


HTML and CSS go hand in hand. I haven't check those sites but I'm sure they use some sort of CSS and HTML combo, most sites that are any good do now adays. Learn the basics of CSS before you dive right into working with it with Dreamweaver. Understand the basics before you go complex. There are plenty of tutorials out there, that's why God created Google.

Good Luck!
 
As mentioned above css is the styling portion of html. They work together. The apple.com navigation menu can be created in css. The hallmark.com is more than likely a jquery slider which will use css for styling purposes. To get a feel for what css is go to w3schools.com.
 
kblessinggr said:
Need some followup? (just confused why you already thanked everyone on the 15th, then bumped it with another thank you today when no one responded to you.)
Click to expand...
nah.. I was messing with the CSS stuff very confusing though, finally managed to make my buttons with a hit state and up state using a picture(sux that I cannot do that normally in css without the pic). But karl tell me is it possible to create trasnparency in css? like this site www.espnstar.com there is some transparency type of bordering so that the pic can be seen through.
PS: for the record, I do not like css it ain't as easy as .net
 
Denver Gamio said:
nah.. I was messing with the CSS stuff very confusing though, finally managed to make my buttons with a hit state and up state using a picture(sux that I cannot do that normally in css without the pic). But karl tell me is it possible to create trasnparency in css? like this site www.espnstar.com there is some transparency type of bordering so that the pic can be seen through.
PS: for the record, I do not like css it ain't as easy as .net
Click to expand...


You will notice they are using images saved as .png for the foreground. The png image can be saved as a true transparent where as .gif will have a matte around the image.

If you really want to figure out how they are doing it just right click on area and view background image. Then get a copy of the css file by using the web developer plugin for firefox. You can also use firebug which is another great plugin and view the css as you inspect elements of a webpage.

If you really want to learn css and want a simpler approach to the css structure, take a look at 960.gs. Its a grid system that many professional developers use. It may seem over the top at first but I suggest you read over it and get an idea for the system. Then when your css skills improve you may realize the potential of the 960 grid.
 
  • Like
Reactions: Denver Gamio
1nspire said:
You will notice they are using images saved as .png for the foreground. The png image can be saved as a true transparent where as .gif will have a matte around the image.

If you really want to figure out how they are doing it just right click on area and view background image. Then get a copy of the css file by using the web developer plugin for firefox. You can also use firebug which is another great plugin and view the css as you inspect elements of a webpage.

If you really want to learn css and want a simpler approach to the css structure, take a look at 960.gs. Its a grid system that many professional developers use. It may seem over the top at first but I suggest you read over it and get an idea for the system. Then when your css skills improve you may realize the potential of the 960 grid.
Click to expand...
hey thanks a bunch for the information. I never knew there were addons for viewing the css of another website. thanks. Just another question, how do I use the background-size method? It says this function is unsupported. This is my code


#menu ul{
float:left;
background:url(../images/1.png) repeat-x top left ;
background-size:-----> THIS LINE GETS UNDERLINED IN GREEN BY DREAMWEAVER
border:4px outset #999;
font-size:16px;
font:bold;
width:178px;
text-align:center;
height:40px}

if this does not work, how can i increase the bg size through css?
 
I think that's just for CSS 3, not a lot of browsers will support that yet. You already have width and height set.
 
Well I am a bit confused with that. I am using dreamweaver cs4. So does that not support css3? or is it dependent on the browsers, because I use safari 4 or IE8 and still it says unsupported.
 
You must log in or register to reply here.
Top Bottom