first diploma unit 10 –client side web - mystudentsite.co.uk · stet clita kasd gubergren, ... *...

First DiplomaUnit 10 –Client Side Web

Week 4 – CSS and Images

Last Session

• CSS box model

• Concept of identity - id

This Session

• External style sheets

• Using CSS in conjunction with images

Introduction

• External style sheets allow for easier maintenance of web pages

• Well-placed images can bring an otherwise commonplace design to life

• It beats the ‘sliced image’ look

• Working with images in CSS requires a few simple skills

The External Style Sheet

• You are familiar with this:<!doctype html public "-//W3C//DTD HTML 4.0//EN"> <html> <head> <style type="text/css">#box {

width: 350px; border-color: red; border-style: dashed;

}

</style> </head> <body> This is text outside the box. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,

no sea takimata sanctus est Lorem ipsum dolor sit amet.

<div id="box"> This is text inside the box. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

</div> </body> </html>

Convert to External Style Sheet

<!doctype html public "-//W3C//DTD HTML 4.0//EN"> <html> <head> <link rel="stylesheet" type="text/css" href=“yourStyle.css" /></style> </head> <body> This is text outside the box. At vero eos et accusam et

justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

<div id="box"> This is text inside the box. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmodtempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

</div> </body> </html>

@charset "utf-8";/* CSS Document *//*yourStyle.css*/#box { width: 350px; border-color: red; border-style: dashed; }

HTML Link Style sheet

Adding Borders to Images

• Photographic images, perhaps used to illustrate an article, or as a display in a photo album, look neat when bordered with a thin line

• Opening each picture in a graphics program to add the border is a time consuming process and, if you ever need to change that border’s colour or thickness, you’ll need to go through the same arduous process all over again to create the desired images

Image Borders

• Adding a border to an image is a simple procedure using CSS.

• Example: http://www.comfydigs.co.uk/CssJava/4_6.html

http://www.comfydigs.net/4_6.html

http://www.comfydigs.net/4_6.html

Illustrative example

• By changing the style sheet ONLY:body {

font: 0.9em Verdana, Geneva, Arial, Helvetica, sans-serif;}#album {

margin: 30px;list-style:none;

}

#album li {float:left;

}

#album img {border: 1px solid #000000;margin-right: 30px;

* I cheated and added a new style sheet and changed the reference to the new style in the web page

Borders!

• We will get this:

• http://www.comfydigs.co.uk/CssJava/4_7.html

http://www.comfydigs.co.uk/CssJava/4_7.html


Analysis

body {font: 0.9em Verdana, Geneva, Arial, Helvetica, sans-serif;

}#album {

margin: 30px;list-style:none;

}

#album li {float:left;

}

#album img {border: 1px solid #000000;margin-right: 30px;

Create a new ID called albumand set it 30px from the left edge

Create a new ID called album liMake the list float to the left

Create a new ID called album imgGive it a border and a right margin of 30px

Another Example•Here we have our initial page with no CSS whatsoever•Ugly blue borders don’t look good•http://www.comfydigs.co.uk/CssJava/4_8.html

http://www.comfydigs.co.uk/4_8.html


How to Fix

• Adding border="0" to images that are links to other documents is probably something you would do almost automatically

• However, border has been deprecated in the current versions of HTML and XHTML

• Deprecated means superseded or replaced

• It should therefore be avoided

Solution• Just as you can create a border, so you can

remove one

• Setting an image’s border property to none will remove those ugly borders

img {

border: none;

}

• Add this to a style sheet (border property in a style sheet is legal)

Backgrounds• Before CSS, backgrounds were added using the background attribute of

the <body> tag

• This attribute is now deprecated and replaced by CSS properties

body {

background-color: #ffffff;

background-image: url(peppers_bg.jpg);

background-repeat: no-repeat;

}

• The above rules add the image peppers_bg.jpg as a background to any page to which this style sheet is attached

The CSSbody {

background-color: #ffffff;background-image: url(images/peppers_bg.jpg);background-repeat: no-repeat;

}h1{

background-image: url(dotty.gif);background-repeat: repeat-x;background-position: bottom left;padding: 0 0 6px 0;color: #41667f;font-size: 160%;font-weight: normal;background-color: transparent;

}#content {

margin: 2em 4em 2em 4em;background-color: transparent;padding: 1em 1em 40px 1em;

}

Call a background picture

Repeat across the x-axis i.e. Left to right

Set a margin around the content

The Result

Discussion

• The CSS property background-image enables you to specify as a URL the location of a background image. By default, the background will tile as shown


• As we don’t want multiple peppers in this example, we need to prevent this image from tiling. To do so, we set the property background-repeat to no-repeat.



Repeating Images

• Other values for background-repeat are:– repeat - This default value causes the image to tile

across and down the page• www.comfydigs.co.uk/CssJava/4_10.html

– repeat-x - The image tiles across the page in a single row of images

• www.comfydigs.co.uk/CssJava/4_11.html

– repeat-y - The image tiles down the page in a single row

• www.comfydigs.co.uk/CssJava/4_12.html








Positioning a Background Image• By default, if you add a single, non-repeating

background image to the page, it will appear in the top left corner of the viewport.

• If you have set the background to tile in any direction, the first image will appear at that location, and will tile from that point.

• However, it is also possible for the image to be displayed anywhere else on the page.

Positioning a Background Image

• To position the image, we need to use the CSS property background-position

body {

background-color: #FFFFFF;

background-image: url(peppers_bg.jpg);

background-repeat: no-repeat;

background-position: center center;

}

• This will position the image in the centre of the page






Keywords for Background Positioning

• Keyword combinations that you can use are:– top left– top center– top right– center left– center center– center right– bottom left– bottom center– bottom right

• If you only specify one of the values, the other will default to center.• E.g. background-position: top;

• Is the same as• background-position: top center;

Summary

• External style sheets

• Using CSS in conjunction with images

Next Session

• Practical CSS for you to try

To Do

• Try the examples done today, and see what happens when you change the values

• Complete assignment

first diploma unit 10 –client side web - mystudentsite.co.uk · stet clita kasd gubergren, ... *...

Documents