background:#aba; margin:0; text-align:center; line-height: 1.5em; font:x-small Trebuchet MS, Verdana, Arial, Sans-serif; color:#333333; font-size/* */:/**/small; font-size: /**/small; } /* Page Structure ----------------------------------------------- */ /* The images which help create rounded corners depend on the following widths and measurements. If you want to change these measurements, the images will also need to change. */ #outer-wrapper { width:740px; margin:0 auto; text-align:left; font: normal normal 100% 'Trebuchet MS',Verdana,Arial,Sans-serif; } #main-wrap1 { width:485px; float:left; background:#d9bfef url("http://www.blogblog.com/rounders/corners_main_bot.gif") no-repeat left bottom; margin:15px 0 0; padding:0 0 10px; color:#333333; font-size:97%; line-height:1.5em; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #main-wrap2 { float:left; width:100%; background:url("http://www.blogblog.com/rounders/corners_main_top.gif") no-repeat left top; padding:10px 0 0; } #main { background:url("http://www.blogblog.com/rounders/rails_main.gif") repeat-y left; padding:0; width:485px; } #sidebar-wrap { width:240px; float:right; margin:15px 0 0; font-size:97%; line-height:1.5em; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } .main .widget { margin-top: 4px; width: 468px; padding: 0 13px; } .main .Blog { margin: 0; padding: 0; width: 484px; } /* Links ----------------------------------------------- */ a:link { color: #0d0710; } a:visited { color: #0d0710; } a:hover { color: #0d0710; } a img { border-width:0; } /* Blog Header ----------------------------------------------- */ #header-wrapper { background:#d9bfef url("http://www.blogblog.com/rounders/corners_cap_top.gif") no-repeat left top; margin-top:22px; margin-right:0; margin-bottom:0; margin-left:0; padding-top:8px; padding-right:0; padding-bottom:0; padding-left:0; color:#0d0710; } #header { background:url("http://www.blogblog.com/rounders/corners_cap_bot.gif") no-repeat left bottom; padding:0 15px 8px; } #header h1 { margin:0; padding:10px 30px 5px; line-height:1.2em; font: normal bold 200% 'Trebuchet MS',Verdana,Arial,Sans-serif; } #header a, #header a:visited { text-decoration:none; color: #0d0710; } #header .description { margin:0; padding:5px 30px 10px; line-height:1.5em; font: normal normal 100% 'Trebuchet MS',Verdana,Arial,Sans-serif; } /* Posts ----------------------------------------------- */ h2.date-header { margin-top:0; margin-right:28px; margin-bottom:0; margin-left:43px; font-size:85%; line-height:2em; text-transform:uppercase; letter-spacing:.2em; color:#335577; } .post { margin:.3em 0 25px; padding:0 13px; border:1px dotted #bb09f5; border-width:1px 0; } .post h3 { margin:0; line-height:1.5em; background:url("http://www.blogblog.com/rounders/icon_arrow.gif") no-repeat 10px .5em; display:block; border:1px dotted #bb09f5; border-width:0 1px 1px; padding-top:2px; padding-right:14px; padding-bottom:2px; padding-left:29px; color: #bb09f5; font: normal bold 135% 'Trebuchet MS',Verdana,Arial,Sans-serif; } .post h3 a, .post h3 a:visited { text-decoration:none; color: #bb09f5; } a.title-link:hover { background-color: #bb09f5; color: #333333; } .post-body { border:1px dotted #bb09f5; border-width:0 1px 1px; border-bottom-color:#d9bfef; padding-top:10px; padding-right:14px; padding-bottom:1px; padding-left:29px; } html>body .post-body { border-bottom-width:0; } .post p { margin:0 0 .75em; } .post-footer { background: #ded; margin:0; padding-top:2px; padding-right:14px; padding-bottom:2px; padding-left:29px; border:1px dotted #bb09f5; border-width:1px; font-size:100%; line-height:1.5em; color: #666; } .post-footer p { margin: 0; } html>body .post-footer { border-bottom-color:transparent; } .uncustomized-post-template .post-footer { text-align: right; } .uncustomized-post-template .post-author, .uncustomized-post-template .post-timestamp { display: block; float: left; text-align:left; margin-right: 4px; } .post-footer a { color: #258; } .post-footer a:hover { color: #666; } a.comment-link { /* IE5.0/Win doesn't apply padding to inline elements, so we hide these two declarations from it */ background/* */:/**/url("http://www.blogblog.com/rounders/icon_comment_left.gif") no-repeat left 45%; padding-left:14px; } html>body a.comment-link { /* Respecified, for IE5/Mac's benefit */ background:url("http://www.blogblog.com/rounders/icon_comment_left.gif") no-repeat left 45%; padding-left:14px; } .post img { margin-top:0; margin-right:0; margin-bottom:5px; margin-left:0; padding:4px; border:1px solid #bb09f5; } blockquote { margin:.75em 0; border:1px dotted #bb09f5; border-width:1px 0; padding:5px 15px; color: #335577; } .post blockquote p { margin:.5em 0; } #blog-pager-newer-link { float: left; margin-left: 13px; } #blog-pager-older-link { float: right; margin-right: 13px; } #blog-pager { text-align: center; } .feed-links { clear: both; line-height: 2.5em; margin-left: 13px; } /* Comments ----------------------------------------------- */ #comments { margin:-25px 13px 0; border:1px dotted #bb09f5; border-width:0 1px 1px; padding-top:20px; padding-right:0; padding-bottom:15px; padding-left:0; } #comments h4 { margin:0 0 10px; padding-top:0; padding-right:14px; padding-bottom:2px; padding-left:29px; border-bottom:1px dotted #bb09f5; font-size:120%; line-height:1.4em; color:#bb09f5; } #comments-block { margin-top:0; margin-right:15px; margin-bottom:0; margin-left:9px; } .comment-author { background:url("http://www.blogblog.com/rounders/icon_comment_left.gif") no-repeat 2px .3em; margin:.5em 0; padding-top:0; padding-right:0; padding-bottom:0; padding-left:20px; font-weight:bold; } .comment-body { margin:0 0 1.25em; padding-top:0; padding-right:0; padding-bottom:0; padding-left:20px; } .comment-body p { margin:0 0 .5em; } .comment-footer { margin:0 0 .5em; padding-top:0; padding-right:0; padding-bottom:.75em; padding-left:20px; } .comment-footer a:link { color: #333; } .deleted-comment { font-style:italic; color:gray; } /* Profile ----------------------------------------------- */ .profile-img { float: left; margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 0; border: 4px solid #0d0710; } .profile-datablock { margin-top:0; margin-right:15px; margin-bottom:.5em; margin-left:0; padding-top:8px; } .profile-link { background:url("http://www.blogblog.com/rounders/icon_profile_left.gif") no-repeat left .1em; padding-left:15px; font-weight:bold; } .profile-textblock { clear: both; margin: 0; } .sidebar .clear, .main .widget .clear { clear: both; } #sidebartop-wrap { background:#d9bfef url("http://www.blogblog.com/rounders/corners_prof_bot.gif") no-repeat left bottom; margin:0px 0px 15px; padding:0px 0px 10px; color:#0d0710; } #sidebartop-wrap2 { background:url("http://www.blogblog.com/rounders/corners_prof_top.gif") no-repeat left top; padding: 10px 0 0; margin:0; border-width:0; } #sidebartop h2 { line-height:1.5em; color:#223344; border-bottom: 1px dotted #223344; margin-bottom: 0.5em; font: normal bold 100% 'Trebuchet MS',Verdana,Arial,Sans-serif; } #sidebartop a { color: #0d0710; } #sidebartop a:hover { color: #0d0710; } #sidebartop a:visited { color: #0d0710; } /* Sidebar Boxes ----------------------------------------------- */ .sidebar .widget { margin:.5em 13px 1.25em; padding:0 0px; } .widget-content { margin-top: 0.5em; } #sidebarbottom-wrap1 { background:#d9bfef url("http://www.blogblog.com/rounders/corners_side_top.gif") no-repeat left top; margin:0 0 15px; padding:10px 0 0; color: #333333; } #sidebarbottom-wrap2 { background:url("http://www.blogblog.com/rounders/corners_side_bot.gif") no-repeat left bottom; padding:0 0 8px; } .sidebar h2 { margin:0; padding:0 0 .2em; line-height:1.5em; font:normal bold 100% 'Trebuchet MS',Verdana,Arial,Sans-serif; } .sidebar ul { list-style:none; margin:0 0 1.25em; padding:0; } .sidebar ul li { background:url("http://www.blogblog.com/rounders/icon_arrow_sm.gif") no-repeat 2px .25em; margin:0; padding-top:0; padding-right:0; padding-bottom:3px; padding-left:16px; margin-bottom:3px; border-bottom:1px dotted #bb09f5; line-height:1.4em; } .sidebar p { margin:0 0 .6em; } #sidebar h2 { color: #bb09f5; border-bottom: 1px dotted #bb09f5; } /* Footer ----------------------------------------------- */ #footer-wrap1 { clear:both; margin:0 0 10px; padding:15px 0 0; } #footer-wrap2 { background:#d9bfef url("http://www.blogblog.com/rounders/corners_cap_top.gif") no-repeat left top; color:#0d0710; } #footer { background:url("http://www.blogblog.com/rounders/corners_cap_bot.gif") no-repeat left bottom; padding:8px 15px; } #footer hr {display:none;} #footer p {margin:0;} #footer a {color:#0d0710;} #footer .widget-content { margin:0; } /** Page structure tweaks for layout editor wireframe */ body#layout #main-wrap1, body#layout #sidebar-wrap, body#layout #header-wrapper { margin-top: 0; } body#layout #header, body#layout #header-wrapper, body#layout #outer-wrapper { margin-left:0, margin-right: 0; padding: 0; } body#layout #outer-wrapper { width: 730px; } body#layout #footer-wrap1 { padding-top: 0; } -->

