Feb 28. CSS class notes:=

reference to helpful tips. READ ME I WILL HELP YOU!!!!

The web page is broken into different components (head, body and html tags):

The head

[<head> </head>]
  • where things are put that aren't shown visually
  • also your title is included here

The body tags:


  • where all the information goes e.g. div tags
  • links e.g. <a href="http://www.cbc.ca"> CBC News</a>
  • images are placed here as well.
<img src="players.jpg" />

The html tags:

  • cotain the body and head tags within it.
  • for example:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>


What if I want to link to the next created page and not an external website?

  • create new page and save. (e.g. stamp.html)
  • create link in index page: <a href="stamp.html"><img src="images/players.jpg" /></a>
  • You can use property inspector to generate link: by dragging icon beside "link" option towards the created page to be linked to that can be seen in the site toolbar within the root folder.

why is "images/" placed before my image name?

  • this refers to the folder that the image is placed in.

Image tips:

  • try as much as possible to have the least amount of size (resolution) at the best quality possible. Reduce file size by saving for web within photoshop)

David's suggestions to ensure consisent layout positioning:

  • connect to server:
  • found under ptyinstructors
  • dgelb folder
  • 2005_css (contains image of the blueprint grid)
  • create a new page
  • download blueprint-grid image as a background guide.
  • from prop inspector: select page properties then select image as tracing image: helps you to align your information on the web page layout.
  • should appear in html page something like: <body tracingsrc="blurprint-grid.jpg" tracingopacity="100">

How do I position things?

  • There are "class" div tags (which can be repeated) and are referenced in the style sheet (whether internal or external)

  • There are "id" div tags. These are used once and have unique names. Properties are set individually (must have unique name used only once) e.g. <div id="splash"> this is text that will be modified by my css page according to properties set up according to my id called "splash"</div>

Slice tool- helps to position images (or text)

why do I have to slice my images to create buttons?

  • they have to be individual items.

How do they stay aligned?

  • use slice tool in photoshop to cut into three sections.
  • Export sliced images by :(double click on slices using slice select tool and a toolbar "slice options" comes up. Name each slice in provided entry space)
  • export by saving for web as a 'png' or 'gif' (more for text or vector based images)
  • save by selecting: images only:default settings: all slices

  • create new css page: save as (e.gg. "style.css")

  • go to: insert then select layout options then select div
  • should look like: <div id="ideas"></div> (code for internal css will appear in the head tag of your html page. YOU DONT WAN THIS)
  • cut out css code and paste in external css page "style.css"
  • must have an external css link information in head tag. <link href="style.css" rel="stylesheet" type="text/css" />

external css code would look something like:

#ideas {
position: absolute;
width: 200px;
height: 200px;
left: 97;
top: 45;
background-repeat: no-repeat;

#places {
position: absolute;
width: 200px;
height: 200px;
left: 97;
top: 45;
background-repeat: no-repeat;

  • Ensure that the pixel coordinates line up based on the alignment provided by the blue print grid. (this can be automatically done with dreamweaver by dragging images and aligning them appropriately which will automatically change the css positioning dimensions.)


  • using same images change the colour of text or adjust to whatever rollover state you want.
  • save for web under a different name. (follow the same instructions as done in previous example of slice images)

  • place in external css:
  • should look something like:

#rollover a {

background-repeat: no-repeat;

#rollover a:hover {


  • html page should include:
  • for example:
<div class="rollover">
<div id="ideas"><a href="http://www.cbc.ca"></a></div>

  • do this to each "div id" that modifies your images in your html.

  • for example:

<div id="ideas"><a href="http://www.cbc.ca"></a></div>
<div id="places"><a href="http://www.cbc.ca"></a></div>
<div id="methods"><a href="http://www.cbc.ca"></a></div>

Hope this is a helpful reminder! :)