Transcript Week_7
Web sites Design: Cascading
Style Sheet (CSS)
• What is CSS Style?
–
–
–
–
Inline Style
The Embedded Style Element <style>
Using External File
Designing Web Logos with CSS
• Controlling Text Properties with Style
–
–
–
–
Font, Size, Weight and Color
Alignment, Indent and Margin
Letter Decoration and Transformation
Text Box Dimension and Spacing
• Background and Border
–
–
–
–
–
Background Color and Image
Positioning a Background Image
Fixed a Background Image
Color and Width of Element Borders
Different Border Controls
Cascading Style Sheet (CSS) for
Web pages
• What is CSS style? Why?
Cascading Style Sheet is a structure that separates
formatting features from the contents of a page. It is
designed to handle more complex design requirements.
There are several CSS style methods applied to HTML
pages. They are
– inline style
– internal (embedded) style
– external style sheets.
CSS is designed to provide reusability.
Example:
<style>
h2{color:red; font-family: arial; font-size:14pt}
</style>
What is CSS style
• Inline Style
– You can add inline style to any "sensible"
HTML elements by using the style attribute in
the associate element. The browser will then
use the inline style definitions to format only
the contents of that elements
– The style attribute can contain any CSS
property.
Inline CSS Example
1: <?xml version="1.0" encoding="UTF-8"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head><title>Inline Style: ex02-01.htm</title></head>
6: <body style=”font-family:Times;font-weight:bold;background:#000088">
7:
8: <div style="font-size:20pt;text-align:center;color:#00ffff">
9: Inline CSS Style </div>
10: <p style=”font-family:arial;font-size:16pt;color:#ffff00;
11: margin-left:20px;margin-right:20px”>
12: With CSS, we can control the margins of an element
13: This is a paragraph with margin-left:20px and margin-right:20px.
14: </p>
15:
16: </body>
17: </html>
The Embedded Style Element
<style>
• Internal styles are usually defined within the
<style> element. Example:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head><title>Internal Style: ex02-02.htm</title></head>
<style type="text/css">
h2 {color:#00ffff;font-size:20pt;text-align:center}
h4 {margin-left:70%;margn-right:20%}
p {font-family:arial;font-size:16pt;color:#ffff00;
margin-left:20px;margin-right:20px}
body {font-family:arial;font-size:14pt;color:#ffff00;
background-image: url("backgr01.jpg")}
</style>
Internal styles example
</head>
<body>
<h2>Internal CSS Style</h2>
<h4>This area was created by CSS margin
margin-left:70% and margin-right:20%</h4>
<p>With CSS, you can control text font, color,
dimension, position,
margin, background and many more ...</p>
</body>
</html>
Useful inline keyword - class
• Another useful aspect of CSS style is the inline
keyword class. Class gives you ways of breaking
down your style rules into very precise pieces to
provide a lot of variety.
• You can define a style class by putting a dot in
front of a CSS definition.
• This class style can be used in almost any
XHTML element with attribute class= and the
unique class name.
Example - inline keyword class
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Inline Style: ex02-03.htm</title></head>
<style type="text/css">
.txtSt {font-family:arial;color:#ffff00;font-size:20pt;
font-weight:bold}
.butSt {background-color:#aaffaa;font-family:arial;font-weight:bold;
font-size:14pt;color:#008800;width:240px;height:30px}
</style>
</head>
<body style="background:#000088;text-align:center">
<div class="txtSt">Internal CSS Style Example</div><br/>
<input type="button" class="butSt" value="CSS Style Button" />
</body>
</html>
External CSS style sheets
• An external style sheet is ideal when the style is applied
to many pages. You place the style information in a
separate document with the file extension .css. With an
external style sheet, you can change the look of an
entire Web site by changing the corresponding style
information file. Each page must link to the style sheet
using the <link> element. The <link> element usually
goes within the <head> section.
• Example:
<head>
<link rel=”stylesheet” type=”text/css” href=”ex02-04.css”>
</head>
External CSS style sheets Example
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>External Style: ex02-04.htm</title></head>
<link rel="stylesheet" type="text/css" href="ex02-04.css">
</head>
<body>
<div style="text-align:center;color:#00ffff">
External CSS File</div><br /><br />
<div>
This is a paragraph defined by the division element <div>with
margin-left:20% and margin-right:20%</div>
<hr>
<div>
This is another paragraph defined by the division element and separated
by a horizontal line. All CSS properties are defined in the external CSS
file: ex02-04.css
</div>
</body>
</html>
1: hr {color: sienna}
2: div {margin-left:20px; margin-right:20px; color:#ffff00}
3: body {background-image: url ("backgr01.jpg");
4: font-family:arial; font-size:14pt;color:#ffff00; font-weight:bold}
Designing Web Logos with CSS
• Web site logos and trademarks are
popular applications on the Web. You can
combine inline styles, internal styles and
external style sheets in a Web page to
give you maximum control.
• The browser will display the Web page by
first look at inline styles, then internal
styles and whatever isn’t covered in the
linked external CSS style sheets.
Designing Web Logos with CSS Example
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head><title>ex02-05.htm</title></head>
<style>
.car_Box {color:#000088;background-color:white;
width:250pt;height:80pt;
font-family:"Times New Roman";fontweight:bold}
.car_L1 {color:#000088;font-size:38pt;
font-weight:bold;font-family:"impact";
text-align:center;margin-top:10pt}
.car_L2 {color:white;background-color:#000088;
font-size:16pt;font-weight:bold;
text-align:center;
margin-left:12pt;margin-right:12pt;
font-family:"arial";
letter-spacing:6pt}
.abc_Box {color:white; background-color:#000022;
width:200pt;height:80pt;
font-weight:bold;font-family:"Times New
Roman";
margin-top:0.3em; position:relative;
top:-10%; left:52% }
.abc_L1 {font-size:34pt; font-weight:bold;
font-family:"Times New Roman";
text-align:center; margin-top:10pt }
.abc_L2 {color:#DD0000; font-size:22pt;
font-family:"Times New Roman";fontweight:bold;
text-align:center; margin-top:-5pt }
.loan_Box {color:#000088; background-color:white;
width:180pt; height:80pt;
font-family:"Times New Roman"; fontweight:bold }
.loan_L1 {color:#000088; font-size:38pt;
font-weight:bold; font-family: "impact";
text-align:center }
.loan_L2 {color:white; background-color:#000088;
font-size:16pt; font-weight:bold;
text-align:center; font-family:"arial" }
</style>
Designing Web Logos with
CSS – Example (Continued)
<body>
<div style="font-family:arial; font-size:24pt; color:#008800;
font-weight:bold; text-align:center" >
Designing Web Logo With CSS
</div>
<div class="car_Box" align="center">
<div class="car_L1">Racing Sports</div>
<div class="car_L2">FORMULA CARS</div>
</div>
<div class="abc_Box">
<div class="abc_L1">ABC.COM</div>
<div class="abc_L2">Online Shopping</div>
</div>
<div class="loan_Box" align="center">
<div class="loan_L2">YesToAll Bank</div>
<div class="loan_L1"><img src="ex02-04.gif"
style="width:180pt;height:30px" alt="pic"></div>
</div>
<div style="width:250px; height:80px; text-align:center;
background:#0000aa;
position:absolute;top:250px; left:320px">
<div style="font-family:arial; font-size:14pt; text-align:center;
color:#ffff00">Have A Fun Game here!</div>
<div>
<img src="ghost_l.gif" style="width:40px;height:40px" vspace="20"
alt="pic">
<img src="other.gif" style="width:140px;height:80px" alt="pic">
<img src="ghost_r.gif" style="width:40px;height:40px" vspace="20"
alt="pic">
</div>
</div>
</body>
</html>
Controlling Text Properties with
Style – Font family,size,weight,color
CSS Text properties control- Font
family, size, weight, color
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Font family and Sizes Demo</title>
<style type="text/css">
h1 {font-family:'Comic Sans MS',times, font-size:20pt;color:#000088}
h2 {font-family:arial,times;font-size:200%; color:#880000 }
h3 {font-size:150%;color:008800}
.small {font-family:times;font-size:80%}
.half {font-family:times;font-size:50%}
.normal {font-family:arial,times,serif; font-size:90%}
</style>
</head>
<div style="font-family:arial;font-size:20pt;font-weight:bold;
text-align:center">
Font family and Sizes Demo <br />(Fixed and Relative Sizes)</div>
<h1>A fixed text string with</br />
font-family:"Comic Sans MS";font-size:20pt</h1>
<h2>A relative sized text with font-family:arial;font-size:200%<br />
<span class="half">and half of this size is 100%</span></h2>
<h3>A text with default font and font-size:150%</h3>
<span class="normal">A slightly smaller paragraph (size:90%)</span><br
/>
</body>
</html>
CSS Text properties controlAlignment, Indent and Margins
•
CSS can take a specific unit of measurement in length. It can be in point (pt), inch (in),
centimetre (cm) or percentage (%). The left and right margins together with division
element can be used together to define a text box with arbitrary length on the
browser window
CSS Text properties controlAlignment, Indent and Margins
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>text Indent Margin anf Alignment</title></head>
<style type="text/css">
.ins {font-size:14pt;font-weight:normal;text-align:left;
text-indent:1in;margin-left:5%;margin-right:50%}
.pts {font-size:14pt;fot-weight:normal;text-align:justify;
margin-left:50%;margin-right:5%}
.pct {font-size:14pt;font-weight:normal;text-align:left;
text-indent:5%;margin-left:5%;margin-right:50%}
</style>
<body style="font-family:arial;font-size:16pt;font-weight:bold">
<div style="font-family:arial;font-size:18pt;text-align:center">
Text Indent Margin and Alignment Demo</div><br />
<div class="ins">This is a left aligned text box defined by
margin left right (5%,50%). The first line of text should be
indented 1 inch from the left margin of the box.</div><br />
<div class="pts">This is a right aligned text box defined by
margin left right (50%, 5%). All lines are justified within
the text box</div><br />
<div class="pct">This is a left aligned text box defined by
margin left right (5%, 50%). the first line of text should be
indented 5% of the browser window.</div><br />
</body>
</html>
CSS Text properties control-Letter
Decoration and Transformation
• Letter decoration adds a decorative property (i.e.
a line) to the text of the HTML element it is
associated with.
CSS Text properties control-Letter
Decoration and Transformation
<style>
.bSt {font-family:'Comic Sans MS',times;font-size:18pt;
color:#000088}
</style>
<body style="font-family:arial;font-size:24pt;font-weight:bold">
<div style="text-align:center;color:#880000;text-align:center">
Text Decoration and <br />Transformation Demo Page</div><br
/>
<div class="bSt" style="text-decoration:underline;color:#000088">
A text string uses the CSS "text-decoration:underline"</div><br />
<div class="bSt" style="text-decoration:overline;color:#008800">
A text string uses the CSS "text-decoration:overline"</div><br />
<div class="bSt" style="text-decoration:line-through;color:#880000">
A text string uses the CSS "text-decoration:line-through"</div><br />
<div class="bSt" style="text-transform:uppercase;color:#000088">
A text string uses the CSS "text-transform:uppercase"</div><br />
<div class="bSt" style="text-transform:lowercase;color:#008800">
A text string uses the CSS "text-transform:lowercase"</div><br />
<div class="bSt" style="text-transform:capitalize;color:#880000">
A text string uses the CSS "text-transform:capitalize"</div><br />
</body>
CSS Text properties control
Text Box Dimensions and Spacing
• With CSS, you can scale the HTML elements it is associated with to
fit the specified height and width dimensions. The CSS white-space
element is a powerful element that controls the way that white space
and carriage returns are handled within a Web page. It allows you to
add plenty of visual space to enhance the clarity of your Web pages.
CSS Text properties control
Text Box Dimensions and Spacing
<style>
div {font-size:14pt;color:#000088; padding:2ex;marginleft:1in;
font-weight:normal; width:6in }
.line01 {line-height:150%; letter-spacing:0.2em}
.line02 {line-height:200%; word-spacing:1.5em}
</style>
<body>
<div style="font-family:arial; font-size:20pt; font-weight:bold;
color:#880000">CSS Line-height, Letter and Word Spacing
Demo </div>
<div class="normal">This paragraph should be leading of 100%
i.e. the default leading produced by the CSS line-height
property.</di
<div class="line01">This paragraph should be leading of 150%
produced by the CSS line-height property. The letter-spacing
feature is supported in IE4 but not NS4. You should have no
problem
if you are using NS6+</div>
<div class="line02">This should be leading of 200% produced
by the
CSS line-height property. Word spacing is not supported by IE4
or NS4.
You have no problems if you are using the latest browsers</div>
</body>
CSS – Background and border
•
The background family of CSS style elements are used to set the background
characteristics on your Web page.
–
–
•
•
you could apply some CSS background elements to highlight an area on a page
just simply to enhance the contrasts of the display and the background.
The border properties set the display of borders around its associated CSS element.
All these together with the dimensioning and postioning CSS elements, you have a
variety of controls down to pixel level to help you designing your dream pages.
CSS – Background Color
The CSS background element allows
you to add a background color or
image on your web page
<body style="background:#f0fff0">
<div style="font-family:arial,times,serif;
font-size:20pt;
font-weight:bold;text-align:center">
Background Color <br />Demo</div><br
/>
<div style="background-color:#00ffff;fontfamily:'Comic Sans MS'
times; font-size:20pt;color:#ff0000">
This text will appear in red in a small box
with cyan
background on a larger honeydew
background
</div><br />
</body>
CSS – Background Image Example
<style type="text/css">
.txtSt {backgroundcolor:#000000;font-family:arial;
color:ffffff;
font-size:30pt; font-weight:bold;
text-align:center}
</style>
<body style="background-image:
url(logo_web.jpg);
background-repeat:repeat">
<br /><br />
<div class="txtSt">We have an image
background.
</div>
</body>
Position a background image
You can further control the position at which a background image begins to tile on your Web page
<style type="text/css">
.txtSt1 {font-family:arial; color:#ffff00;
font-size:20pt; font-weight:bold;text-indent:-50px}
.txtSt2 {font-family:'Comic Sans MS'; color:#000088;
font-size:20pt; font-weight:bold;text-indent:-50px}
.txtSt3 {font-family:Times New Roman; color:#dd8800;
font-size:20pt; font-weight:bold;text-indent:-50px}
</style>
<body style="background:#87ceeb;background-image: url(vstone01.gif);
background-repeat:repeat-y">
<div style="font-family:arial;font-size:24pt;color:#8b0000;
font-weight:bold;text-align:center">Positioning A Background Image
<br /><br /></div>
<div class="txtSt1">
<img alt="pic" src="bullet1.gif" hspace=100 align=left>
The background in skyblue color<br /><br />
</div>
<div class="txtSt2">
<img alt="pic" src="bullet1.gif" hspace=100 align=left>
An edge background<br /><br />
</div>
<div class="txtSt3">
<img alt="pic" src="bullet1.gif" hspace=100 align=left>
You can attach a company logo here
<br /><br />
</div>
<img alt="pic" src="logo_web.jpg" width="180" height="90" align=right>
</body>
Fixed a Background Image
• The CSS style element background-attachment allows
you to control whether the background image moves
when the browser window ia scrolled.
• Similar to the background-repeat element, the
background-attachment CSS element only works when
the background-image element is set.
• It takes the general format
– <body style="background-image:url (bg_image.gif)backgroundattachment: fixed">
• If the background-attachment is set to fixed, then the
background-image will be fixed with respect to the
viewing area and therefore not affected by any scrolling
action.
Fixed a Background Image Example
<body style="background-image: url(title4.gif); background-position:center;
background-repeat:no-repeat;background-attachment:fixed">
<div style="font-family:arial;font-size:24pt;color:#8b0000;
font-weight:bold;text-align:center">Fixing A Background Image
<br /><br /></div>
<div class="txtSt1">
The background-image is fixed<br /><br />
</div>
<div class="txtSt2">
and therefore <br /><br />
</div>
<div class="txtSt3">
will not be affected
<br /><br />
</div>
<div class="txtSt1" style="font-size:10pt">
by any scrolling action<br /><br />
</div>
<div class="txtSt2" style="font-size:25pt">
The default scroll attribute makes the background-image
scrolls when the user scrolls the page <br /><br />
</div>
</body>
Color and Width of Element
Borders
•
•
•
One of the most powerful CSS
properties is positioning. This
property gives you total, pixellevel control over the location of
every element on your Web
page
The CSS border properties set
the display of borders around
the CSS element that is
associated with. Every border
has three aspects – width,
styles and colors. These
properties allow you to have a
full control as how you want the
borders to be displayed on the
Web page
There are a total of 9 different
border-style defined in the
CSS1 standard.
Color and Width of Element
Borders - Example
<div class="bSt" style="border-style:none;border-color:#000088">
The paragraph has no border style </div><br />
<div class="bSt" style="border-style:double;border-color:#008800">
The paragraph has a DOUBLE border style </div><br />
<div class="bSt" style="border-style:dashed;border-color:#ff0000">
The paragraph has a DASHED border style </div><br />
<div class="bSt" style="border-style:dotted;border-color:#ffd700">
The paragraph has a DOTTED border style </div><br />
<div class="bSt" style="border-style:inset;border-color:#fff4e1">
The paragraph has a INSET border style </div><br />
<div class="bSt" style="border-style:outset;border-color:#ffa500">
The paragraph has a OUTSET border style </div><br />
<div class="bSt" style="border-style:groove;border-color:#006400">
The paragraph has a GROOVE border style </div><br />
<div class="bSt" style="border-style:ridge;border-color:#00ffff">
The paragraph has a RIDGE border style </div><br />
<div class="bSt" style="border-style:solid;border-color:#0000ff">
The paragraph has a SOLID border style </div><br />
Color and Width of Element
Borders - Example