Cascading Style Sheets (CSS) help

Download Cascading Style Sheets (CSS) help

Post on 15-Aug-2015




3 download


  1. 1. HTML Tutorial 3HTML Tutorial 3 Web Development & Design Foundations with XHTML Cascading Style Sheets (CSS)
  2. 2. Overview ofOverview of Cascading Style Sheets (CSS)Cascading Style Sheets (CSS) What is CSS? CSSstands forCascadingStyleSheets Styles definehow to displayHTML elements External Style Sheetscan save a lot of work Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file! 2
  3. 3. Methods of using Styles:Methods of using Styles: Styling can be added to HTML elements in 3 ways: 1. Inline - using astyle attributein HTML elements 2. Internal - using a
  4. 4. CSS SyntaxCSS Syntax
  5. 5. CSS Syntax SampleCSS Syntax Sample Configure a Web page to display blue text and yellow background. body { color: blue; background-color: yellow; } This could also be written using hexadecimal color values as shown below. body { color: #0000FF; background-color: #FFFF00; } 5
  6. 6. Color ValuesColor Values CSS colors are defined using a hexadecimal (hex) notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one of the light sources is 0 (hex 00). The highest value is 255 (hex FF). Hex values are written as 3 double digit numbers, starting with a # sign.
  7. 7. Using Color on Web PagesUsing Color on Web Pages 7
  8. 8. Common FormattingCommon Formatting CSS PropertiesCSS Properties See Table 3.1 Common CSS Properties, including: background-color color font-family font-size font-style font-weight line-height margin text-align width 8
  9. 9. Configuring Text with CSSConfiguring Text with CSS CSS properties for configuring text: font-weight Configures the boldness of text font-style Configures text to an italic style font-size Configures the size of the text font-family Configures the font typeface of the text
  10. 10. The font-family PropertyThe font-family Property Not everyone has the same fonts installed in their computer Configure a list of fonts and include a generic family name p {font-family: Arial,Verdana, sans- serif;}
  11. 11. 1. External Style Sheets1. External Style Sheets CSS style rules are contained in a text file separate from the XHTML documents. The External Style Sheet text file: extension ".css" contains only style rules does not contain any XHTML tags 11
  12. 12. 1.External Style Sheets -1.External Style Sheets - cont.cont. Multiple web pages can associate with the same external style sheet file. Each page must include a link to the style sheet with the tag. The tag goes inside the head section: 12 mystyle.css index.htmindex.htm clients.htmclients.htm about.htmabout.htm Etc
  13. 13. 2. Internal Style Sheet2. Internal Style Sheet An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, inside the
  14. 14. Multiple Style SheetsMultiple Style Sheets If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet. For example, assume that an external style sheet has the following properties for the h1 selector: then, assume that an internal style sheet also has the following property for the h1 selector: The left margin is inherited from the external style sheet and the color is replaced by the internal style sheet.
  15. 15. 3. Inline Styles3. Inline Styles To use inline styles, add the style attribute to the relevant tag. The example shows how to change the color and the left margin of a h1 element: An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly!
  16. 16. ReferenceReference s.asp Visit @ Or Email id: