Cascading Style Sheets (CSS) help

6 de Mar de 2015

Mais conteúdo relacionado


Cascading Style Sheets (CSS) help

  1. HTML Tutorial 3HTML Tutorial 3 Web Development & Design Foundations with XHTML Cascading Style Sheets (CSS)
  2. Overview ofOverview of Cascading Style Sheets (CSS)Cascading Style Sheets (CSS) What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements External Style Sheets can 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. Methods of using Styles:Methods of using Styles:  Styling can be added to HTML elements in 3 ways: 1. Inline - using a style attribute in HTML elements 2. Internal - using a <style> element in the HTML <head> section 3. External - using one or more external CSS files  The most common way to add styling, is to keep the CSS syntax in separate CSS files.
  4. CSS SyntaxCSS Syntax
  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. 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. Using Color on Web PagesUsing Color on Web Pages 7
  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. 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. 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. 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. 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 <link> tag. The <link> tag goes inside the head section: 12 mystyle.css index.htmindex.htm clients.htmclients.htm about.htmabout.htm Etc…
  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 <style> tag, like this: Example:
  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. 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. ReferenceReference  s.asp Visit @ Or Email id: