Lesigner Girl
Minerva
Head of Runboard staff
Registered: 11-2005
Posts: 9597
Karma: 132 (+147/-15)
|
ReplyQuote
|
|
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. 
|
11/25/2005, 5:03 am
|
Link to this post
PM Lesigner Girl
Read Blog
|
dadog963
Citizen
Registered: 08-2006
Province: Wolves Mountain
Posts: 6
Karma: 0 (+0/-0)
|
ReplyQuote
|
|
Re: CSS Practice Page
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
Citizen
Registered: 08-2006
Province: Wolves Mountain
Posts: 6
Karma: 0 (+0/-0)
|
ReplyQuote
|
|
Re: CSS Practice Page
nvm i found it
--- <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
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
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
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.
I'm glad you're having fun with it, dadog. 
|
8/16/2006, 2:28 pm
|
Link to this post
PM Lesigner Girl
Read Blog
|
Morwen Oronor
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.
|
8/11/2008, 4:29 pm
|
Link to this post
PM Morwen Oronor
Read Blog
|
Lesigner Girl
Minerva
Head of Runboard staff
Registered: 11-2005
Posts: 9597
Karma: 132 (+147/-15)
|
ReplyQuote
|
|
Re: CSS Practice Page
Thanks, Mo!
I'm glad you enjoyed it. 
|
8/12/2008, 12:42 am
|
Link to this post
PM Lesigner Girl
Read Blog
|