first diploma unit 10 –client side web - mystudentsite.co.uk · stet clita kasd gubergren, ... *...
Post on 19-Jul-2018
213 Views
Preview:
TRANSCRIPT
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
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
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
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
• 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 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
• 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
top related