Wednesday, December 08, 2004

Cascading Style Sheets (CSS)

Recently I have been learning CSS. I have talked about it on my site a couple of times, but I have never really explained it. Cascading style sheets have been around for years. People used to use them for basic web settings on multiple pages such as Background colors, text decoration, and pretty much the overall "Style" of the page. They were used to make the page pretty.

Now CSS and CSS2 is being used to create the entire web design. Tables are no longer being used, spacer gif's are being done away with, now with CSS you can do layouts, navigational menu's, or pretty much anything your mind can dream up.

Here is an example of CSS code:

-----------------------------------------------
body { background:#96B4D8;
margin:0;
padding:10px 0 14px;
font:x-small Verdana,Sans-serif;
text-align:center; color:#333;
font-size/* */:/**/small; font-size: /**/small; }

-----------------------------------------------

As you can see the Body Backround color is set to a nice blue, that is what the #96B4DB is.
There is no margin on the body, but there is paddiing on the left, and on the right 10px is 10 pixels. The font is set to extra small, and Verdana, but if your computer doesn't have Verdana Font, then it is set to use Sans-serif.
The text will be aligned in the center of the page, or the layout cell. And the color is dark gray which appears black.

I hope that this doesn't bore you, but Jessica Ferris posted a comment about my header and asked if I used CSS to design that. The answer is no, I used Adobe PhotoShop to create the header image, but the image is a background property of a layout cell.

To learn more about CSS, you must vist www.csszengarden.com it is an amazing site showing you what you can do with CSS design.

Here are some of my favorites.

http://www.csszengarden.com/?cssfile=/123/123.css&page=2
http://www.csszengarden.com/?cssfile=/112/112.css&page=3
http://www.csszengarden.com/?cssfile=/099/099.css&page=4

CSS is very powerful. Older browsers don't support some of the new code, but, only people that are in the dark ages are using browsers older than Explorer 4.o or Netscape 4.0.

I am still very new at this, but if you ever have any questions, I may be able to help answer them.

Merry Christmas!


3 Comments:

Katie said...

Way over my head. I'm thoroughly impressed, more so because I barely understand any of what you said. All I know is that it looks very impressive and I am wowed at the final result so whatever it took you to get there must be something amazing.

9:28 AM  
jes said...

grrr...it's way over my head too, but i still want to understand it. thanks for posting this, ed-d.

9:44 AM  
Anonymous said...

I just came accross your site from dooce.com....... you are too funny. I love it!

http://thehouseofcards.typepad.com/my_house_of_cards/

Rebekah

5:59 AM  

Post a Comment

Links to this post:

Create a Link

<< Home