Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

Introduction to
Cascaded Style Sheet(CSS)

Published in: Education
  • Login to see the comments

  • Be the first to like this


  1. 1. Prepared By: Er. Nawaraj Bhandari DESIGNING AND DEVELOPING A WEBSITE Topic 3: Introduction to Cascaded Style Sheet(CSS)
  2. 2. Cascading Style Sheets  Cascading Style Sheets (CSS) specify the presentation of web pages.  HTML describes the structure of a document.  Which part of the document is a heading, a paragraph, a list etc.?  We will learn CSS 2.1.  There is a new CSS 3  Many parts of CSS 3 are still under development.  Some parts of CSS 3 are useful now.
  3. 3. How does CSS Work? - 1 <h1>Welcome to <em>Cascading Style Sheets</em></h1> <p>The purpose of this page is to demonstrate how <em>CSS</em> works.</p>  When viewed in a browser, this HTML page will have a style.  Browsers apply default settings to page elements.  Using CSS, we can specify how we want this document to look.
  4. 4. How does CSS Work? - 2  Style sheets are made up of one or more style rules.  The selector specifies which part of the HTML document will be affected by the CSS rule.  The properties specify how we want to affect this part of the document. selector { property1 : value; property2 : value; } Generic structure h1{ color : red; font-size : 18px; } A Simple CSS Rule
  5. 5. Applying CSS  There are three different ways of applying CSS to a document: 1. Inline style sheet 2. Embedded style sheet or Internal style sheet 3. External style sheet
  6. 6. Inline CSS  The style attribute can be used to affect an individual HTML element.  The value is a list of CSS properties. ... <h1 style="color:blue; font-size:5px;">Welcome to <em>Cascading Style Sheets</em></h1> <p>The purpose of this page is to demonstrate how <em>CSS</em> works.</p> ...
  7. 7. Embedded CSS  Style rules can be nested inside a <style> element  The <style> element must be placed in the <head> of the document. … <style type="text/css"> h1 { color : green; font-size : 18px; } </style> </head> <body> <h1>Welcome to <em>Cascading Style Sheets</em></h1> <p>The purpose of this page is to demonstrate how <em>CSS</em> works.</p> …
  8. 8. External Style Sheet  The <link/> element is a standalone element.  Always goes in the <head> element  The href attribute specifies the filename of the CSS file.  The rel and type attributes are required and always have the same values. h1{ color : red; font-size : 18px; } <link href="style.css" rel="stylesheet" type="text/css"/> Save in a file named style.css <link/> element that links to style.css
  9. 9. Applying CSS  External CSS is the best way to style a website.  A single CSS file applied to all pages in a site  Can get large and bulky  Embedded CSS can be used to define style rules that only apply to a single page.  Inline CSS is rarely used.  Cannot reuse inline CSS rules  Tedious to update the design of the site
  10. 10. The Cascade  It is possible for two (or more) different sources of style information to specify conflicting rules for an element.  Example :  An inline style rule specifies an <h1> element should be colored blue.  An external style rule specifies <h1> elements should be colored red.  Browsers obey the most recently read CSS information.  Inline CSS takes precedence over external CSS.
  11. 11. Selectors – Multiple Selectors  There are many different ways to select different part of HTML documents.  Multiple elements can be selected using a comma.  An asterix (*) can be used to select all elements. h1, p { color:red; } *{ text- align:right; }
  12. 12. Selectors - Inheritance  By default, nested elements inherit style values.  The <em> element is nested inside a <h1> so will be coloured red.  The <p> element is nested inside the <body> so will be coloured blue. … <body> <h1>Welcome to <em>Cascading Style Sheets</em></h1> <p>The purpose of this page is to demonstrate how <em>CSS</em> works.</p> </body> … body{ color:blue ; } h1{ color:red; }
  13. 13. Selectors - Descendant Selectors  Descendant selectors are used to select elements that are nested within another specific element.  The descendant selection is made by using a white space.  In this example only the <em> element nested inside the paragraph will be affected. … <body> <h1>Welcome to <em>Cascading Style Sheets</em></h1> <p>The purpose of this page is to demonstrate how <em>CSS</em> works.</p> </body> … p em{ color:red; }
  14. 14. Selectors – Psuedo-Elements  Psuedo-elements are parts of elements.  E.g. the first line or first letter of an element
  15. 15. Selectors – The id Selector  The id attribute uniquely identifies an element  We can use an id selector (#) to target individual elements based on their id value.
  16. 16. Selectors – The class Selector  The class attribute can be applied to nearly any element.  It allows us to label related parts of an HTML document.  We can name our classes anything we like. But it should be meaningful.  The class selector (.) is used to select group elements based on class name.  The element name is followed by a full-stop (.) and the class name.
  17. 17. Selectors – The class Selector
  18. 18. The <div> and <span> Elements  HTML features two elements that do not have any semantic meaning.  <div> is a block level element.  <span> is an inline element.  We can specify meaning for these elements using class and id attributes.  The <div> element is especially useful.  We can nest any element we like inside a <div>. Unlike <p> cannot nest <p>.
  19. 19. The <div> and <span> Elements
  20. 20. CSS Font Size : px, pt, em, percent 1. Pixels (px)  Pixels are fixed-size units that are used in screen media.  One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution).  One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.
  21. 21. CSS Font Size : px, pt, em, percent 2. Points (pt)  Points are traditionally used in print media.  One point is equal to 1/72 of an inch.  Points are much like pixels, in that they are fixed-size units and cannot scale in size. 12pt = 16px
  22. 22. CSS Font Size : px, pt, em, percent 3. Ems (em)  The “em” is a scalable unit that is used in web document.  An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt.  Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc.  Ems are becoming increasingly popular in web documents due to scalability and their mobile-device- friendly nature. 1em = 12pt = 16px
  23. 23. CSS Font Size : px, pt, em, percent 4. Percent (%)  The percent unit is much like the “em” unit.  First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%).  While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.  1em = 12pt = 16px = 100%.
  24. 24. CSS Font Size : px, pt, em, percent  Generally, 1em = 12pt = 16px = 100%. 
  25. 25. CSS Properties 1. Text and font properties 2. Box properties 3. List properties 4. Background images 5. Floating and positioning
  26. 26. Text Properties The text-indent property specifies how much horizontal space text should be moved before the beginning of the first line of the text content of an element. Spacing is calculated from the starting edge of the block- level container element.
  27. 27. Font Properties  The font-family property can be used to specify a list of fonts (in order of preference).  Browsers can only display fonts that are installed on the user’s machine.  Font-names that feature white space must be placed in quotes.
  28. 28. Box Properties  CSS views every HTML element as having a box around it.  This box has a number of properties. 1. Height 2. Width 3. Border 4. Margin 5. Padding – Margin is the gap around the outside of the element. – Padding is the area between the element’s content and
  29. 29. Box Properties
  30. 30. More about border  Border can be specified for particular sides of elements.
  31. 31. More about border  Border can be specified for particular sides of elements with particular properties..
  32. 32. Box Properties
  33. 33. Box Properties
  34. 34. Box Properties –Margin, border and padding can be specified for particular sides of elements. – E.g. div { padding-top : 10px; }
  35. 35. Block and Inline Elements  CSS treats block and inline elements differently.  By default, the box for block level elements extends to the width of the browser window.  The box for inline elements only stretches as wide as the element itself,  We cannot set the width or height of inline elements.
  36. 36. Block and Inline Elements  We can make inline elements behave like block level elements using the display property.  This is especially useful when we want to make navigation bars from list elements.  The display property can also have a value of none which hides the element from view.
  37. 37. Specifying Colour  A colour name  p { color : red; }  An RGB value  The amount of red, green and blue is given as a number between 0 and 255.  p { color : rgb(255, 0, 0); }=Red  rgb(255,255,255)=White  A hexadecimal RGB value  Always preceded by the hash (#) character  White:#FFFFFF  Red:#FF0000  Blue:#008000
  38. 38. Efficient CSS  External CSS files can quickly become very large. Managing the CSS can be difficult.  Techniques for making CSS efficient and easy to manage  Use multiple selectors where possible  Use inheritance where possible  Use CSS comments to separate and explain CSS rules. Comment can be provided using /* and ends with */
  39. 39. Efficient CSS
  40. 40. Accessibility and CSS  Separation of structure from presentation  HTML only specifies structure so can be understood by everyone  Users can switch off CSS.  Even they can define their own user defined style sheet
  41. 41. The Media Attribute  We can specify a media attribute in the <link/> element.  Specifies different style sheets for different output  The print.css style sheet will be used if the user prints the page.  Some other values of media attribute are all, aural, handheld, projection, tv, etc.
  42. 42. The Media Attribute
  43. 43. Validating CSS  Like HTML documents, CSS can be validated using a W3C validator.   Helps identify syntax errors  Less important than validating HTML documents
  44. 44. Developer Tools  Many browsers provide facilities for us to examine the CSS of a web page.  Google Chrome - Developer Tools  Mozilla FireFox – by using the Firebug add-on   These are useful in two ways  Learn CSS techniques used in other peoples’ websites.  Help fix problems in our own CSS.
  45. 45. References  font-size-em-vs-px-vs-pt-vs/  s.asp