First Diploma Unit 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 nonumy eirmod 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. @charset "utf-8"; /* CSS Document */ /*yourstyle.css*/ #box { width: 350px; border-color: red; border-style: dashed; <div id="box"> This is text inside the box. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </div> </body> HTML Link Style sheet </html>
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
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
We will get this: Borders! 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; Create a new ID called album and set it 30px from the left edge #album li { float:left; #album img { border: 1px solid #000000; margin-right: 30px; Create a new ID called album li Make the list float to the left Create a new ID called album img Give 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
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 CSS body { h1{ #content { background-color: #ffffff; background-image: url(images/peppers_bg.jpg); background-repeat: no-repeat; 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; 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 http://www.comfydigs.co.uk/cssjava/4_10.html 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 backgroundrepeat 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 http://www.comfydigs.co.uk/cssjava/4_13.html
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