Your SlideShare is downloading. ×
Cascading Style Sheets(CSS)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Cascading Style Sheets(CSS)

770
views

Published on

A standards-based method for controlling the look and feel of XML content. …

A standards-based method for controlling the look and feel of XML content.
Comprised of Rules to control elements in the document.
Designed to separate formatting from the content while being flexible and scalable
CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element.

Published in: Education, Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
770
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
72
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. RESHMI. P MCA S4
  • 2. CONTENTS• What are Cascading Style Sheets (CSS)?• What can CSS do?• Advantages• Who Creates and Maintains CSS?• CSS Versions• Understanding Style Rules• Types of CSS• CSS rules• CSS Rules Overriding• What is Inheritance?• Handling old Browsers• CSS Comments• CSS - Measurement Units
  • 3. CONTENTS•Using IDs and Classes• Working With DIV• Working With <span>• Manipulating Text using CSS• Setting Fonts using CSS• Setting Backgrounds using CSS• CSS – Images• CSS – Links• CSS – Tables• CSS for Page Layout• CSS - Lists• CSS – Cursors• Display• Limitations
  • 4. What AreCascading Style Sheets (CSS)?
  • 5. What Are Cascading Style Sheets?•Cascading Style Sheets (CSS) is a style sheet languageused to describe the presentation of a document written in amarkup language.• Its most common application is to style web pages written inHTML and XHTML, but the language can be applied to anykind of XML document.•Created by: CSS was created by Håkon Wium Lie and BertBos and was adopted as a W3C Recommendation in late1996.
  • 6. Håkon Wium Lie, chief technical officer of the Opera Softwarecompany and co-creator of the CSS web standard
  • 7. What Are Cascading Style Sheets?•A standards-based method for controlling the look and feel ofXML content.•Comprised of Rules to control elements in the document.•Designed to separate formatting from the content while beingflexible and scalable• CSS specifies a priority scheme to determine which stylerules apply if more than one rule matches against a particularelement. In this so-called cascade, priorities or weights arecalculated and assigned to rules, so that the results are
  • 8. What Can CSS Do?
  • 9. What Can CSS Do?•Text formatting•Element sizing•Element positioning•Change link attributes•Cursor manipulation• support the control of hundreds or thousands ofdocuments from a single control file•This makes our life much easier when it is time to makeupdates
  • 10. Advantages
  • 11. Advantages• Saves time• Easy to change• Keep consistency• Give you more control over layout• Use styles with JavaScript => DHTML• Make it easy to create a common format for all the Web pages
  • 12. Advantages• Pages load faster• Easy maintenance• Superior styles to HTML• Multiple Device Compatibility•Global web standards
  • 13. Who Creates and Maintains CSS?
  • 14. Who Creates and Maintains CSS?• CSS is created and maintained through a group of peoplewithin the W3C called the CSS Working Group.• The CSS Working Group creates documents calledspecifications.• When a specification has been discussed and officiallyratified by W3C members, it becomes a recommendation.
  • 15. Who Creates and Maintains CSS?•These ratified specifications are called recommendationsbecause the W3C has no control over the actualimplementation of the language. Independent companies andorganizations create that software.NOTE: The World Wide Web Consortium, or W3C is agroup that makes recommendations about how the Internetworks and how it should evolve.
  • 16. CSS Versions
  • 17. CSS Versions CSS 1– Font properties such as typeface and emphasis– Color of text, backgrounds, and other elements– Text attributes such as spacing between words, letters, and lines of text– Alignment of text, images, tables and other elements– Margin, border, padding, and positioning for most elements– Unique identification and generic classification of groups of attributes
  • 18. CSS Versions CSS2includes a number of new capabilities like– absolute, relative, and fixed positioning of elements and z-index,– the concept of media types– support for aural style sheets and bidirectional text– new font properties such as shadows.
  • 19. CSS Versions CSS3 Modules include:– Borders (border-radius, box-shadow)– Backgrounds (multiple backgrounds)– Color (HSL colors, HSLA colors, opacity, RGBA colors)– Also:– media queries– multi-column layout– Web fonts
  • 20. Understanding Style Rules
  • 21. Understanding Style Rules• The style characteristics for an HTML element are expressed by Style Rules .• A set of style rules is called a Style Sheet.• Style rules are contained in the <STYLE> element in thedocument’s <HEAD> section. <Head> <Style type=“text/css”> P {color:blue; font-size: 24pt;} </Style> </Head>
  • 22. Understanding Style Rules• A Style Rule is composed of two parts: a selector and adeclaration. Declaration Selector TH {color: red;}.• The Selector indicates the element to which the rule isapplied.• The Declaration determines the property values of aselector.
  • 23. Understanding Style Rules• The Property specifies a characteristic, such as color,font-family, position, and is followed by a colon (:).• The Value expresses specification of a property, such asred for color, arial for font family, 12 pt for font-size, andis followed by a semicolon (;). Property Value P {color: red;}
  • 24. Types of Selectors :-Different types of selectors are:- • Type selectors • Universal selectors • Descendant Selectors • Class Selectors • ID Selectors • Child Selectors • Attribute Selectors • Grouping Selectors
  • 25. The Type Selectors :-• To give a color to all level 1 headings :- h1 { color: #36CFFF; }
  • 26. The Universal Selectors:-•Rather than selecting elements of a specific type, theuniversal selector quite simply matches the name of anyelement type :- *{ color: #000000; }-This rule renders the content of every element in ourdocument in black.
  • 27. The Descendant Selectors :-•Suppose you want to apply a style rule to a particularelement only when it lies inside a particular element.•In the following example, style rule will apply to <em>element only when it lies inside <ul> tag. ul em { color: #000000; }
  • 28. The Class Selectors :-•can define style rules based on the class attribute of theelements. All the elements having that class will be formattedaccording to the defined rule. .black { color: #000000; }-This rule renders the content in black for every elementwith class attribute set to black in our document.
  • 29. The Class Selectors (Cntd.)•To make it a bit more particular. For example:- h1.black { color: #000000; } -This rule renders the content in black for only <h1>elements with class attribute set to black.
  • 30. The Class Selectors (Cntd.)•You can apply more than one class selectors to givenelement. Consider the following example :- <p class="center bold"> This paragraph will be styled by the classes centerand bold. </p>
  • 31. The ID Selectors :-•You can define style rules based on the id attribute of theelements. All the elements having that id will be formattedaccording to the defined rule:- #black { color: #000000; }-This rule renders the content in black for every element withid attribute set to black in our document.
  • 32. The ID Selectors (Cntd.)•To make it a bit more particular. For example: - h1#black { color: #000000; } -This rule renders the content in black for only <h1>elements with id attribute set to black.•The true power of id selectors is when they are used as thefoundation for descendant selectors, For example: #black h2 { color: #000000; } -In this example all level 2 headings will be displayed inblack color only when those headings will lie with in tagshaving id attribute set to black.
  • 33. The Child Selectors:-•A type of selector which is very similar to descendants buthave different functionality. Consider the following example: body > p { color: #000000; }-This rule will render all the paragraphs in black if they aredirect child of <body> element. Other paragraphs put insideother elements like <div> or <td> etc. would not have anyeffect of this rule.
  • 34. The Attribute Selectors:-•To apply styles to HTML elements with particularattributes. The style rule below will match all input elementsthat has a type attribute with a value of text:- input[type="text"]{ color: #000000; }•The advantage to this method is that the <inputtype="submit" /> element is unaffected, and the color appliedonly to the desired text fields.
  • 35. The Attribute Selectors(Cntd.):There are following rules applied to attribute selector.:- • p[lang] - Selects all paragraph elements with a lang attribute. • p[lang="fr"] - Selects all paragraph elements whose lang attribute has a value of exactly "fr". • p[lang~="fr"] - Selects all paragraph elements whose lang attribute contains the word "fr". • p[lang|="en"] - Selects all paragraph elements whose lang attribute contains values that are exactly "en", or begin with "en-".
  • 36. Grouping Selectors:-•can apply a style to many selectors if you like. Just separate theselectors with a comma as given in the following example: h1, h2, h3 { color: #36C; text-transform: lowercase; } - This define style rule will be applicable to h1, h2 and h3element as well.• The order of the list is irrelevant. All the elements in the selectorwill have the corresponding declarations applied to them.
  • 37. Types of CSS
  • 38. Types of CSSThree CSS implementations:-  Inline • Affects only the element applied to  Embedded • Affects only the elements in a single file  External • Linked to an unlimited number of files
  • 39. HTML Page Structure<HTML> Document (HTML)<HEAD> Head Title Text <TITLE>Title Text</TITLE></HEAD> Body<BODY> H1 Heading <H1>H1 Heading</H1> Paragraph 1 <P>Paragraph 1</P> Paragraph 2 <P>Paragraph 2</P></BODY></HTML>
  • 40. Inline CSS • Add styles to each tag within the HTML file • Use it when you need to format just a single section in a web pageThe style Attribute: • can use style attribute of any HTML element to define style rules. These rules will be applied to that element only. syntax:- <element style="...style rules....">
  • 41. Inline CSS•Use the STYLE attribute <p>This is normal text</p> <p><b>This is bold text</b></p> <p style=“font-weight: bold”>This is boldtext</p>
  • 42. Inline CSSAttributes: Attribute Value Description style style rules The value of style attribute is a combination of style declarations separated by semicolon (;).Example:- Following is the example of inline CSS based on abovesyntax: <h1 style ="color:#36C;"> This is inline CSS </h1>This will produce following result:This is inline CSS
  • 43. Embedded or internal styles• A style is applied to the entire HTML file• Use it when you need to modify all instances of particular element (e.g., h1) in a web page
  • 44. Embedded CSSThe <style> Element: • can put CSS rules into an HTML document using the <style> element. • This tag is placed inside <head>...</head> tags.Syntax: - <head> <style type="text/css" media="..."> Style Rules ............ </style> </head>
  • 45. Embedded CSSAttributes: Attributes associated with <style> elements are: Attribute Value Description type text/css Specifies the style sheet language as a content- type (MIME type). This is required attribute. media screen Specifies the device the document will be tty displayed on. Default value is all. This is optional tv attribute. projection handheld print braille aural all
  • 46. External style sheets• An external style sheet is a text file containing the style definition (declaration)• Use it when you need to control the style for an entire web site
  • 47. External CSS • The <link> element can be used to include an external stylesheet file in your HTML document. • An external style sheet is a separate text file with .css extension. Define all the Style rules within this text file and then include this file in any HTML document using <link> element.Syntax:- <head> <link type="text/css" href="..." media="..." /> </head>
  • 48. External CSSAttributes:Attributes associated with <style> elements are: Attribute Value Descriptiontype text/css Specifies the style sheet language as a content-type (MIME type). This attribute is required.href URL Specifies the style sheet file having Style rules. This attribute is a required.media screen Specifies the device the document will be tty displayed on. Default value is all. This is tv optional attribute. projection handheld print braille aural all
  • 49. Creating an External Style Sheet• Open a new blank document in Notepad• Type style declarations – h1 {color:red; font-family:sans-serif;}• Do not include <style> tags• Save the document as filename.css
  • 50. Linking to Style Sheets• Open an HTML file• Between <head> and </head> add – <link href=URL rel=“relation_type” type=“link_type”> • URL is the file.css • Relation_type=“stylesheet” • Link_type=“text/css”• Save this file and the .css file in the same web server directory
  • 51. Imported CSS - @import Rule:• @import is used to import an external stylesheet in a manner similar to the <link> element.• Generic syntax of @import rule:- <head> <@import "URL"; </head>Here URL is the URL of the style sheet file having stylerules.
  • 52. Imported CSS - @import Rule:•You can use another syntax as well:- <head> <@import url("URL"); </head> Example:- <head> @import "mystyle.css"; </head>
  • 53. External CSSA few reasons this is better :- • Easier Maintenance • Reduced File Size • Reduced Bandwidth • Improved Flexibility
  • 54. CSS Rules
  • 55. Cascading Style Sheets (CSS)Style Rules:-Inline style=“font-weight: bold” Property ValueEmbedded/ H1 {font-weight: bold}External Selector Declaration H1 {font-weight: bold; color:black; }
  • 56. CSS Rules Overriding
  • 57. CSS Rules OverridingThere are four ways to include style sheet rules in a an HTMLdocument. Here is the rule to override any Style Sheet Rule.:-  Any inline style sheet takes highest priority. So it will override any rule defined in <style>...</style> tags or rules defined in any external style sheet file.  Any rule defined in <style>...</style> tags will override rules defined in any external style sheet file.  Any rule defined in external style sheet file takes lowest priority and rules defined in this file will be applied only when above two rules are not applicable
  • 58. Inheritance
  • 59. Inheritance• When we nest one element inside another, the nestedelement will inherit the properties assigned to the containingelement. Unless we modify the inner elements valuesindependently.• For example, a font declared in the body will be inheritedby all text in the file no matter the containing element, unlessyou declare another font for a specific nested element. body {font-family: Verdana, serif;}- Now all text within the (X)HTML file will be set toVerdana.
  • 60. Inheritance• If you wanted to style certain text with another font, like anh1 or a paragraph then you could do the following:- h1 {font-family: Georgia, sans-serif;} p {font-family: Tahoma, serif;} -Now all <h1> tags within the file will be set to Georgiaand all <p> tags are set to Tahoma, leaving text within otherelements unchanged from the body declaration of Verdana
  • 61. Inheritance• There are instances where nested elements do not inheritthe containing elements properties.•For example, if the body margin is set to 20 pixels, the otherelements within the file will not inherit the body margin bydefault. body {margin: 20px;}
  • 62. Handling old Browsers
  • 63. Handling old Browsers•To handle old browsers while writing our Embedded CSS inan HTML document, can use comment tags to hide CSSfrom older browsers: <style type="text/css"> <!-- body, td { color: blue; } --> </style>
  • 64. CSS Comments
  • 65. CSS Comments•We can use /* ....*/ to comment multi-line blocks in similarway you do in C and C++ programming languages. Example:- /* This is an external style sheet file */ h1, h2, h3 { color: #36C; font-weight: normal; } /* end of style rules. */
  • 66. CSS - Measurement Units
  • 67. CSS - Measurement Units
  • 68. Using IDs and Classes
  • 69. Working With Ids• Use an id to distinguish something, like a paragraph, from the others in a document.• To create an ID for a specific tag, use the property:- <tag ID=id_name> For example, to identify a paragraph as “head”, use the code:- <p id=“head”>… </p>• To apply a style to a specific ID, use:- #id_name {style attributes and values}
  • 70. Classes• HTML and XHTML require each id be unique– therefore an id value can only be used once in a document.• can mark a group of elements with a common identifier using the class attribute. <element class=“class”> … </element>
  • 71. Working With Classes• To create a class, enter the following in the HTML tag: – <tag CLASS=class_name> – <h1 CLASS=FirstHeader>IU</h1> – class_name is a name to identify this class of tags• To apply a style to a class of tags, use: – tag.class_name {style attributes} or – .class_name {style attributes}
  • 72. Applying a style to a class
  • 73. Working With Classes and Ids • The difference between the Class property and the ID property :- – The value of the ID property must be unique. you can’t have more than one tag with the same ID value – You can apply the same Class value to multiple document tags
  • 74. Working With DIV
  • 75. Working With DIV• <DIV> tag is used for blocks of text, e.g., paragraphs, block quotes, headers, or lists• To create a container for block-level elements, use: – <DIV CLASS=class_name> • Block-level elements </DIV> – Class_name is the name of the class – We can substitute the ID proper for the Class property (with ID, the syntax for CSS style, #id_name {style attributes and values}
  • 76. Working With <DIV> DIV.Slogan {font- weight:bold} style Maxwell…: “We teach…<DIV CLASS=Slogan>Maxwell Scientific’s Resulting new textSlogan is:<BR>”We teach science”</DIV> HTML code
  • 77. Working With <span>
  • 78. Working With <span>• Spans are very similar to divisions except they are aninline element versus a block level element.• No linebreak is created when a span is declared•With the <span> tag, you can use inline elements, e.g.,<B>, <I>
  • 79. Working With <span>• To create a container for inline elements, use: – <span CLASS=class_name> • inline elements </span>• can use the span tag to style certain areas of text, as:- <span class="italic">This text is italic</span>• Then in CSS file: .italic{ font-style: italic; }
  • 80. Manipulating Text using CSS
  • 81. Manipulating Text using CSSWe can set following text properties of an element:• The color property is used to set the color of a text.• The direction property is used to set the text direction.• The letter-spacing property is used to add or subtract spacebetween the letters that make up a word.• The word-spacing property is used to add or subtract spacebetween the words of a sentence.• The text-indent property is used to indent the text of aparagraph.
  • 82. Manipulating Text using CSS• The text-align property is used to align the text of adocument.• The text-decoration property is used to underline,overline, and strikethrough text.• The text-transform property is used to capitalize text orconvert text to uppercase or lowercase letters.•The white-space property is used to control the flow andformatting of text.• The text-shadow property is used to set the text shadowaround a text.
  • 83. Set the text color:-• We can set the color of text with the following: color: value;•Possible values are:- - color name - example:(red, black...) - hexadecimal number - example: (#ff0000, #000000) - RGB color code - example: (rgb(255, 0, 0), rgb(0, 0, 0))
  • 84. Set the text color:-• Following is the example which demonstrates how to set thetext color. Possible value could be any color name in any validformat. <p style="color:red;"> This text will be written in red. </p> This will produce following result:- This text will be written in red.
  • 85. Set the text direction :-•We can set the direction of text with the following: direction: value;•Possible values are:- - ltr - rtl•Example:- <p style="direction:rtl;"> This text will be renedered from right to left </p>
  • 86. Set the space between characters:-•We can adjust the space between letters in the followingmanner:- letter-spacing: value;•Setting the value to 0, prevents the text from justifying. Youcan use negative values.•Possible values are:- - normal - length
  • 87. Set the space between characters:-•Following is the example which demonstrates how to set thespace between characters. <p style="letter-spacing:5px;"> This text is having space between letters. </p>- This will produce following result: - T h i s t e x t i s h a v i n g s p a c e b e t w ee n l e t t e r s.
  • 88. Set the space between words:-•We can adjust the space between words in the followingmanner :- word-spacing: value;•We can use negative values.•Possible values are :- - normal - length
  • 89. Set the space between words:-•Following is the example which demonstrates how to setthe space between words:- <p style="word-spacing:5px;"> This text is having space between words. </p>-This will produce following result:- This text is having space between words.
  • 90. Set the text indent:-• We can indent the first line of text in an (X)HTML elementwith the following:- text-indent: value;•Possible values are:- - length - percentage
  • 91. Set the text alignment:-•We can align text with the following:- text-align: value;•Possible values are:- - left - right - center - justify
  • 92. Decorating the text:-• You can decorate text with the following:- text-decoration: value;•Possible values are :- - none - underline - overline - line through - blink
  • 93. Set the text cases:-• We can control the size of letters in an (X)HTML elementwith the following:- text-transform: value;• Possible values are - none - capitalize - lowercase - uppercase
  • 94. Set the white space between text:-• We can control the whitespace in an (X)HTML element withthe following:- white-space: value;• Possible values are - normal - pre -nowrap
  • 95. Set the white space between text:-•Example:- <p style="white-space:pre;">This text has a linebreak and the white-space pre setting tells the browser tohonor it just like the HTML pre tag.</p> - This will produce following result:- This text has a line break and the white-space pre setting tells the browser tohonor it just like the HTML pre tag.
  • 96. Set the text shadow:-•Following is the example which demonstrates how to set theshadow around a text. <p style="text-shadow:4px 4px 8px blue;"> If your browser supports the CSS text-shadowproperty, this text will have a blue shadow.</p>• This may not be supported by all the browsers.
  • 97. Setting Fonts using CSS
  • 98. Setting Fonts using CSSWe can set following font properties of an element:-• The font-family property is used to change the face of a font.•The font-style property is used to make a font italic or oblique.• The font-variant property is used to create a small-caps effect.• The font-weight property is used to increase or decrease howbold or light a font appears.• The font-size property is used to increase or decrease the sizeof a font.• The font property is used as shorthand to specify a number ofother font properties.
  • 99. Font- family Property :-•In CSS, there are two types of font family names: - generic family - a group of font families with a similar look (like "Serif" or "Monospace") - font family - a specific font family (like "Times New Roman" or "Arial")• Format:- font-family:"Times New Roman", Times, serif;
  • 100. Font- family Property :-Generic family Font family Description Serif fonts have small lines at Serif Times New Roman the ends on some characters Georgia "Sans" means without - these Sans-serif Arial fonts do not have the lines at Verdana the ends of characters All monospace characters have Monospace Courier New the same width Lucida Console
  • 101. Font- family Property:-• If the name of a font family is more than one word, it must be in quotation marks, like font-family The font family of a text is set with the font-family property.• The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.• Start with the font you want, and end with a generic family.• More than one font family is specified in a comma-separated list: Example:- p{font-family:"Times New Roman", Times, serif;}
  • 102. Set the font style:-•We can set the style of text in a element with the font-styleproperty font-style: value;•Possible values are:- - normal - The text is shown normally - italic - The text is shown in italics - oblique - The text is "leaning" (oblique is very similar to italic, but less supported)• Example:- p.normal {font-style:normal;}
  • 103. Set the font variant:-•We can set the variant of text within an element with the font-variant Property font-variant: value;•Possible values are:- - normal - small-caps - displayed when all the letters of the word are in capitals with uppercase characters slightly larger than lowercase.•Later versions of CSS may support additional variants such as - condensed - expanded - small-caps numerals or other custom variants.
  • 104. Set the font weight:-•We can control the weight of text in an element with thefont-weight property:- font-weight: value;•Possible values are:- - lighter - normal - bold | bolder - 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900• The bolder and lighter values are relative to the inheritedfont weight, while the other values are absolute font weights.
  • 105. Set the font weight:-Note:-•Since not all fonts have nine possible display weights some ofthe weights may be grouped together in assignment.•If the specified weight is not available, an alternate will bechosen on the following basis:- - 500 may be switched with 400, and vice versa - 100-300 may be assigned to the next lighter weight, if any, or the next darker weight otherwise - 600-900 may be assigned to the next darker weight, ifany, or the next lighter weight otherwise
  • 106. Set the font size:-• We can set the size of the text used in an element by using thefont size Property font-size: value;• There are a lot of choices for values: - xx-large | x-large | larger | large - medium - small | smaller | x-small | xx-small - length - % (percent)
  • 107. Set the font size adjust: -•We can set the font size adjust of an element. font-size-adjust: value;•This property enables you to adjust the x-height to makefonts more legible.• Possible value could be any number.•Example:- <p style="font-size-adjust:0.61;"> This text is using a font-size-adjust value. </p>
  • 108. Set the font stretch:-•We can set the font stretch of an element. font-stretch:value;•This property relies on the users computer to have anexpanded or condensed version of the font being used.•Possible values could be :- -normal | wider | narrower - ultra-condensed | extra-condensed | condensed | semi- condensed - semi-expanded | expanded | extra-expanded | ultra- expanded.
  • 109. Setting the Font property:-•We can use the font property to set all the font properties atonce. font:value;• Example :- <p style="font:italic small-caps bold 15pxgeorgia;"> Applying all the properties on the text at once. </p> - This will produce following result: APPLYING ALL THE PROPERTIES ON THE
  • 110. Setting Backgrounds using CSS
  • 111. Setting Backgrounds using CSSWe can set following background properties of an element:- • The background-color property is used to set the background color of an element. • The background-image property is used to set the background image of an element. • The background-repeat property is used to control the repetition of an image in the background.
  • 112. Setting Backgrounds using CSS• The background-position property is used to control the position of an image in the background.• The background-attachment property is used to control the scrolling of an image in the background.• The background property is used as shorthand to specify a number of other background properties.
  • 113. Set the background color:-•We can specifically declare a color for the background of anelement using the background-color property. background-color: value;•Possible values are:- - color name - hexadecimal number - RGB color code - transparent•Example:-<p style="background-color:yellow;"> This text has a yellowbackground color. </p>
  • 114. Set the background image:-•We can set an image for the background of an element usingthe background-image property. background-image: url(path_to_image);•Possible Values are:- - url - none
  • 115. Repeat the background image:-•We can set if an image set as a background of an element is torepeat(across=x and/or down=y) if image is small, using thebackground-repeat property. background-repeat: value;• possible values are:- - repeat - repeat-x | repeat-y• We can use no-repeat value for background-repeat property ifyou dont want to repeat an image, in this case image willdisplay only once.
  • 116. Set the background image position:• We can position an image used for the background of anelement using the background-position property. background-position: value;•Possible values are:- - top left | top center | top right - center | leftcenter | centercenter - rightbottom | leftbottom | centerbottom - rightx-% y-% - x-pos y-pos
  • 117. Set the background attachment:-•If we are using an image as a background. We can set whetherthe background scrolls with the page or is fixed when the userscrolls down the page with the background-attachmentproperty background-attachment: value;• Possible values are:- - fixed - scroll
  • 118. Set the background property:-•We can style the background of an element in one declarationwith the background property. background: #ffffff url(path_to_image) top left no-repeat fixed;• Possible Values:- - attachment - color - image - position - repeat
  • 119. CSS – Images
  • 120. CSS – ImagesWe can set following image properties using CSS.:- • The border property is used to set the width of an image border. • The height property is used to set the height of an image. • The width property is used to set the width of an image. • The -moz-opacity property is used to set the opacity of an image.
  • 121. The image border Property:-•The border property of an image is used to set the width of animage border.•This property can have a value in length or in %.• A width of zero pixels means no border.• Example:- <img style="border:0px;" src="/images/css.gif" /> <br> <img style="border:3px dashed red;” src="/images/css.gif" />
  • 122. The image height Property:-•The height property of an image is used to set the height of animage.•This property can have a value in length or in %.•While giving value in %, it applies it in respect of the box inwhich an image is available.•Example:- <img style="border:1px solid red; height:100px;" src="/images/css.gif" /> <br /> <img style="border:1px solid red; height:50%;" src="/images/css.gif" />
  • 123. The image width Property:-•The width property of an image is used to set the width of animage.•This property can have a value in length or in %.•While giving value in %, it applies it in respect of the box inwhich an image is available.• Example:- <img style="border:1px solid red; width:100px;" src="/images/css.gif" /> <br /> <img style="border:1px solid red; width:100%;" src="/images/css.gif" />
  • 124. The -moz-opacity Property:-• The -moz-opacity property of an image is used to set theopacity of an image.• This property is used to create a transparent image inMozilla.•IE uses filter:alpha(opacity=x) to create transparent images.• In Mozilla (-moz-opacity:x) x can be a value from 0.0 - 1.0.A lower value makes the element more transparent (The samethings goes for the CSS3-valid syntax opacity:x).• In IE (filter:alpha(opacity=x)) x can be a value from 0 - 100.A lower value makes the element more transparent.
  • 125. CSS – Links
  • 126. CSS – LinksWe can set different properties of a hyper link using CSS:- • The :link Signifies unvisited hyperlinks. • The :visited Signifies visited hyperlinks. • The :hover Signifies an element that currently has the users mouse pointer hovering over it. • The :focus like :hover, but this one is for users that are not using a mouse and are tabbing through the links via there keyboards tab key, it sets the color a link changes to as the user tabs through the links • The :active Signifies an element on which the user is
  • 127. CSS – Links•Usually these all properties are kept in the header part ofHTML document.• a:hover MUST come after a:link and a:visited in the CSSdefinition in order to be effective.•Also, a:active MUST come after a:hover in the CSSdefinition as follows.:- <style type="text/css"> a:link {color: #000000;} a:visited {color: #006600;} a:hover {color: #FFCC00;} a:active {color: #FF00CC;} </style>
  • 128. Set the color of Links:-• To set the link color, use a:link• Example :- <style type="text/css"> a:link {color:#000000} </style> <a href="/html/index.html“>Black Link</a>
  • 129. Set the color of Visited Links:-• To set the color of visited links, use a:visited• Example:- <style type="text/css"> a:visited {color: #006600} </style> <a href="/html/index.html">Click this link</a> - Once you will click this link, it will change its color togreen.
  • 130. Change the color of links when mouse is over:-•To change the color of links when we bring a mouse pointerover that link, use a:hover•Example:- <style type="text/css"> a:hover {color: #FFCC00} </style> <a href="/html/index.html">Bring Mouse Here</a> - Now you bring your mouse over this link and you will seethat it changes its color to yellow.
  • 131. Change the color of active links:-• To change the color of active links, use a:active• Example:- <style type="text/css"> a:active {color: #FF00CC;} </style> <a href="/html/index.htm">Click This Link</a> - This will change it color to pink when user clicks it.
  • 132. CSS – Tables
  • 133. CSS – TablesWe can set following properties of a table:- • The border-collapse Specifies whether the browser should control the appearance of adjacent borders. • The border-spacing Specifies the width that should appear between table cells. • The caption-side property is to control the placement of the table caption. • The table-layout Allows browsers to speed up layout of a table.
  • 134. The border-collapse Property:-•Specifies whether the browser should control the appearanceof adjacent borders.•This property can have two values collapse and separate.• collapse- the appearance of adjacent borders that touch eachother• separate - each cell should maintain its style.• Format:- border-collapse: collapse; border- collapse: separate;
  • 135. The border-spacing Property:-•The border-spacing property specifies the distance thatseparates adjacent cells borders.•It can take either one or two values; these should be units oflength.•If we provide one value it will applies to both vertical andhorizontal borders• If we specify two values, the first refers to the horizontalspacing and the second to the vertical spacing• Format:- border-spacing:10px;
  • 136. The caption-side Property:-• We use the caption-side property to control the placement ofthe table caption.• The caption-side property allows us to specify where thecontent of a <caption> element should be placed inrelationship to the table.• The table that follows lists the possible values :- - top | bottom - left | right.
  • 137. The empty-cells Property:-• The empty-cells property indicates whether a cell withoutany content should have a border displayed. empty- cells: value;•This property can have one of the three values:- - show - hide - inherit.
  • 138. The table-layout Property:-• The table-layout property is supposed to help you controlhow a browser should render or lay out a table.•This property can have one of the three values :- - fixed - auto - inherit.•This property is not supported by many browsers so do notrely on this property.
  • 139. CSS for Page Layout
  • 140. CSS for Page Layout• All HTML elements can be considered as boxes. In CSS, theterm "box model" is used when talking about design and layout.• The CSS box model is essentially a box that wraps aroundHTML elements, and it consists of:- - margins - borders - padding - the actual content.• The box model allows us to place a border around elements andspace elements in relation to other elements.
  • 141. CSS for Page Layout I appreciate the prompt delivery of the pack of star disks.padding border margin
  • 142. CSS – Margins
  • 143. CSS – Margins• The margin property defines the space around an HTMLelement.• It is possible to use negative values to overlap content.• The values of the margin property are not inherited by childelements.• The adjacent vertical margins (top and bottom margins) willcollapse into each other so that the distance between theblocks is not the sum of the margins, but only the greater ofthe two margins or the same size as one margin if both areequal..
  • 144. CSS – MarginsThere are following four properties to set an element margin:- • The margin A shorthand property for setting the margin properties in one declaration. • The margin-bottom Specifies the bottom margin of an element. • The margin-top Specifies the top margin of an element. • The margin-left Specifies the left margin of an element. • The margin-right Specifies the right margin of an element
  • 145. The margin Property:-• The margin property allows you set all of the properties forthe four margins in one declaration.• Format :- margin: value;• Possible values are:- - length - percentage - auto
  • 146. The margin Property:-• We can also declare all the margins of an element in a single propertyas follows:- margin: 10px 10px 10px 10px; The order of values as follows:- 1. top 2. right 3. bottom 4. left• If only one value is declared, it sets the margin on all sides. margin: 10px;•If you only declare two or three values, the undeclared values aretaken from the opposing side. margin: 10px 10px; /* 2 values */ margin: 10px 10px 10px; /* 3 values */
  • 147. The margin Property:-• We can set the margin property to negative values. If youdo not declare the margin value of an element, the margin is0 (zero). margin: -10px;• Elements like paragraphs have default margins in somebrowsers, to combat this set the margin to 0 (zero). p {margin: 0;}• We do not have to add px (pixels) or whatever units youuse, if the value is 0 (zero).
  • 148. The margin-bottom Property:-• The margin-bottom property allows you set bottom margin ofan element.• It can have a value in length, % or auto.• Format:- margin-bottom: value;• Example:- <p style="margin-bottom: 15px; border:1px solid black;"> This is a paragraph with a specified bottom margin</p>
  • 149. The margin-top Property:-• The margin-top property allows you set top margin of anelement.•It can have a value in length, % or auto.• Format:- margin-top: value;• Example:- <p style="margin-top: 5%; border:1px solid black;"> This is a paragraph with a specified top margin inpercent </p>
  • 150. The margin-left Property:-•The margin-left property allows you set left margin of anelement.•It can have a value in length, % or auto.•Format:- margin-left: value;• Example:- <p style="margin-left: 15px; border:1px solid black;"> This is a paragraph with a specified left margin</p>
  • 151. The margin-right Property:-•The margin-right property allows you set right margin of anelement.•It can have a value in length, % or auto.•Format:- margin-right: value;• Example:- <p style="margin-right: 15px; border:1px solid black;"> This is a paragraph with a specified right margin</p>
  • 152. CSS – Borders
  • 153. CSS – Borders•The border properties allow you to specify how the borderof the box representing an element should look. border: value;• There are three possibilities of values we can change:- - The border-color Specifies the color of a border. - The border-style Specifies whether a border should be solid, dashed line, double line, or one of the other possible values. - The border-width Specifies the width of a border.
  • 154. The border-color Property:-• We can set the color of a border independently with theborder-color property. border-color: value;• Possible Values are:- - color name - hexadecimal number - RGB color code - transparent
  • 155. The border-color Property:-• The border-color property allows you to change the color ofthe border surrounding an element.• We can individually change the color of the bottom, left, topand right sides of an elements border using the properties:- - border-bottom-color changes the color of bottom border. - border-top-color changes the color of top border. - border-left-color changes the color of left border. - border-right-color changes the color of right border.
  • 156. The border-style Property:-• We can set the style of a border independently with the border-styleproperty. border-style: value;• Possible values are:- - none: No border. (Equivalent of border-width:0;) - solid: Border is a single solid line. - dotted: Border is a series of dots. - dashed: Border is a series of short lines. - double: Border is two solid lines. - groove: Border looks as though it is carved into the page. - ridge: Border looks the opposite of groove. - inset: Border makes the box look like it is embedded in the page. - outset: Border makes the box look like it is coming out of the canvas. - hidden: Same as none, except in terms of border-conflict resolution for table elements.
  • 157. The border-style Property:-• We can individually change the style of the bottom, left,top, and right borders of an element using followingproperties:- - border-bottom-style changes the style of bottom border. - border-top-style changes the style of top border. - border-left-style changes the style of left border. - border-right-style changes the style of right border.
  • 158. The border-width Property:-• The border-width property allows us to set the width of anelement borders. border-width: value;• The value of this property could be:- - a length in px, pt or cm - thin - medium - thick.
  • 159. The border-width Property:-• We can individually change the width of the bottom, top,left, and right borders of an element as:- - border-bottom-width changes the width of bottom border. - border-top-width changes the width of top border. - border-left-width changes the width of left border. - border-right-width changes the width of rightborder.
  • 160. CSS – Paddings• The padding property allows you to specify how much spaceshould appear between the content of an element and its border: padding: value;•The value of this attribute should be either - a length - a percentage - the word inherit.•If the value is inherit it will have the same padding as its parentelement.•If a percentage is used, the percentage is of the containing box.
  • 161. CSS – Paddings• We can also set different values for the padding on each side of thebox using the following properties:- - The padding-bottom Specifies the bottom padding of anelement. - The padding-top Specifies the top padding of an element. - The padding-left Specifies the left padding of an element. - The padding-right Specifies the right padding of anelement. - The padding Serves as shorthand for the precedingproperties.
  • 162. CSS - Lists
  • 163. CSS - Lists• Lists are very helpful in conveying a set of either numbered or bulletedpoints.• There are following five CSS properties which can be used to controllists:- - The list-style-type Allows you to control the shape orappearance of the marker. - The list-style-position Specifies whether a long point that wrapsto a second line should align with the first line or start underneath the startof the marker. - The list-style-image Specifies an image for the marker ratherthan a bullet point or number. - The list-style Serves as shorthand for the preceding properties. - The marker-offset Specifies the distance between a marker andthe text in the list.
  • 164. The list-style-type Property:-•This allows us to control the shape or style of bullet point(also known as a marker) in the case of unordered lists, andthe style of numbering characters in ordered lists.• Format:- list-style-type: value;• The values which can be used for an unordered list: - Value Description none NA disc (default) A filled-in circle circle An empty circle square A filled-in square
  • 165. The list-style-type Property:-• The values which can be used for an ordered list: - Value Description Example decimal Number 1,2,3,4,5 decimal-leading-zero 0 before the number 01, 02, 03, 04, 05 lower-alpha Lowercase a, b, c, d, e alphanumeric characters upper-alpha Uppercase A, B, C, D, E alphanumeric characters lower-roman Lowercase Roman i, ii, iii, iv, v numerals upper-roman Uppercase Roman I, II, III, IV, V numerals
  • 166. The list-style-position Property:• The list-style-position property indicates whether the markershould appear inside or outside of the box containing the bulletpoints.• Format:- list-style-position: value;•It can have one the two values:- Value Description none NA If the text goes onto a second line, the text will wrap underneath the marker. It will also appear indented to inside where the text would have started if the list had a value of outside. If the text goes onto a second line, the text will be outside aligned with the start of the first line (to the right of the bullet).
  • 167. The list-style-image Property:-• The list-style-image allows us to specify an image so thatyou can use your own bullet style.• The syntax is as follows, similar to the background-imageproperty with the letters url starting the value of the propertyfollowed by the URL in brackets. list-style-image: url(path_to_image.gif, jpg or png);•If it does not find given image then default bullets are used.
  • 168. The list-style Property:-• The list-style allows you to specify all the list propertiesinto a single expression.•These properties can appear in any order.• Format :- list-style: value value; - values can be any of the list-style-type, list-style-position, list-style-image properties.
  • 169. The marker-offset Property:-• The marker-offset property allows you to specify thedistance between the marker and the text relating to thatmarker.• Format :- marker- offset: value; - Its value should be a length.• This property is not supported in IE 6 or Netscape 7.
  • 170. CSS – Cursors
  • 171. CSS – Cursors• The cursor property of CSS allows you to specify the type ofcursor that should be displayed to the user. cursor: value;•One good usage of this property is in using images for submitbuttons on forms.•By default, when a cursor hovers over a link, the cursor changedfrom a pointer to a hand.• For a submit button on a form this does not happen. Therefore,using the cursor property to change the cursor to a handwhenever someone hovers over an image that is a submit button.•This provides a visual clue that they can click it.
  • 172. CSS – Cursors• The possible values for the cursor property:- - auto - Shape of the cursor depends on the context area it is over. For example an I over text, a hand over a link, and so on... - crosshair - A crosshair or plus sign - default - An arrow - pointer - A pointing hand (in IE 4 this value is hand) - move - The I bar - e-resize - The cursor indicates that an edge of a box is to be moved right (east)
  • 173. CSS – Cursors- ne-resize - The cursor indicates that an edge of a box is to be moved up and right (north/east)- nw- resize - The cursor indicates that an edge of a box is to be moved up and left (north/west)- text - The I bar- wait - An hour glass- help - A question mark or balloon, ideal for use over help buttons- <url> - The source of a cursor image file
  • 174. Display
  • 175. Display• We can control how an element is displayed with thedisplay property :- display: value;• Possible Values are:- - block - Creates a line break before and after the element - inline - No line break is created - list-item - Creates a line break before and after the element and adds a list itemmarker
  • 176. Limitations of CSS
  • 177. Limitations• Poor controls for flexible layouts• Selectors are unable to ascend• Vertical control limitations• Absence of expressions• Lack of column declaration• Cannot explicitly declare new scope independently of position• Pseudo-class dynamic behavior not controllable• Cannot name rules• Cannot include styles from a rule into another rule