Runboard.com
You're welcome.



       Use the black navigation bar to log in or create your account.

 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9597
Karma: 132 (+147/-15)
ReplyQuote
posticon CSS Practice Page


I threw this practice page together for novices who want to see on-the-fly how CSS works. When you first load the page, it will look very ugly, with different objects having vastly different properties so you can see the difference.

Try sticking this code in there and see the changes:
body   { 

      background:#f4f3e9 url('http://img465.imageshack.us/img465/3052/contentbg1ls.jpg');
      font-size: 12px; font-family:verdana,arial,sans-serif;
      }
table { width: 90%; margin: 0 auto; }
td { vertical-align: top; }

/* Note: .master_table is the main table with the dashed green border */
.master_table { background:#EAEAE7 url('http://img85.imageshack.us/img85/4557/marblebg2hu.jpg');
           margin-top:1em; }
.master_table td { border: 2px solid; border-color: #fff #999 #999 #fff; }
td.master_table_header_td {
       border: 3px solid; border-color: #fff #999 #999 #fff; text-align: center; }
.first_list_td { width: 50%; }
td.second_list_td { border:1px solid; }

/* Note: .inner_table is the table with the dashed purple border. */
.inner_table { font-size: 12px; width:100%; }
.inner_table td { border: 1px solid; border-color: #999 #fff #fff #999; }

.firstspan, .secondspan, .thirdspan, .fourthspan { border: 1px solid black; }
.firstspan { color: #669;}

Now replace it with this in and view the changes:
body   { }

table { }
td { }

/* Note: .master_table is the main table with the dashed green border */
.master_table { }
.master_table td { }
td.master_table_header_td { }
.first_list_td { }
td.second_list_td { }

/* Note: .inner_table is the table with the dashed purple border. */
.inner_table { }
.inner_table td { }

.firstspan, .secondspan, .thirdspan, .fourthspan { }
.firstspan { }

Nothing is defined, so it's all just lumped together. Now try adding some of your own styles and see what you can come up with. If you come up with something that looks really good, feel free to post it here between the [code][/code] tags to show it off. emoticon

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
11/25/2005, 5:03 am Link to this post PM Lesigner Girl Read Blog
 
dadog963 Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 08-2006
Province: Wolves Mountain
Posts: 6
Karma: 0 (+0/-0)
ReplyQuote
posticon Re: CSS Practice Page


 emoticon it wont work because u yhave 2 edit it

---
<a href="http://com4.runboard.com/bwolvesunleashed">
<img src="http://img219.imageshack.us/img219/6888/wolvespv5.jpg"</img></a>
8/15/2006, 6:17 pm Link to this post PM dadog963 MSN Read Blog
 
dadog963 Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 08-2006
Province: Wolves Mountain
Posts: 6
Karma: 0 (+0/-0)
ReplyQuote
posticon Re: CSS Practice Page


nvm i found it emoticon

---
<a href="http://com4.runboard.com/bwolvesunleashed">
<img src="http://img219.imageshack.us/img219/6888/wolvespv5.jpg"</img></a>
8/15/2006, 6:22 pm Link to this post PM dadog963 MSN Read Blog
 
dadog963 Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 08-2006
Province: Wolves Mountain
Posts: 6
Karma: 0 (+0/-0)
ReplyQuote
Re: CSS Practice Page


heres a cool 1
body   { font-size: 12px; background-color:#f4f3e9; font-family:verdana,arial,sans-serif; }

table { width: 95%; margin: 0 auto; border: 1px solid #999; }
td { vertical-align: top; }

/* Note: .master_table is the main table with the dashed yello border */
.master_table { border: 5px dashed #0C0; }
.master_table_header_td {
       border: 1px solid; border-color: #fff #999 #999 #fff; text-align: left;
       font-weight:bold; background:#eee url('http://img85.imageshack.us/img85/4557/marblebg2hu.jpg'); }
.first_list_td { border: 1px solid #999; width:50%; }
.second_list_td { border: 1px solid red; background:#fff; }

/* Note: .inner_table is the table with the dashed purple border. */
.inner_table { font-size: 20px; width: 50%; border: 5px dashed #C9E; text-align: right; }
.first_inner_td { border: 1px solid gray; background-color: green; vertical-align:bottom; }
.second_inner_td { font-size: 25px; border: 1px dashed #ff0; background: green; color: blue; text-align: left; }
.third_inner_td { border: 1px solid black; background: #f03cd9; }

.firstspan, .secondspan, .thirdspan, .fourthspan { border: 1px solid black; }
.secondspan { color: #0C0; border-color:#00F; }
.fourthspan { display: block; margin: 1em 2em; background:#ccf; font: 150% georgia,'times old roman',serif; }


---
<a href="http://com4.runboard.com/bwolvesunleashed">
<img src="http://img219.imageshack.us/img219/6888/wolvespv5.jpg"</img></a>
8/15/2006, 6:27 pm Link to this post PM dadog963 MSN Read Blog
 
dadog963 Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 08-2006
Province: Wolves Mountain
Posts: 6
Karma: 0 (+0/-0)
ReplyQuote
Re: CSS Practice Page


coolcoolcoolcoolcoolcoolcoolcoolcoolcoolcoolcoolcoolcoolcoolcoolcoolcool


---
<a href="http://com4.runboard.com/bwolvesunleashed">
<img src="http://img219.imageshack.us/img219/6888/wolvespv5.jpg"</img></a>
8/15/2006, 6:29 pm Link to this post PM dadog963 MSN Read Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9597
Karma: 132 (+147/-15)
ReplyQuote
Re: CSS Practice Page


Yikes! It's almost impossible to read the blue text on the green background. emoticon

I'm glad you're having fun with it, dadog. emoticon

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
8/16/2006, 2:28 pm Link to this post PM Lesigner Girl Read Blog
 
Morwen Oronor Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 01-2008
Province: South Africa
Posts: 2604
Karma: 57 (+58/-1)
ReplyQuote
Re: CSS Practice Page


That was fun.
You are all very clever people.

 emoticon
8/11/2008, 4:29 pm Link to this post PM Morwen Oronor Read Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9597
Karma: 132 (+147/-15)
ReplyQuote
Re: CSS Practice Page


Thanks, Mo! emoticon

I'm glad you enjoyed it. emoticon

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
8/12/2008, 12:42 am Link to this post PM Lesigner Girl Read Blog
 


Add to this discussion




You are not logged in (login)
Back To Top

This board's time is GMT.

Board's time is GMT