CSSCASCADING STYLE SHEETS        Mukesh N. Tekwani        Computer Science & Physics        mukeshtekwani@hotmail.com     ...
WHAT IS CSS?                                                           January 2012 CSS stands for Cascading Style Sheets...
CSS RULES                                                                    January 2012   A CSS rule has 2 parts: a sel...
WHAT IS THE NEED FOR CSS?(OR WHAT ARE THE ADVANTAGES OF CSS?)                                                             ...
WHAT IS THE NEED FOR CSS?(OR WHAT ARE THE ADVANTAGES OF CSS?)                                                             ...
WHAT IS MEANT BY STYLE RULES?                                                               January 2012   A style rule i...
WHAT IS MEANT BY STYLE RULES?                                                                        January 2012   Consi...
DEFINING THE STYLE FOR A SINGLE ELEMENT:                                                               January 2012   We ...
TRY…                                                           January 2012   Write a style rule so that every <H1> eleme...
EXTERNAL STYLE SHEET:                                                             January 2012   Placing style sheets in ...
EXTERNAL STYLE SHEET:                                                                   January 2012  /* stylesheet 1 */  ...
EXTERNAL STYLE SHEET:                                                            January 2012   The HTML file containing ...
DIFFERENT         CSS SELECTION TECHNIQUES                                                                           Janua...
DIFFERENT        CSS SELECTION TECHNIQUES                                                                          January...
DIFFERENT        CSS SELECTION TECHNIQUES                                                                          January...
WHAT ARE THE CSS FONT PROPERTIES?                                                         January 2012 The following font ...
WHAT ARE THE CSS FONT PROPERTIES?                                            January 2012 Example 1: Create a style rule t...
WHAT ARE THE CSS FONT PROPERTIES?                                            January 2012 Example 2: Create a style rule t...
WHAT ARE THE CSS FONT PROPERTIES?                                                   January 2012 Example 3: Create a style...
WHAT ARE THE CSS FONT PROPERTIES?                                                    January 2012Specifying Text Backgroun...
WHAT IS THE CLASS SELECTOR IN CSS?                                                                            January 2012...
WHAT IS THE CLASS SELECTOR IN CSS?                                                                                  Januar...
HOW TO SPECIFY TEXT MARGINS N CSS?                                                              January 2012 The MARGIN at...
HOW TO SPECIFY THE TEXT BORDERS?                                               January 2012 The BORDER property can be use...
CHANGING BACKGROUND COLOR WITH CSS                                      January 2012<html><head><style type="text/css">   ...
SET AN IMAGE AS THE BACKGROUND OF APAGE                                               January 2012<html><head>            ...
EXAMPLE                                                                  January 2012Create a style rule as follows: To di...
EXAMPLE (CONTD)                                                   January 2012<body>  <h1>CSS text-align Example</h1>     ...
EXAMPLE                                                     January 2012Create style rules for the four states of a link.<...
EXAMPLE (CONTD)                                                       January 2012<body>  <p><b><a href="default.asp" targ...
EXAMPLE                                                         January 2012   Create a style rule for H1 element with fo...
EXAMPLE(CONTD)                                January 2012H1{                                Prof. Mukesh N. Tekwani  colo...
EXAMPLE                                                    January 2012   Create a style rule for P tag with following   ...
EXAMPLE                             January 2012P{                             Prof. Mukesh N. Tekwani    color: magenta; ...
EXAMPLE TO ILLUSTRATE THE VARIOUSSTYLES APPLIED TO LISTS:                                                              Jan...
LISTS<body>                                      January 2012<p>Example of unordered lists:</p>  <ul class="a">           ...
LISTS                                      January 2012  <ul class="e">         <li>Coffee</li>         <li>Tea</li>      ...
HANGING INDENT                                                          January 2012Write a style rule for a <P> element w...
ALIGNING TEXT WITH CSS<html>                                                                                       January...
QUESTIONS ?               January 2012 Read. Practice.               Prof. Mukesh N. Tekwani Read. Practice.:::    ...
Upcoming SlideShare
Loading in …5
×

CSS-Cascading Style Sheets - Introduction

2,380 views
2,216 views

Published on

CSS- Cas

Published in: Education, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,380
On SlideShare
0
From Embeds
0
Number of Embeds
205
Actions
Shares
0
Downloads
61
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

CSS-Cascading Style Sheets - Introduction

  1. 1. CSSCASCADING STYLE SHEETS Mukesh N. Tekwani Computer Science & Physics mukeshtekwani@hotmail.com I. Y. College, Mumbai, India
  2. 2. WHAT IS CSS? January 2012 CSS stands for Cascading Style Sheets CSS defines HOW to display HTML elements Prof. Mukesh N. Tekwani Styles are normally stored in Style Sheets External Style Sheets can save you a lot of work External Style Sheets are stored in CSS files Multiple style definitions will cascade into one CSS selects an element and sets the rules for that element. These set of rules are known as style sheets and can be in the HEAD section of an HTML document or in an external style sheet. 2
  3. 3. CSS RULES January 2012 A CSS rule has 2 parts: a selector, and one or more declarations: Prof. Mukesh N. Tekwani Selector Declaration H1 {color:blue; font-size:12px;) Here, color is the property and blue is the value of that property. The selector is the HTML element that we want to style. The property is the attribute we want to change. Each attribute has a value. CSS property names are separated by dashes when they are multiple words—for example, font-face, font- 3 size, line-height, and so on.
  4. 4. WHAT IS THE NEED FOR CSS?(OR WHAT ARE THE ADVANTAGES OF CSS?) January 2012 HTML pages use a lot of markup to style the pages. Prof. Mukesh N. Tekwani There can be very complex structures of tables, nested frames, invisible pixel images for layout, etc. This makes HTML page difficult to render for the browser. 4
  5. 5. WHAT IS THE NEED FOR CSS?(OR WHAT ARE THE ADVANTAGES OF CSS?) January 2012 Code: CSS is the standard for coding in HTML. CSS is compatible with most browsers. CSS reduces the length of the codes of web page, which decreases the page size, making it easy and fast to load in browsers Prof. Mukesh N. Tekwani Design: Use of CSS makes the design simple. CSS makes the management of the entire website easy to maintain by just changing the CSS file which contains the style details. Bandwidth: CSS reduces the HTML coding and page size. This reduces the bandwidth usage. Consistency: It is easy to maintain, handle and control the whole website made on CSS based HTML. Ex: Suppose we want to change the background of the entire website, we just need to change the background of the single page in the style sheet and the background of the whole website will change. 5
  6. 6. WHAT IS MEANT BY STYLE RULES? January 2012 A style rule is used to change the default behavior of an HTML element. All style rules are contained in Prof. Mukesh N. Tekwani the <STYLE> element and this is put in the HEAD section of an HTML document. A style rule is made up of 2 parts: a selector and a declaration. The selector determines the element to which the style is to be applied. The declaration gives the exact property values. 6
  7. 7. WHAT IS MEANT BY STYLE RULES? January 2012 Consider the <P> element. We can create a style rule for this <P> element so that all paragraphs are in blue color and have a font size of 24px. The style rule is as follows: Prof. Mukesh N. Tekwani<STYLE> P {COLOR:BLUE; FONT-SIZE:24px}</STYLE> Consider the <H1> element. We can create a style for this element so that all H1 headings are in red color.<STYLE TYPE = “TEXT/CSS”> H1 {COLOR:RED} 7</STYLE>
  8. 8. DEFINING THE STYLE FOR A SINGLE ELEMENT: January 2012 We can define the style for a single element as follows: Prof. Mukesh N. Tekwani <H1 STYLE =”COLOR:BLUE”>This is a heading</H1> This direct use of CSS is called inline style and is not recommended due to the tight coupling between the HTML document and the style. 8
  9. 9. TRY… January 2012 Write a style rule so that every <H1> element on your web site is in green color and centered. Prof. Mukesh N. TekwaniH1 {COLOR:GREEN; TEXT-ALIGN:CENTER} 9
  10. 10. EXTERNAL STYLE SHEET: January 2012 Placing style sheets in an external document lets you specify rules for different HTML documents. An Prof. Mukesh N. Tekwani external style sheet is a text document with the file name extension of .CSS. This external style sheet contains the style rules for various elements. 10
  11. 11. EXTERNAL STYLE SHEET: January 2012 /* stylesheet 1 */ H1 {COLOR:GREEN} H2 {COLOR:GREEN; BORDER:SOLID BLUE} Prof. Mukesh N. Tekwani (Other option for SOLID is DOTTED) The CSS line begins with a comment. The CSS style sheet does not contain any HTML code. To link this external style sheet to an HTML document, we add the <LINK> element in the HEAD section of an HTML document:<HEAD><TITLE>Sample document</TITLE><LINK HREF = “style1.css” REL = “stylesheet”></HEAD> 11
  12. 12. EXTERNAL STYLE SHEET: January 2012 The HTML file containing this code displays with the characteristics given in the style sheet. Prof. Mukesh N. Tekwani The HREF attribute gives the URL of the stylesheet. The REL attribute specifies the relationship between the linked and the current document. The major advantage of external style sheets is that the styles can apply to all the web pages on a site. In order to make global changes, we just have to modify the external style sheet. 12
  13. 13. DIFFERENT CSS SELECTION TECHNIQUES January 2012Selecting Multiple Elements: By using multiple selectors, we can use less code. E.g., to make both <H1> and <H2> headings green, we can use the following rules: Prof. Mukesh N. Tekwani <STYLE TYPE = “TEXT/CSS”> <H1> {COLOR:GREEN} <H2> {COLOR:GREEN} </STYLE> These two rules can be expressed in a single rule statement using multiple selectors for the same property as follows: <STYLE TYPE = “TEXT/CSS”> H1, H2 {COLOR:GREEN} </STYLE> 13
  14. 14. DIFFERENT CSS SELECTION TECHNIQUES January 2012Selecting by Context: A context-based selector lets you specify the exact context in which a style is applied. Prof. Mukesh N. Tekwani For example, to specify that the <I> elements appear in blue color only within the <H1> elements, we create the style rule as follows: <STYLE TYPE = “TEXT/CSS”> H1 I {COLOR:BLUE} </STYLE> Note: We should not place a comma between the element H1 and I in the above example. Otherwise it will turn a contextual selection into a multiple element selection and blue color text will apply to both H1 headings and Italic text. 14 So don’t write this: H1 , I {COLOR:BLUE}
  15. 15. DIFFERENT CSS SELECTION TECHNIQUES January 2012Selecting with the CLASS attribute: The CLASS attribute lets you write rules and then apply them to groups of elements. Basically the CLASS attribute lets you define Prof. Mukesh N. Tekwani your own tags and apply them wherever you want. To create a class, we first declare it within the <STYLE> element. The period (.) flag character indicates that the selector is a class selector. <STYLE TYPE = “TEXT/CSS”> .QUOTE {COLOR:RED} </STYLE> Applying this style to a paragraph: <P CLASS=”QUOTE”> This is a paragraph </P> 15
  16. 16. WHAT ARE THE CSS FONT PROPERTIES? January 2012 The following font properties can be controlled with CSS: Prof. Mukesh N. Tekwani  Font families and alternates  Font size  Font weight  Line height  Letter spacing  Text indent 16  Color
  17. 17. WHAT ARE THE CSS FONT PROPERTIES? January 2012 Example 1: Create a style rule that specifies Arial as the font for the <P> Prof. Mukesh N. Tekwani element. <STYLE TYPE=”TEXT/CSS”> P {FONT-FAMILY:ARIAL} </STYLE> 17
  18. 18. WHAT ARE THE CSS FONT PROPERTIES? January 2012 Example 2: Create a style rule that specifies Arial as the font for the <P> Prof. Mukesh N. Tekwani element. In case Arial font is not available, use the Helvetica font. <STYLE TYPE=”TEXT/CSS”> P {FONT-FAMILY:ARIAL, HELVETICA} </STYLE> 18
  19. 19. WHAT ARE THE CSS FONT PROPERTIES? January 2012 Example 3: Create a style rule that specifies Arial as the font for the <P> element. In case Arial font is not available, use the Helvetica Prof. Mukesh N. Tekwani font. In case this too is not available, use a generic font like sans-serif. <STYLE TYPE=”TEXT/CSS”> P {FONT-FAMILY:ARIAL, HELVETICA, SANS-SERIF} </STYLE> The generic names we can use are: Monospace, Serif and Sans-serif. 19
  20. 20. WHAT ARE THE CSS FONT PROPERTIES? January 2012Specifying Text Background Color: Example 4: We can set the text background Prof. Mukesh N. Tekwani color (i.e., the color behind the text) for any element, by using the BACKGROUND- COLOR property, as follows: <STYLE TYPE=”TEXT/CSS”> H2 {COLOR:WHITE; BACKGROUND- COLOR:BLUE} </STYLE> 20
  21. 21. WHAT IS THE CLASS SELECTOR IN CSS? January 2012 The CLASS attribute lets you write rules and then apply them to groups of elements. The CLASS attribute lets you define your own tags and apply Prof. Mukesh N. Tekwani them wherever you want. To create a class, we first declare it within the <STYLE> element. The period (.) flag character indicates that the selector is a class selector. <STYLE TYPE = “TEXT/CSS”> .QUOTE {COLOR:RED} </STYLE> Applying this style to a paragraph: <P CLASS=”QUOTE”> This is a paragraph </P> 21
  22. 22. WHAT IS THE CLASS SELECTOR IN CSS? January 2012 Example 2: Create a class rule called “veryimportant” that sets the background color to yellow. Apply this to a H1 heading and two paragraphs. Also show how a para is rendered if the class is not applied to it. Prof. Mukesh N. Tekwani <HTML> <HEAD> <STYLE TYPE="TEXT/CSS"> .veryimportant {background-color: yellow;} </STYLE> </HEAD> <BODY> <H1 CLASS="veryimportant">Example</h1> <P CLASS="veryimportant">This is the first paragraph.</P> <P>This is the second paragraph.</P> <P Class="veryimportant">This is the third paragraph.</P> </BODY> 22 </HTML>
  23. 23. HOW TO SPECIFY TEXT MARGINS N CSS? January 2012 The MARGIN attribute is used to set the text margin on all four sides. We can also set the margins on individual sides with following settings: Prof. Mukesh N. Tekwani MARGIN-TOP MARGIN-BOTTOM MARGIN-LEFT MARGIN-RIGHT Example: Set the margin on all sides to 30 px <STYLE TYPE = “TEXT/CSS”> P {margin:30px} 23 </STYLE>
  24. 24. HOW TO SPECIFY THE TEXT BORDERS? January 2012 The BORDER property can be used to set the border style, color and width. Prof. Mukesh N. Tekwani Syntax: {BORDER BORDER-STYLE BORDER-WIDTH BORDER-COLOR} Example <STYLE TYPE = “TEXT/CSS”> P {BORDER: SOLID 2pt BLUE} </STYLE> 24
  25. 25. CHANGING BACKGROUND COLOR WITH CSS January 2012<html><head><style type="text/css"> Prof. Mukesh N. Tekwanibody{ background-color:#b0c45e;}</style></head><body> <h1>My CSS web page!</h1> <p>Hello world!</p></body> 25</html>
  26. 26. SET AN IMAGE AS THE BACKGROUND OF APAGE January 2012<html><head> Prof. Mukesh N. Tekwani<style type="text/css"> body {background-image:url(paper.gif);}</style></head><body><h1>Hello World!</h1></body></html> 26
  27. 27. EXAMPLE January 2012Create a style rule as follows: To display the date in a right- aligned paragraph. To display the main text in a justified paragraph. Prof. Mukesh N. Tekwani<html><head><style type="text/css"> h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;}</style></head> 27
  28. 28. EXAMPLE (CONTD) January 2012<body> <h1>CSS text-align Example</h1> Prof. Mukesh N. Tekwani <p class="date">Nov 2010</p> <p class="main">This is the main paragraph in which text alignment is “justified”</p></body></html> 28
  29. 29. EXAMPLE January 2012Create style rules for the four states of a link.<html> Prof. Mukesh N. Tekwani<head><style type="text/css"> a:link {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */</style></head> 29
  30. 30. EXAMPLE (CONTD) January 2012<body> <p><b><a href="default.asp" target="_blank"> Prof. Mukesh N. Tekwani This is a link</a></b></p></body></html> Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective. a:active MUST come after a:hover in the CSS definition in order to be effective. 30
  31. 31. EXAMPLE January 2012 Create a style rule for H1 element with following specifications: Prof. Mukesh N. Tekwani  H1 tag with  Background image: swirlbkg.jpg  Color—green  Letter-spacing-7pt  Text-align- center  Text-decoration-underline  Text-transform--uppercase;  Word-spacing: 2pt 31
  32. 32. EXAMPLE(CONTD) January 2012H1{ Prof. Mukesh N. Tekwani color:green; letter-spacing:7pt; text-align: center; text-decoration:underline; text-transform:uppercase; word-spacing: 2pt} 32
  33. 33. EXAMPLE January 2012 Create a style rule for P tag with following specifications: Prof. Mukesh N. Tekwani  Color – magenta  font-family – Algerian  font-size – medium  font-style—italic  font-weight—lighter 33
  34. 34. EXAMPLE January 2012P{ Prof. Mukesh N. Tekwani color: magenta; font-family:Algerian; font-size: medium; font-style:italic; font-weight:-lighter;} 34
  35. 35. EXAMPLE TO ILLUSTRATE THE VARIOUSSTYLES APPLIED TO LISTS: January 2012<html><head> Prof. Mukesh N. Tekwani<style type="text/css"> ul.a {list-style-type:circle;} /* open circle */ ul.b {list-style-type:square;} /* filled square */ ul.e {list-style-type:disc;} /* filled circle */ ol.c {list-style-type:upper-roman;} /* upper roman I */ ol.d {list-style-type:lower-alpha;} /* lower alpha: a */</style></head> 35
  36. 36. LISTS<body> January 2012<p>Example of unordered lists:</p> <ul class="a"> Prof. Mukesh N. Tekwani <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="b"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> 36 </ul>
  37. 37. LISTS January 2012 <ul class="e"> <li>Coffee</li> <li>Tea</li> Prof. Mukesh N. Tekwani <li>Coca Cola</li> </ul> <p>Example of ordered lists:</p> <ol class="c"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol></body></html> 37
  38. 38. HANGING INDENT January 2012Write a style rule for a <P> element with a 24 pthanging indent and a 30 pixel margin on left and rightsides. Prof. Mukesh N. Tekwani<STYLE TYPE = "TEXT/CSS">P{ text-indent:-24pt; margin-left:30px; margin-right:30px} 38</STYLE>
  39. 39. ALIGNING TEXT WITH CSS<html> January 2012<head><style>h1 {text-align:center;} Prof. Mukesh N. Tekwanip.date {text-align:right;}p.main {text-align:justify;}</style></head><body><h1>CSS text-align Example</h1><p class="date">May, 2009</p><p class="main">In my younger and more vulnerable years my father gave me some advice that Ive been turning over in my mind ever since. Whenever you feel like criticizing anyone, he told me, just remember that all the people in this world havent had the advantages that youve had.</p><p><b>Note:</b> Resize the browser window to see how the value "justify" 39 works.</p></body></html>
  40. 40. QUESTIONS ? January 2012 Read. Practice. Prof. Mukesh N. Tekwani Read. Practice.::: 40

×