Published on

cascading style sheets

Published in: Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. CSS – Chap 1 1. Cascading Style Sheets(CSS)1 What is CSS? • CSS stands for Cascading Style Sheets • CSS defines HOW to display HTML elements • Styles are normally stored in Style Sheets • Styles were added to HTML 4.0 to solve a problem • 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 • We can put the code for this styling in internal or external style sheets. External style sheets are stored in a CSS file. • 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. • A CSS rule has 2 parts: a selector, and one or more declarations: 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-size, line-height, and so on.2 What is the need for CSS? (OR What are the advantages of CSS?) HTML pages use a lot of markup to style the pages. 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. Advantages of CSS: 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 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.3 What is meant by style rules? A style rule is used to change the default behavior of an HTML element. All style rules are contained in the <STYLE> element and this is put in the HEAD section of an HTMLProf. Mukesh N. Tekwani Page 1 of 15
  2. 2. CSS – Ch 1 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. 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: <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} </STYLE> Defining the style for a single element: We can define the style for a single element as follows: <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.4 Write a style rule so that every <H1> element on your web site is in green color and centered. H1 {COLOR:GREEN; TEXT-ALIGN:CENTER}5 What is an external style sheet? How can we link an HTML document to an external style sheet? Placing style sheets in an external document lets you specify rules for different HTML documents. An 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. Example: /* stylesheet 1 */ H1 {COLOR:GREEN} H2 {COLOR:GREEN; BORDER:SOLID BLUE} (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”>Page 2 of 15 mukeshtekwani@hotmail.com
  3. 3. CSS – Chap 1 </HEAD> The HTML file containing this code displays with the characteristics given in the style sheet. 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.6 What are the different CSS selection techniques? CSS allows a designer to use different methods for selecting elements. A designer can select from multiple elements, select by context, select with a CLASS attribute, select with <DIV> (Block Division) or <SPAN> (Inline Division) techniques. Selecting 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: <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> Selecting by Context: A context-based selector lets you specify the exact context in which a style is applied. 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. Doing so will turn a contextual selection into a multiple element selection and blue color text will apply to both H1 headings and Italic text. So don’t write this: H1 , I {COLOR:BLUE} Selecting 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 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.Prof. Mukesh N. Tekwani Page 3 of 15
  4. 4. CSS – Ch 1 <STYLE TYPE = “TEXT/CSS”> .QUOTE {COLOR:RED} </STYLE> Applying this style to a paragraph: <P CLASS=”QUOTE”> This is a paragraph </P> Working with the <DIV> element The <DIV> element lets you specify logical divisions within a document. Each division has its own name and style properties. <DIV> is a block-level element that contains leading and trailing carriage return. We can use the DIV element with the CLASS attribute to create customized block-level elements. Example: Write a style rule to create a division named INTRO with style property color set to green. To create a division, we first declare it within the <STYLE> element. The division INTRO is specified in the STYLE element: <STYLE TYE = “TEXT/CSS”> DIV.INTRO {COLOR:BLUE} </STYLE> Now we specify the <DIV> element in the main HTML document and then use the CLASS attribute to specify the exact type of division. <DIV CLASS = "INTRO"> There is some text here. </DIV> Working with the <SPAN> element The <SPAN> element lets you specify inline elements within a document that have their own name and style properties. We place inline elements within a line of text (just like the <B> or <I> elements). We can use the <SPAN> element with the CLASS attribute to create customized inline elements. To create a span, we first declare it within the <STYLE> element. In this example, we create a SPAN element named Logo as the selector rule: <STYLE TYPE = “TEXT/CSS”> SPAN.LOGO {COLOR:RED} </STYLE> Now we specify the <SPAN> element in the document : Welcome to the world of <SPAN CLASS = "LOGO">CSS</SPAN>7 What are the CSS Font properties? The following font properties can be controlled with CSS: • Font families and alternatesPage 4 of 15 mukeshtekwani@hotmail.com
  5. 5. CSS – Chap 1 • Font size • Font weight • Line height • Letter spacing • Text indent • Color Specifying Font Family and Alternates: We can specify any font or generic font family. The users must have the font installed on their computers. Otherwise the browser uses the default font. Example 1: Create a style rule that specifies Arial as the font for the <P> element. <STYLE TYPE=”TEXT/CSS”> P {FONT-FAMILY:ARIAL} </STYLE> Example 2: Create a style rule that specifies Arial as the font for the <P> element. In case Arial font is not available, use the Helvetica font. <STYLE TYPE=”TEXT/CSS”> P {FONT-FAMILY:ARIAL, HELVETICA} </STYLE> 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 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. Specifying Font Size: CSS offers many different measurement units to specify the font size. These are: Unit Code Description Centimeter cm standard metric centimeter Em em The width of capital M in the current font. Ex ex The width of the letter x in the current font. Inch in Inch Pica pc standard publishing unit equal to 12 points. Pixel px The size of a pixel on the current screen Point point Standard publishing unit with 72 points in an inch Example: The following style rule sets the <BLOCKQUOTE> element to 18 pt Arial: <STYLE TYPE=”TEXT/CSS”> BLOCKQUOTE {FONT-FAMILY:ARIAL; FONT-SIZE:18pt} </STYLE>Prof. Mukesh N. Tekwani Page 5 of 15
  6. 6. CSS – Ch 1 Specifying Font Weight: CSS allows either a numerical or a descriptive value for font weight. Commonly used descriptive values are: Normal, Bold, Bolder, Lighter Example: The following style rule sets the <BLOCKQUOTE> element to 18 pt Arial and font weight is bold: <STYLE TYPE=”TEXT/CSS”> BLOCKQUOTE {FONT-FAMILY:ARIAL; FONT-SIZE:18pt; FONT-WEIGHT:BOLD} </STYLE> Specifying Line Height: CSS allows either a percentage or absolute value for line height. This is called as leading. The percentage is based on font size. If the font size is 10pt and line-height is set at 150%, then the line height will become 15points. <STYLE TYPE=”TEXT/CSS”> BLOCKQUOTE {FONT-FAMILY:ARIAL; FONT-SIZE:18pt; FONT-WEIGHT:BOLD; LINE-HEIGHT:30PT} </STYLE> Specifying Letter Spacing: Adjusting the white space between the letters is called ‘kerning’. To adjust the white space between the letters we use the property letter-spacing, as follows: <STYLE TYPE=”TEXT/CSS”> BLOCKQUOTE {FONT-FAMILY:ARIAL; FONT-SIZE:18pt; FONT-WEIGHT:BOLD; LINE-HEIGHT:30PT;LETTER-SPACING:2pt} </STYLE> Specifying Text Indents: We use the text indent property to set the amount of indentation of the first line of text in a paragraph (or another element). For a hanging indent, we use a negative value. Style rules for Indented text Style rules for hanging text <STYLE TYPE=”TEXT/CSS”> <STYLE TYPE=”TEXT/CSS”> BLOCKQUOTE BLOCKQUOTE { { FONT-FAMILY:ARIAL; FONT-FAMILY:ARIAL; FONT-SIZE:18pt; FONT-SIZE:18pt; FONT-WEIGHT:BOLD; FONT-WEIGHT:BOLD; LINE-HEIGHT:30PT; LINE-HEIGHT:30PT; LETTER-SPACING:2pt; LETTER-SPACING:2pt; TEXT-INDENT:24pt TEXT-INDENT: -24pt } } </STYLE> </STYLE> Specifying Text Background Color: We can set the text background color (i.e., the color behind the text) for any element, by using the BACKGROUND-COLOR property, as follows:Page 6 of 15 mukeshtekwani@hotmail.com
  7. 7. CSS – Chap 1 <STYLE TYPE=”TEXT/CSS”> H2 {COLOR:WHITE; BACKGROUND-COLOR:BLUE} </STYLE>8 What is the ID selector in CSS? • ID selectors are used to specify a rule to bind to a particular unique element. As against this, the CLASS selector is used to specify a rule for a group of elements. • An ID selector is a name preceded by the hash (#) sign. • Elements are named using the id attribute. The values for ID must be unique. Syntax: <tag id="id-value">Some Text</tag> Example 1: Create an id selector called “FirstHeading” whose background color is green. #FirstHeading {background-color: green;} No apply this to H1 heading: <h1 id="FirstHeading">This is the First Heading!</h1> Example 2: <html> <head> <title>ID Rule Example</title> <style type="text/css"> #SecondParagraph {background-color: green;} </style> </head> <body> <p>This is the first paragraph.</p> <p id="SecondParagraph">This is the second paragraph.</p> <p>This is the third paragraph.</p> </body> </html> The first and third para will be normal, but the second para will have background color as green.9 What is the CLASS selector in CSS? 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 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}Prof. Mukesh N. Tekwani Page 7 of 15
  8. 8. CSS – Ch 1 </STYLE> Applying this style to a paragraph: <P CLASS=”QUOTE”> This is a paragraph </P> 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. <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> </HTML>10 Equivalence between HTMLtags and CSS Properties: HTML Tag CSS Property CSS Values <center> text-align left | right | center | justify <font> font-family, font-size, color Color attributes for <body> color, background-color Background image attributes background-image for <body>, <table>, and <td> <u> text-decoration: Underline11 Write the advantages and disadvantages of External style sheets Advantages: 1. Can set and update the styles for many documents at once, across a web site. 2. Style information is cached by the browser, so there’s no need to repeat. Disadvantage: Requires extra download round-trip for the style sheet, which might delay page rendering, particularly when multiple files are in use. Example: <link href="main.css" rel="stylesheet">Page 8 of 15 mukeshtekwani@hotmail.com
  9. 9. CSS – Chap 112 Write the advantages and disadvantages of Inline style Advantages: 1. Can easily control style for a single element. 2. Overrides any external or document-wide styles. Disadvantages: 1. Need to reapply style information throughout the document and all documents. 2. It is bound too closely to the markup and hence it is more difficult to update. Example: <h1 style="color:red;">I am a red heading!</h1>13 Write the advantages and disadvantages of Document-wide style. Advantages: 1. Style is embedded in HTML document so no additional network requests needed to download the external style sheet. Disadvantages: 1. Need to reapply the style information for all documents on the web site. This makes it more difficult to apply updates. Example: <style type="text/css"> h1 {color: red;} </style>14 How to specify text margins n CSS? 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: • 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} </STYLE>15 How to specify the text borders? The BORDER property can be used to set the border style, color and width. Syntax: {BORDER BORDER-STYLE BORDER-WIDTH BORDER-COLOR} Example <STYLE TYPE = “TEXT/CSS”> P {BORDER: SOLID 2pt BLUE} </STYLE>Prof. Mukesh N. Tekwani Page 9 of 15
  10. 10. CSS – Ch 116 Write a style rule to create a class QUOTE with style property color set to Red. Apply the style property of QUOTE to a paragraph. Creating the class QUOTE: <STYLE TYPE = “TEXT/CSS”> .QUOTE {COLOR:RED} </STYLE> Applying this style to a paragraph: <P CLASS=”QUOTE”> This is a paragraph </P>17 Changing background color with CSS: <html> <head> <style type="text/css"> body { background-color:#b0c45e; } </style> </head> <body> <h1>My CSS web page!</h1> <p>Hello world!</p> </body> </html>18 Set an image as the background of a page. <html> <head> <style type="text/css"> body {background-image:url(paper.gif);} </style> </head> <body> <h1>Hello World!</h1> </body> </html>19 Repeat a background image horizontally <html> <head> <style type="text/css"> body { background-image:url(ibm.png); background-repeat:repeat-x; } </style> </head> <body> Page 10 of 15 mukeshtekwani@hotmail.com
  11. 11. CSS – Chap 1 <h1>Hello World!</h1> </body> </html>20 Create a style rule as follows: To display the date in a right-aligned paragraph. To display the main text in a justified paragraph. <html> <head> <style type="text/css"> h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;} </style> </head> <body> <h1>CSS text-align Example</h1> <p class="date">Nov 2010</p> <p class="main">This is the main paragraph in which text alignment is “justified”</p> </body> </html>21 Text decoration Example Create style rules as follows: H1: line over the text; H2: strike through; H3: underline, H4: blinking text <html> <head> <style type="text/css"> h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} h4 {text-decoration:blink;} </style> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> </body> </html>22 Create style rules for the four states of a link. <html> <head> <style type="text/css"> a:link {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */Prof. Mukesh N. Tekwani Page 11 of 15
  12. 12. CSS – Ch 1 a:active {color:#0000FF;} /* selected link */ </style> </head> <body> <p><b><a href="default.asp" target="_blank"> 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.23 Rule to remove the margins on all elements * {margin: 0;} The wildcard selector * sets the value for all elements.24 Rule to make the first letter of a paragraph large and in red color <STYLE TYPE="TEXT/CSS"> p#intro:first-letter { font-size:5em; font-weight: bold; float: left; margin-right:.1em; color: #ff0000; } </style> <body> <p id="intro">This is the style you will find in many magazine articles. </p> </body>25 Create a style rule for H1 element with following specifications: H1 tag with o Background image: swirlbkg.jpg o Color—green o Letter-spacing-7pt o Text-align- center o Text-decoration-underline o Text-transform--uppercase; o Word-spacing: 2pt H1 { color:green; letter-spacing:7pt; text-align: center; text-decoration:underline; Page 12 of 15 mukeshtekwani@hotmail.com
  13. 13. CSS – Chap 1 text-transform:uppercase; word-spacing: 2pt }26 Create a style rule for P tag with following specifications: o Color – magenta o font-family – Algerian o font-size – medium o font-style—italic o font-weight—lighter P { color: magenta; font-family:Algerian; font-size: medium; font-style:italic; font-weight:-lighter; }27 Create a style rule for an unordered list with the following specifications: o Image shown instead of normal bullet <style type="text/css"> ul {list-style-image: url(‘EX_flag.gif’);} </style>28 Example to illustrate the various styles applied to lists: <html> <head> <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> <body> <p>Example of unordered lists:</p> <ul class="a"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="b"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li>Prof. Mukesh N. Tekwani Page 13 of 15
  14. 14. CSS – Ch 1 </ul> <ul class="e"> <li>Coffee</li> <li>Tea</li> <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> <ol class="d"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> </body> </html>29 Write a style rule for a <P> element with a 24 pt hanging indent and a 30 pixel margin on left and right sides. <STYLE TYPE = "TEXT/CSS"> P { text-indent:-24pt; margin-left:30px; margin-right:30px } </STYLE>30 Write a style rule for a <P> element with following specifications: Sans-serif font, 10pt type and 20pt leading, 20-pixel left and right margins. <STYLE TYPE = "TEXT/CSS"> P { FONT-FAMILY:ARIAL, HELVETICA, SANS-SERIF; FONT-SIZE:10pt; LINE-HEIGHT:20pt; MARGIN-LEFT:20px; MARGIN-RIGHT:20px } </STYLE>31 Create a class CHAPNUMBER for a chapter number with the following specifications. Show how it can be implemented with a H2 element. <STYLE TYPE = "TEXT/CSS"> Page 14 of 15 mukeshtekwani@hotmail.com
  15. 15. CSS – Chap 1 .CHAPNUMBER { FONT-SIZE:24pt; LINE-HEIGHT:36pt; FONT-WEIGHT:BOLD; MARGING-LEFT:20px; BACKGROUND-COLOR:gray; COLOR:white } <DIV CLASS = “CHAPNUMBER”> Chapter 1</DIV>32 Write a style rule to create a white on black reverse <h1> heading.33 Write a rule defining a division named NOTE. Specify 12-point bold Arial text o a yellow background.34 Write a rule specifying that the <I> elements display in red only when they appear with <P> elements.35 Write a rule specifying that <P> elements appear as 14 point text with 20-point leading.36 Miscellaneous Questions: What is the default browser font? What does the browser do if you specify a font that is not stored on the user’s computer? Name the two parts of a style rule. What element contains the style rule? Name three ways to select elements.Prof. Mukesh N. Tekwani Page 15 of 15