Teaching presentation


Published on

Published in: Technology, 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

Teaching presentation

  1. 1. Teaching Presentation CSS-Lesson: I Topic: Cascading Style Sheet (CSS) Basics By Jakia Salam12/9/2011
  2. 2. Lesson Objectives:  Introduction to CSS  Define a style rule or syntax  The id and class Selectors  Applying a style sheet to a Web Page  Questions and Answers12/9/2011
  3. 3. Introducing CSS  CSS stands for Cascading Style Sheet. Web developers define the look and feel of their Web pages using CSS  It allows developers and designers to separate content from design. CSS can be applied to any HTML and XHTML file to render HTML or XHTML document using a Browser  CSS provides consistent look and feel to an entire website through precise control of web page elements  Versions include CSS1, CSS2, CSS2.1 and CSS3 (current version)  Compatibility issues with different versions of CSS and browsers need to be considered as part of web site design12/9/2011
  4. 4. Introducing CSS12/9/2011
  5. 5. Define style rule  Basic syntax for CSS style is: Selector { Property 1: value1; Property 2: value2; Property 3: value 3;……}  The selector is normally the HTML element you want to style  Each declaration consists of a property and a value12/9/2011
  6. 6. The id selector  The id selector is used to specify a style for a single, unique element.  The id selector uses the id attribute of the HTML element, and is defined with a “#”.  The style rule below will be applied to the element with id=“header”: Result:12/9/2011
  7. 7. The class selector  The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements  The class selector uses the HTML class attribute, and is defined with a “.” The style rule below will be applied to the element with class=“imageright” Result12/9/2011
  8. 8. Cascade in Cascading Style Sheet  An webpage is a combination of several style sheets:12/9/2011
  9. 9. Three Ways to Insert CSS  External style sheet  Internal style sheet  Inline style12/9/2011
  10. 10. External Style Sheets  External style sheet is a separate document with a .css extension.  Linking an external style sheet <link> or @import:12/9/2011
  11. 11. Why external CSS is always a better choice?  It keeps your website design and content separate. It is much easier to reuse your CSS code if you have it in a separate file  You can make any changes to your web pages with just a few changes in a single CSS file  Clean code that is easy to understand12/9/2011
  12. 12. Embedded Style Sheets  Embedded Styles are directly inserted within the head element of an HTML document using <style> tag. <style type=“text/css”> style rules </style>  Example: Code for Embedded Style12/9/2011
  13. 13. Inline Style Sheets  Styles are directly applied to specific elements using style attribute. <element style=“style rules”>…………</element>  Example: Inline Style  Very clear exactly what page element is being formatted  Not recommend in most cases.12/9/2011
  14. 14. CSS Demo  http://www.w3schools.com/css/demo_default.htm12/9/2011
  15. 15. Some of my sample web designs using CSS12/9/2011
  16. 16. Cascading Style Sheet Resources:  W3 School  CSS Beginner Tutorial  Web Style Sheets CSS tips & tricks  Zen Garden12/9/2011
  17. 17. Thank You12/9/2011
  18. 18. Any Questions?12/9/2011
  19. 19. Website:  jakiasalam.com  NCDLA 2009 Distance Learning Awards12/9/2011
  20. 20. Website with and without CSS  http://www.jakiasalam.com/portfolio/websites/links.p hp  http://www.jakiasalam.com/portfolio/websites/linkste st.php12/9/2011
  21. 21. User defined  Almost all browsers allow users to modify the default setting of the internal style sheet.  Example: using user defined CSS in safari browser12/9/2011