WELCOME


Good morning, afternoon and evening to you all and
welcome to my awesome blog is nice to see you somewhere
decent on the internet!!!

Tuesday, April 15, 2008

CSS




                   

It has been a while my devoted devoted readers,
Today we looked at css (custom style sheets) which is mainly used to style web pages written in HTML and can define colours, fonts and layouts. I think there
 are many many advantages of using CSS because it saves a lot of time, it allows you to customize a range of pages rather then just one, it also allows
 you to have creative control of every aspect of your pages. However CSS is not as easy to use as i thought it would be. All i wanted to achieve was to add a 
pattern to the background of my blog. Although i knew how to change the colour of my background, placing a pattern there was an irritating task. However 
after a lot of testing we came across a website  that can create the CSS code for you. After discovering this the job of customizing a blog was not as hard 
as i had first thought. 
When looking at a page that has no style the whole page becomes more like a big list and unformatted so you really realize how important layout and CSS 
are. It also shows how important CSS is in being about to easily alter web pages. 
One thing i have learnt is that even though you have the option and skill to do something doesn't mean it should be done. For example my blog is very 
difficult to read when there is a complex pattern behind each of the words. So until next time i hope you all like what i have done with my blog...
BRIE XOXOXOXOXOXOXO



Return to top of page

2 comments:

Tom Burnitt said...

CSS AYE!!!! Man CSS is confusing... But I think tonight I better learn it for the big assessment tomorrow, that is both not an exam and is an exam :S Make sense doesn't it?

wayne saunders said...

hmmm. so yeah, your blog... a little difficult to read, but meh, at least you played around with the code. and my god, my eyes, pink and black text on that background... i think you've damaged them permanently.