web sites design: cascading style sheet (css) what is css style? –inline style –the embedded...
Post on 19-Dec-2015
222 views
TRANSCRIPT
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>withmargin-left:20% and margin-right:20%</div><hr><div>This is another paragraph defined by the division element and separatedby 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";font-
weight: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";font-
weight:bold; text-align:center; margin-top:-5pt } .loan_Box {color:#000088; background-color:white; width:180pt; height:80pt; font-family:"Times New Roman"; font-
weight: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 control- Alignment, 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 control- Alignment, 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 controlText 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 controlText Box Dimensions and Spacing
<style> div {font-size:14pt;color:#000088; padding:2ex;margin-left: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
problemif 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 ColorThe 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;font-
family:'Comic Sans MS'times; font-size:20pt;color:#ff0000">This text will appear in red in a small box
with cyanbackground on a larger honeydew
background</div><br />
</body>
CSS – Background Image Example
<style type="text/css"> .txtSt {background-
color:#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 imageYou 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)background-
attachment: 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-imagescrolls 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, pixel-level 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