Editing your StyleSheets

Working with CSS
Update: A couple of examples:

• Bath Fans Abroad
  
• Foods of Europe
  

The purpose of this 'tutorial' is to allow you to better understand how CSS and HTML work together to present web-site content. In order to do this you will learn how to change some of the CSS on your blog and see how this changes the look of your blog.

You will be changing the content between the two tags: <style> and </style>. This code is known as css, or cascading style sheets.

CSS, short for Cascading Style Sheets, is a relatively new feature that is being added to HTML that gives both Web site developers and users more control over how pages are displayed. With CSS, designers and users can create style sheets that define how different elements, such as headers and links, appear, globally (i.e. throughout the web page and the web site). CSS controls the design look essentially taking control of the HTML code it is effecting.

Style Sheets can be applied to any Web page. They can be applied in three ways.

1. as a separate file that each page within a site points (take a look at the source code of my homepage and you will see the code in the header: <link rel="stylesheet" href="http://www.udel.edu/alex/css/css.css"
   type="text/css" /> this signals this page to be controlled by the stylesheet file named css/css.css).
   
2. included as part of the HTML code within each page
   
3. included in the header document of the page (as is the example we are using with this blog).
   

CSS looks really confusing, but with a basic knowledge you could, in theory, amend an existing template to suit your requirements. More knowledge is required for actually writing one from scratch! This is beyond the scope of this course.

Changing the Body

The Body provides base information for the template as a whole, rather than specific areas. In the case of this template it puts in a background (the dots you see across your template) and defines the font and font size used.

This is where you will make your first change.

You will have noticed that the template on the main site for the course (this site) has a different background to your blog site, and it is aligned in the top left hand corner of the screen. To make your site look like this you need to look for the following code in the body element of the template -

Look for the following in the class source code:
/* Body - Refer to note 1 in your lecture notes
----------------------------------------------- */


background:#123 url("http://www.blogblog.com/dots_dark/bg_minidots.gif") 50% 0;

Delete this line and replace with -

background:#1D1F4C url("http://www.stylegeek.net/clients/alex/infotechbg.gif") no-repeat 10px 50px fixed;

The line of text above will not only change the background color (these are examples of hex values - #123 and #1D1F4C and are the means by which designers, especially css designers, dictate the color scheme of a webpage)

Secondly, the amendment will draw in an entirely new graphic and fix it into the top left hand corner of your webpage - other code you will see in this example stops it from repeating (no-repeat) and will fix it into one position and prevent it leaving the screen when users scroll down (fixed). For the purpose of your blog, you may want to use a different image, more aligned with your blog theme. If so, simply replace the URL of the image for the class blog (http://www.stylegeek.net/clients/alex/infotechbg.gif) with the URL of your image. Ir will be important that your image is no wider than the class image.

Page Structure

The section marked page structure does exactly what it suggests, it dictates the page structure of the webpage - it dictates where all the text will go, and how it will look on the page.

Look for the following in the class source code:
/* Page Structure - Refer to note 2 in your lecture notes
----------------------------------------------- */

2a) Content

Look for the #content section

#content {
background-color: #123;
width:700px;
margin:0 auto;
padding:50px 0;
text-align:left;
}

Find the following code -

background:url("http://www.blogblog.com/dots_dark/bg_3dots.gif") no-repeat 250px 50px;

Delete this line and replace with -

background-color: #123;

This removes the background in the main section of the template (where all the text goes) and merely dictates the page to present it in the color #123 (blue)

2b) Main2

You will notice that on the main template there is a logo at the top of the main body section of the template. This is what you will be adding in next. Basically, you have two options when adding a graphic to a webpage such as the infotech one. You can, if you wish, utilise the standard html route, of which many of you are familiar <img src="graphic.jpg"> which will display the graphic quite well in the main body of your posts.

However, when a graphic is part of a template, that is a logo, or a background graphic, css designers tend to place it by using the css version.

Look for the section marked #main2

#main2 {
background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") -100px -100px;
padding:20px 10px 15px;
}

Delete the lines -

background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") -100px -100px;
padding:20px 10px 15px;

and replace with -

background: url("http://www.stylegeek.net/clients/alex/infotechdark.gif") no-repeat 10px 0px;
padding:150px 10px 15px;

Note, you may wish to replace the logo with your own image. If so, include the URL of your image, which should include the same dimensions as the class logo, as a replacement for the above code.

2c) #sidebar2

Another graphic needs removing from the template - this is for the sidebar - where all your links go

Look for -

#sidebar2 {
background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") 150px -50px;
padding:5px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}

Find the line

background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") 150px -50px;

and replace with

background-color: #123;

again, this will merely remove the graphic background and tell the computer to display the color #123

Title & Description

Look for the following in the class source code:
/* Title & Description - Refer to note 3 in your lecture notes
----------------------------------------------- */

Now we are going to change some font colors.

Under section marked #blog-title look for the code color:#abc; - the hex value is currently #8dd; - Change this value to #abc;

Change the same value under description color:#9c7; change this to color: #fff;

Links

Look for the following in the class source code:
/* Links - Refer to note 4 in your lecture notes
----------------------------------------------- */

You may know that browsers as a rule come with standard colors in which they display links. However, as web designers we find this palette very restrictive, as it impacts on our well thought out color schemes! So, again, we have a handy piece of css that forces your browser to display links in the colors we want! (Note, this is not entirely agreed upon from a design usability standpoint.)

This section of code tells the computer we want a standard link to display in hex color value #da7

a:link {
color:#da7;
}

This value needs to be changed to #fce1a4 in your template.

This section of code tells the computer we want a visited link (that is one you have already seen) to display in hex color #799

a:visited {
color:#799;
}

This is to remain the same!

and this final section of code tells the computer we want a link to change to white when you hover over it!

a:hover {
color:#fff;
}

Again, this remains the same.

Posts

Look for the following in the class source code:
/* Posts - Refer to note 5 in your lecture notes
----------------------------------------------- */


This section controls the way in which your actual blog posts are displayed.

Look for

.date-header {
margin:0 0 .75em;
padding-bottom:.35em;
border-bottom:1px dotted #567;
font:bold 100%/1.4em Verdana,San-serif;
text-transform:lowercase;
color:#7bc;
}

This code tells the computer how your entry dates are to be displayed, the only value you need to change here in this case is the font color, which you may recall is dictated by

color: #7bc;

This needs to be changed to color: #fff; - which is white! you can type white if you wish, as some very restricted colors are available in word form, but it is considered good practice to use the hex color values!

You also need to change the following color values in (again to color: #fff;)

- #post-title
- p.post-footer em

6) More Sidebar Content

Like you have done in similar sections you need to change the font values of the following

- .sidebar-title - change this to #7bc

Refer back over these notes if you need assistance, and can't recall this value!


Thats it, all done!

Don’t forget to save & rebuild!
Thanks to Eliza for the above.

You can also work through this simple tutorial to get more familiarity with HTML.