Embed Size (px)
DESCRIPTION
Web Programming. Cascade Style Sheets (CSS). Introduction. CSS stands for Cascading Style Sheets Used to Separate Presentation and Contents while Building Web Sites Appearance of Raw HTML Pages is not very Effective and Attractive - PowerPoint PPT Presentation
Citation preview
WEB PROGRAMMINGCascade Style Sheets (CSS)
INTRODUCTION CSS stands for Cascading Style Sheets
Used to Separate Presentation and Contents while Building Web Sites
Appearance of Raw HTML Pages is not very Effective and Attractive
In Order to Improve the Appearance of Web Page we use CSS
CSS is used to define Style Rules that help to unify entire Sites Appearance
Using CSS we define Style once and it can be applied many times on the Web Page
Example: Using CSS we define Rules that define how All the Headings and Paragraphs Look alike such as their Color, Style, Formatting etc
NEED OF CSS CSS Improves Efficiency by allowing you to
Separate Contents and Styles Contents mean Headings, Paragraphs,
Buttons etc Styles define the Appearance of Contents CSS was developed to Solve a Problem In using single HTML you must have to
define the Style of each and every Content in its Opening Tag using Attributes like style, color, bgcolor etc
This is a very Lengthy and Tedious Job Job becomes more hard if you want all
contents of same type to be alike, this requires you to remember attributes and attribute values and it is difficult
Styles are normally defined in a Separate CSS File thus enabling designer to Change and Manage the Appearance of Web Page
CSS SYNTAX (CONT.) CSS Rule has Two Parts:
1. Selector2. One or More Declarations
Selector is normally HTML Element Tag Symbol
Declaration consists of Property and Property Value
Property is a Style Attribute
CSS SYNTAX Specify the name of Element like h1, p, td etc Start a Opening Curly Brace {
Declarations: Write Property Name like color, font-family
etc Write a Colon : Write Property Value after Colon Then Put Semi-Colon ; after each
Declaration Put a Closing Curly Brace }Example:h1{
color:red;font:calibari;text-align:center;
}This CSS Example Defines Appearance of Element with <h1> Tag
CSS COMMENTS Comments are used to Specify the Purpose
of Line of Code Comments are Notes about Lines Helpful when the code is to be edited CSS Comments are Start with /* and End
with */ Symbols Anything between /* and /* is a Comment
Example:h1{
color:red; /*Defines Font Color*/font:calibari; /*Defines Font Style*/text-align:center; /*Defines Text Alignment*/
}This CSS Example Defines Appearance of Element with <h1> Tag with Proper Comments
WHERE TO WRITE CSS CODE Three Ways to Use CSS in HTML
1. Inline Style
2. Internal Style Sheet
3. External Style Sheet
INLINE STYLE In Inline Style looses the Advantages of
Cascading Style Sheet
In Inline Style we use style Attribute in the Opening Tag of an Element
This Style is only Applicable to the Element`s Tag in which it is defined
For Example if we define Inline Style using style attribute of a <h1> tag then it will be applicable to only this Tag and it will not be applicable to any other <h1> Tag
Mostly used if you want that Each Element has its own Appearance and Style
Hard to Use and Apply
INLINE STYLE----EXAMPLE<html>
<head><title>Inline Style</title>
</head><body>
<p>This is Paragraph with No Inline Style</p>
<p style=“color:red;font-size:20px” />This is Paragraph with Inline Style
</p></body>
</html>
INTERNAL STYLE SHEET Defined inside a Single Document Can Only be applied to the Document in
which it is Defined No other Document can use the Internal
Style Sheet of a Document If Selectors are given then Internal Style
Sheet is Automatically Applied to Whole Document`s of the Selector Type
Defined inside the <head> tag Defined using <style> tag We use the type Attribute of <style> for
Internal Style Sheet as follows:<style type=“text/css” />
……………………………….</style>
INTERNAL STYLE SHEET----EXAMPLE<html>
<head><title>Internal Style Sheet</title><style type=“text/css” />
p{
color:blue;font-size:24px;
}</style>
</head><body>
<p>Paragraph No 1</p><p>Paragraph No 2</p>
</body></html>
EXTERNAL STYLE SHEET Used when Styles is to be applied on many
pages External Style Sheets are Stored in
Separate Files External Style Sheet Files have .css
Extension With External Style Sheet Entire Look of
Web Site is changed by just changing One File
External Style Sheets are attached to the Web Pages using <link> Tag and Using rel, type and href Attributes of <link> Tag
Example:
<link rel=“stylesheet” type=“text/css” href=“c:\sheet.css” />
This Tag with Attributes Attaches Style Sheet named sheet.css in the Web Page
EXTERNAL STYLE SHEETS----EXAMPLE-CSS FILE CONTENTSCSS File:
h1{
font:verdana;font-size:24px;color:red;
}p{
font:times new roman;font-size:12px;color:blue;
}
Name of CSS File: style.css
EXTERNAL STYLE SHEETS----EXAMPLE-HTML FILE CONTENTS<html>
<head><title>External Style Sheet</title><link rel=“stylesheet” type=“text/css”
href=“style.css /></head><body>
<h1>Heading No 1</h1><p>Paragraph No 1</p>
</body></html>
THE SELECTORS CSS allows to specify the following two
Selectors:
1. id Selector
2. class Selector
THE ID SELECTOR Used to Specify Style for Single Element
Uses the id Attribute of HTML Element
id Selector is defined using #Example:
#paragraph{
align:center;font-size:18px;
}#heading {
align:right;font-size:24px;
}
THE ID SELECTOR----EXAMPLE<html>
<head><style type="text/css">
#para1{
text-align:right;color:red;
} </style>
</head>
<body><p id="para1">Hello World!</p><p>This paragraph is not affected by the
style.</p></body>
</html>
THE CLASS SELECTOR Used to Specify Style for Group of Element
Class Selector is mostly used on Various Elements
Uses the class Attribute of HTML Element
id Selector is defined using .Example:
.paragraph{
align:center;font-size:18px;
}
THE CLASS SELECTOR----EXAMPLE<html>
<head><style type="text/css">
.center{
text-align:center;}
</style></head><body>
<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph.</p>
</body></html>
CSS BACKGROUND COLOR Uses background-color Property
<html><head>
<style type="text/css">body{
background-color:#b0c4de;}
</style></head><body><h1>Background Color</h1><p>Paragraph</p>
</body></html>
CSS BACKGROUND IMAGE<html>
<head><style type="text/css">
body {background-image:url('paper.gif');}
</style></head><body>
<h1>Background Image</h1></body>
</html>
CSS FONT FAMILY
<html><head></head>
<body><p style="font-family:georgia,garamond,serif;">This text is rendered in either georgia, garamond, or the default serif font (depending on which font the user's system has).</p> </body></html>
CSS FONT SIZE
<html><head></head>
<body><p style="font-size:20px;">This text is using a font size of 20 pixels.</p> </body></html>
CSS FONT ADJUST SIZE
<html><head></head>
<body><p style="font-size-adjust:0.58;">This text is using a font-size-adjust value.</p> </body></html>
CSS FONT STRETCH
<html><head></head>
<body><p style="font-stretch:ultra-expanded;">If your computer has an expanded version of the font being used, this text will be stretched.</p></body></html>
CSS FONT STYLE
<html><head></head>
<body><p style="font-style:italic;">This text is in italics.</p> </body></html>
CSS FONT VARIANT
<html><head></head>
<body><p style="font-variant:small-caps;">This Text Is Using Small Caps.</p> </body></html>
FONT WEIGHT
<html><head></head>
<body><p style="font-weight:bold;">This text is bold.</p> </body></html>
CSS FONT PROPERTY
<html><head></head>
<body><p style="font:italic small-caps bold 20px georgia,garamond,serif;">The styles for this text has been specified with the 'font' shorthand property.</p> </body></html>
CSS TEXT COLOR
<html><head></head>
<body><p style="color:olive;">This CSS text color is olive</p></body></html>
CSS TEXT ALIGN
<html><head></head>
<body><p style="text-align:right;">This CSS text is aligned right</p></body></html>
CSS LETTER SPACING
<html><head></head>
<body><p style="letter-spacing:5px;">This text has letter spacing applied</p></body></html>
CSS WORD SPACING
<html><head></head>
<body><p style="word-spacing:50px;">This text has word spacing applied</p> </body></html>
TEXT DECORATION<html>
<head></head>
<body><p style="text-decoration:overline;">This text has a line over the top</p><p style="text-decoration:line-through;">This text has a line through the middle</p><p style="text-decoration:underline;">This text has a line underneath</p></body></html>
TEXT TRANSFORM<html>
<head></head>
<body><p style="text-transform:uppercase;">This text has been transformed to uppercase</p><p style="text-transform:lowercase;">THIS TEXT HAS BEEN TRANSFORMED TO LOWERCASE</p><p style="text-transform:capitalize;">this text has been capitalized.</p></body></html>
CSS TEXT DIRECTION
<html><head></head>
<body><p style="direction:rtl;">This text is running from right to left.</p></body></html>
CSS TEXT SHADOW
<html><head></head>
<body><p style="text-shadow:4px 4px 8px blue;">If your browser supports the CSS text-shadow property, this text will have a shadow.</p></body></html>
CSS TEXT BACKGROUND COLOR
<html><head></head>
<body><p style="background-color:yellow;">This text has a background color applied.</p></body></html>
CSS TEXT BACKGROUND IMAGE
<html><head></head>
<body><p style="height:100px;background-image:url(1.png);">This text has a background image applied. </p></body></html>
CSS BACKGROUND IMAGE REPEAT
<html><head></head>
<body><p style="height:100px;background-image:url(1.png);background-repeat:repeat-x;">This background image repeat w.r.t x direction </p> </body></html>
CSS BORDER STYLES
<html><head></head>
<body><p style="border:4px solid blue;“>Solid Border</p><p style="border:4px dotted blue;">Dotted Border</p><p style="border:4px dashed blue;">Dashed Border</p><p style="border:4px double blue;">Double Border</p></body></html>
CSS BORDER WIDTH
<html><head></head>
<body><p style="border-width:6px;border-style:solid;” >This text has border styles border width=6px</p> </body></html>
CSS BORDER COLOR
<html><head></head>
<body><p style="border-width:1px;border-style:solid;border-color:blue;">This text has border styles applied using the border-width, border-style, and border-color properties.</p> </body></html>
CSS MARGINS ALL SIDES<html>
<head></head>
<body><div style="border:1px solid blue;"><p style="border:1px solid orange;margin:20px;">This text has a margin of 20 pixels on all four sides.It is nested within a div with a border to make it easier to see the effect of the margin.</p></div></body></html>
CSS MARGINS EACH SIDE<html>
<head></head>
<body><div style="border:1px solid blue;width:200px;"><p style="border:1px solid orange;margin:40px 10px 1px 40px;">This text has a different sized margin for each side. It is nested within a div with a border to make it easier to see the effect of the margin.</p></div></body></html>
CSS PADDING ALL SIDES
<html><head></head>
<body><p style="border:1px solid orange;padding:20px;">This text has padding of 20 pixels on all four sides.</p></body></html>
CSS PADDING EACH SIDE
<html><head></head>
<body><p>With padding:</p><div style="border:1px solid orange;width:100px;padding:20px 10px 0px 100px;">Padded div</div><p>Without padding:</p><div style="border:1px solid orange;width:100px;">Non-padded div</div> </body></html>
CSS LIST TYPES
<html><head></head>
<body><ul style="list-style-type:circle;"><li>List item one</li><li>List item two</li></ul> </body></html>
CSS LIST STYLE IMAGE<html>
<head><title>Image Bullets</title>
</head><body>
<h4>Custom Bullets</h4><ul style=“list-style-image:
url(bullet_img.gif)" ><li>America</li><li>England</li><li>Pakistan</li><li>Austrailia</li>
</ul></body>
</html>
CSS LIST STYLE POSITION
<html><head></head>
<body><ul style="list-style-position:inside;"><li>List item one</li><li>List item two</li></ul><ul style="list-style-position:outside;"><li>List item one</li><li>List item two</li></ul></body></html>
CSS MARKER OFFSET
<html><head></head>
<body><ul><li style="display:marker;marker-offset:10px;">List item one</li><li>List item two</li></ul></body></html>
CSS HEIGHT AND WIDTH
<html><head></head>
<body><div style="background-color:orange;height:125px;width:75px;">This div has height and width applied.</div></body></html>
CSS MAXIMUM HEIGHT AND MAXIMUM WIDTH
<html><head></head>
<body><div style="background-color:orange;max-height:125px;max-width:75px;">This div has max-height and max-width applied.</div></body></html>
CSS MINIMUM HEIGHT AND MINIMUM WIDTH
<html><head></head>
<body><div style="background-color:orange;min-height:125px;min-width:75px;">This div has min-height and min-width applied.</div></body></html>
CSS RELATIVE POSITIONING
<html><head></head>
<body><div style="position:relative;left:80px;background-color:yellow;width:100px;">This div has relative positioning.</div></body></html>
CSS ABSOLUTE POSITIONING
<html><head></head>
<body><div style="position:absolute;top:100px;left:60px;background-color:yellow;">This div is absolutely positioned 100 pixels from the top and 60 pixels from the left of its containing block. </div></body></html>
CSS FIXED POSITIONING
<html><head></head>
<body><div style="position:fixed;top:100px;left:60px;width:180px;background-color:red;">This div is using a fixed position of 100 pixels from the top and 60 pixels from the left of its containing block. When this page scrolls, this box will remain in a fixed position - it won't scroll with the rest of the page. Go on - SCROLL! </div></body></html>
CSS FLOAT The CSS float property enables you to determine where to position an element relative to the other elements on the page. When you use the float property, other elements will simply wrap around the element you applied the float to.
<html><head></head>
<body><div style="width:300px;"><h1 style="float:left;margin-right:10px;">CSS float</h1><p>If your browser supports the CSS float Property, this text will be flowing around the heading.If this does not seem to work, it could be a browser compatibility thing...</p></div></body></html>
CSS CELL PADDING
<html><head></head>
<body><table border="1" cellpadding="10px"><tr><td>Padded Cell 1</td><td>Padded Cell 2</td></tr><tr><td>Padded Cell 3</td><td>Padded Cell 4</td></tr></table></body></html>
CSS PADDING EXAMPLE<html><head><style type="text/css">table.padded-table td { padding:10px; }</style></head><body><table border="1" class="padded-table"><tr><td>Padded Cell 1</td><td>Padded Cell 2</td></tr><tr><td>Padded Cell 3</td><td>Padded Cell 4</td></tr></table></body></html>
PADDING EACH SIDE INDEPENDENTLY<html><head><style type="text/css">table.padded-table-2 td { padding-top:20px; padding-right:10px; padding-bottom:0px; padding-left:100px; }</style></head><body><table border="1" class="padded-table-2"><tr><td>Padded Cell 1</td><td>Padded Cell 2</td></tr><tr><td>Padded Cell 3</td><td>Padded Cell 4</td></tr></table></body></html>
CSS HYPERLINKS You can use CSS to change the appearance
and behavior of hyperlinks. To do this, you can use the following
selectors/pseudo-classes:
1. a2. a:link3. a:visited4. a:hover5. a:active
CSS HYPERLINKS EXAMPLE<html><head><style type="text/css">a {font-family:Georgia, "Times New Roman", Times, serif;font-size:large;cursor: auto}a:link {color:blue;}a:visited {color: #660066;}a:hover {text-decoration: none; color: #ff9900; font-weight:bold;}a:active {color: #ff0000;text-decoration: none}</style></head><body><p><a href="/css/css_hyperlinks.cfm" target="_blank">CSS Hyperlinks</a></p></body><head><style type="text/css">a {font-family:Georgia, "Times New Roman", Times, serif;font-size:large;cursor: auto}a:link {color:blue;}a:visited {color: #660066;}a:hover {text-decoration: none; color: #ff9900; font-weight:bold;}a:active {color: #ff0000;text-decoration: none}</style></head><body><p><a href="/css/css_hyperlinks.cfm" target="_blank">CSS Hyperlinks</a></p></body></html>
